ReactJS difference between stateful and stateless

Question

I am trying to understand the exact difference between React's stateful and stateless components. Ok, stateless components just do something, but remember nothing, while stateful components may do the same, but they remember stuff within this.state. That's the theory.

But now, checking on how to show this using code, I have a little trouble making the difference. Am I right with the following two examples? The only difference really is the definition of the getInitialState function.

Example of a stateless component:

var React = require('react');  var Header = React.createClass({     render: function() {         return(             <img src={'mypicture.png'} />         );     } });  module.exports = Header; 

Example of a stateful component:

var React = require('react');  var Header = React.createClass({      getInitialState: function() {         return {             someVariable: "I remember something"         };     },      render: function() {         return(             <img src={'mypicture.png'} />         );     } });  module.exports = Header; 

Answer 1

Yes, that is sort of the difference. Except with the stateful component you can also change the state, using this.setState for example:

var React = require('react');  var Header = React.createClass({      getInitialState: function() {         return {             imageSource: "mypicture.png"         };     },      changeImage: function() {          this.setState({imageSource: "differentpicture.png"});     },      render: function() {         return(             <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />         );     } });  module.exports = Header; 

So, in the example above, the changeImage manages the state of the component (which would also cause all child/dependent components to be re-rendered).

Somewhere in the application, you need to bind data, or remember things. Stateless components are dumb (and that is good), they cannot remember and they cannot give context to other parts of the UI. Stateful components provide the necessary context glue.

On the other hand, stateless components just get passed context (usually through this.props:

var React = require('react');  var Header = React.createClass({     render: function() {         return(             <img src={this.props.imageSource} />         );     } });  ReactDOM.render(<Header imageSource="myImage.png"/>, document.body); 

In the example above, you can see that during the render, imageSource is passed in as an attribute and is then added to the stateless components this.props object.

Answer 2

Functional Component or Stateless component

1. Functional component is like pure function in JavaScript.
2. Functional component is also called as a stateless component.
3. The functional component only receives props from parent component and return you JSX elements.
4. The functional component doesn’t play with any lifecycle methods of React and doesn’t play with the component state.

Class component or statefull component

1. React class component is called as a stateful component.
2. Stateful component plays with all life cycle methods of React.
3. This component will modify state.

That’s the major differences

If you have knowledge about pure function in JavaScript then you can understand functional or stateless component easily.