Difference between stateful and stateless in ReactJS

What is the state?

A state is an object which is declared inside the constructor method of the class. hey are mutable and are used to interact between the different components of the class.

Stateful Components

Stateful components are the component which has state. They are created in the constructor method of the class. They are referred to as class component and are extended by React.Component. Stateful component or container deal with the data which are frequently updated. Stateful component receives both state and props. The state is mutable and is updated with this.setState() method of the class.

Stateless Components

A stateless component is static and often acts as a container in an app. These components only receive props. They act upon the data which are pass to them as props. Stateless component is written as pure javascript function whose parameter value does not change.Stateless component is sometimes also referred to as ‘presentational component’. They are used when you know that the information is static and will never change. Whenever writing component we should always use stateless components whenever possible.

Stateful vs Stateless

The main difference between these two states is that one has a state and the other does not. That means stateful components always used to track data that are frequently changing while stateless component prints out data that are passed to them as props or they will always render the same thing.

Now let’s look at an example of stateful and stateless components.

First, let’s look at the data to be rendered:


const data = [
    {
        'type':'Flowers',
        'kind': 'Lotus',
    },
    {
        'type':'Animals',
        'kind': 'Cat',
    },
    {
        'type':'Animals',
        'kind': 'Dog',
    },
    {
        'type':'Flowers',
        'kind': 'Balsam',
    },
    {
        'type':'Animals',
        'kind': 'Snake',
    },
    {
        'type':'Flowers',
        'kind': 'Sunflower',
    },
    {
        'type':'Flowers',
        'kind': 'Rose',
    },
]

Now let’s create our parent class or stateful class which will contain the state of this data.


class Statefull extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data : data };
    }
    clickToFileter (kind) 
    {
        let types = [];
        if(kind === 'all')
        {
            types = data;
        }
        else
        {
            types = data.filter(value => { 
                if ( value.type === kind) return true;
            });
        }
        this.setState({data:types});
    }

    render()
    {
        return(
            <div className="App">
                <h3> Types Lists: </h3>
                <button onClick={(e) => { this.clickToFileter('all') }}> All </button>
                <button onClick={(e) => { this.clickToFileter('Animals') }}> Animals </button>
                <button onClick={(e) => { this.clickToFileter('Flowers') }}> Flowers </button>
                {
                    this.state.data.map((value,idx) => {
                return <Stateless key = {idx} kind={value.kind} />
                    })
                }
            </div>
        )
    }
}

In the above code, I have given three-button which will change the state of the component. And this changed state is pass-through Statless component as props which then display the content of the state.

    const Stateless  = ({kind}) =>{
        return <h3>{kind}</h3>
    }

OUTPUT:

Difference between stateful and stateless in ReactJS
Difference between stateful and stateless in ReactJS

Sharing is caring!

Leave a Comment

Your email address will not be published. Required fields are marked *

shares
Scroll to Top