Learn Stateful and Stateless components in ReactJS

Have you ever encountered the question of what stateful components are? What  stateless components are? When should I make a component stateful or stateless?

If so, don’t worry, you’ve come to the right place. So, let’s first try to understand what state and components are before we talk about stateful vs. stateless?

State

A State is an object inside the constructor method of a class which is a must in the stateful components. It is used for internal communication inside a component. It allows you to create components that are interactive and reusable. It is mutable and can only be changed by using setState() method.

Simple Example of Stateful Component which has two properties.

import React, { Component } from 'react';

class StateExample extends Component {

   constructor(){

       super();

       this.state={

           first_name: '',

           last_name: ''

       }

   }

   render(){

      <div>

<p>State Component </p>

</div>

   }

}
export default StateExample;

Components

A React application is divided into smaller molecules, and each molecule represents a component. In other words, a component is the basic building of a React application. It can be either a class component or a functional component.

React components are independent and reusable and contains JSX(JavaScript XML Syntax) which a combination of JS + HTML. It may take props as the parameter and returns a Document Object Model(DOM) element that describes how the User Interface(UI) should appear.

Class Component(Stateful)

import React, { Component } from 'react';

class StateExample extends Component {

   constructor(){

       super();

       this.state={

           first_name: 'Shruti',

           last_name: 'Priya'

       }

   }

   render(){

       return (

           <div>

    <p> Class Component </p>

               <p>{this.state.first_name}</p>

               <p>{this.state.last_name}</p>

           </div>

       )

   }

}
export default StateExample;

Functional Component(Stateless)

import React from 'react';

function Example(props) {

    return(

        <div>

        <p>{props.first_name}</p>

        <p>{props.last_name}</p>

        </div>

    )

}
export default Example;

Stateful Components

Stateful components are those components which have a state. The state gets initialized in the constructor. It stores information about the component’s state change in memory. It may get changed depending upon the action of the component or child components.

Stateless Components

Stateless components are those components which don’t have any state at all, which means you can’t use this.setState inside these components. It is like a normal function with no render method. It has no lifecycle, so it is not possible to use lifecycle methods such as componentDidMount and other hooks. When react renders our stateless component, all that it needs to do is just call the stateless component and pass down the props.

Stateful vs. Stateless

A stateless component can render props, whereas a stateful component can render both props and state. A significant thing to note here is to comprehend the syntax distinction. In stateless components, the props are displayed like {props.name} but in stateful components, the props and state are rendered like {this.props.name} and {this.state.name} respectively. A stateless component renders output which depends upon props value, but a stateful component render depends upon the value of the state. A functional component is always a stateless component, but the class component can be stateless or stateful.

There are many distinct names to stateful and stateless components.

– Container components vs Presentational components

– Smart components vs Dumb components

I’m sure you guys must have guessed by just looking at the names which are stateful and stateless. Haven’t you?

State and Props used in stateful component

import React, { Component } from 'react';

class StateAndProps extends Component {

   constructor(props){

       super(props);

       this.state={

       value: '50'

       }

   }

   render(){

      return (

           <div>

               <p>{this.state.value}</p>

               <p>{this.props.value}</p>

               </div>

       )

   }

}
export default StateAndProps;

When should I make a component stateful or stateless?

It’s pretty straightforward that you should make your component stateful whenever you want to have a dynamic output (means that the output will change whenever the state changes), and you want to share the properties of parent component with the children components. On the other side, if there is no state necessity, you should make the component stateless.

Conclusion

Stateless components are more elegant and usually are the right choice for building the presentational components because they are just functions, you won’t find it challenging to write and understand them, and moreover, they are very straightforward to test.

There is no need for ‘this’ keyword that has always been a significant cause of confusion. Stateful components are difficult to test. Moreover, it tends to combine logic and presentation together in one single class, which is again a wrong choice for the separation issues.