react/no-access-state-in-setstate
Disallow reading this.state in the argument of this.setState()
React batches setState calls, so this.state may still hold the old value when you build the next one from it. Two this.setState({ count: this.state.count + 1 }) calls in the same event add 1, not 2.
Pass a function instead. React calls it with the state after all earlier updates.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/no-access-state-in-setstate" = "error" # or "warn"Examples#
example.jsx1 problem
class Counter extends React.Component {
increment() {
this.setState({ count: this.stateUse callback in setState when referencing the previous state..count + 1 });
}
}Reading the value into a variable first doesn't help:
example.jsx1 problem
class Counter extends React.Component {
increment() {
const count = this.stateUse callback in setState when referencing the previous state..count;
this.setState({ count: count + 1 });
}
}example.jsxNo problems
class Counter extends React.Component {
increment() {
this.setState(previous => ({ count: previous.count + 1 }));
}
}