Stateful and Stateless components in React

Lets have a little chat about stateful and stateless components in React. But first, we'd have to say what the heck is React. React is a framework for building web applications.

In React, applications are made of components. If you pass the same arguments (properties in React lingo, or props) to a component, you have the same output. This allows components to be reusable.

One more important facet about React is that components cannot change their props. Or rather, information only flows in one direction. Components can have children and give the props to them, they can also store some information once they are created (the state), but after you give them the props, they wont be able to be changed anymore. This makes components and the application quite static and a more easy to predict.

In conventional HTML and Javascript applications, Javascript is used to modify the DOM with data, and it usually does this “imperatively”. This means we define each step through code to create the result we want:

Here is an example of a stateless component:

An imperative example of calling an API

Call API
Set some spinner as loading by adding it to the DOM
Get API result
Remove the loading spinner by removing it from the DOM
Add result to DOM by inserting HTML results

React tries to describe things in a “declarative” way, instead of imperatively. This means, we focus on writing what we want the result to look like, and not the steps that take us to that result.

This takes us to state. React’s state is used to declaratively set the state of the app, and pass those values to our components. The components then simply use the state passed to render themselves in a specific way:

A declarative example, using same example as above:

var React = require('react');

var Header = React.createClass({
render: function() {
return(

);
}
});

Conversely, here is a stateful one:

var React = require('react');

var Header = React.createClass({

getInitialState: function() {
    return {
        someVariable: "I remember something"
    };
},

render: function() {
    return(
        <img src={'mypicture.png'} />
    );
}

This tells our loading spinner to render automatically

Call API
Get API result, set state to apiCallInProgress: false

This tells our loading spinner to hide and the result automatically populate to the DOM

It’s nice because it is easier to understand what is going on just by following the state values.

Hopefully that helped to clarify some of the ambiguities, or maybe it simply created more. If that's the case then I recommend giving this insightful article a little read to clear up any remaining doubts:

Conclusion
Deciding between stateless and stateful components depends on your needs. You should think carefully about how each component will be used. If you won’t use state, refs or lifecycle hooks then you should choose stateless components, because there is a significant difference between transpiled versions of them.

var Header = React.createClass({
render: function() {
return(

);
}
});

https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

Thanks and see you next time coders!