Updating the state after a component mount will trigger a second render()
call and can lead to property/layout thrashing.
This rule is aimed to forbid the use of this.setState
in componentDidMount
.
The following patterns are considered warnings:
var Hello = React.createClass({
componentDidMount: function() {
this.setState({
name: this.props.name.toUpperCase()
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
var Hello = React.createClass({
componentDidMount: function() {
this.onMount(function callback(newName) {
this.setState({
name: newName
});
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
The following patterns are not considered warnings:
var Hello = React.createClass({
componentDidMount: function() {
this.props.onMount();
},
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
...
"no-did-mount-set-state": [<enabled>, <mode>]
...
By default this rule forbids any call to this.setState
in componentDidMount
. But since componentDidMount
is a common place to set some event listeners, you may end up with calls to this.setState
in some callbacks. The allow-in-func
mode allows you to use this.setState
in componentDidMount
as long as they are called within a function.
The following patterns are considered warnings:
var Hello = React.createClass({
componentDidMount: function() {
this.setState({
name: this.props.name.toUpperCase()
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
The following patterns are not considered warnings:
var Hello = React.createClass({
componentDidMount: function() {
this.onMount(function callback(newName) {
this.setState({
name: newName
});
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});