Stateless and Stateful components

Stateless: When a component is “stateless”, it calculates STATE is calculated internally but it directly never mutates it. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.

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

Stateful : When a component is “stateful”, it is a central point that STORES every INFORMATION in memory about the app/component’s state, do has the ABILITY to change it. It has knowledge of past, current and potential future state changes. Stateful component change the state, using this.setState method.

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

Stateless and Stateful components

Stateless: When a component is “stateless”, it calculates state is calculated internally but it directly never mutates it. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.

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

Stateful : When a component is “stateful”, it is a central point that stores every information in memory about the app/component’s state, do has the ability to change it. It has knowledge of past, current and potential future state changes. Stateful component change the state, using this.setState method.

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