components - 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.