Avoid using
setState in componentDidMount JS-0442Do not use setState in componentDidMount
9 componentDidMount() {
10 findDOMNode(this).scrollIntoView();
11 this.state.mode = this.props.userSettings.mode
12 this.setState({13 mode: this.props.userSettings.mode
14 });
15 }
Description
componentDidMount() is invoked immediately after a component is mounted. This method is a good place to load data from an endpoint as it is invoked before the browser updates the screen.
Using setState() in componentDidMount() will trigger an extra rendering, so it causes performance issues as render() will be called twice.
Bad Practice
var Hello = createReactClass({
componentDidMount: function() {
this.setState({
name: this.props.name.toUpperCase()
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
Recommended
var Hello = createReactClass({
componentDidMount: function() {
this.onMount(function callback(newName) {
this.setState({
name: newName
});
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
var Hello = createReactClass({
componentDidMount: function() {
this.props.onMount();
},
render: function() {
return <div>Hello {this.props.name}</div>;
}
});