メモブログ

技術的なことを書き連ねるブログ

es-lint-react の 「react/no-access-state-in-setstate」

setStateの中でthis.stateを参照しようとしたら怒られた話。

function increment() {
  this.setState({value: this.state.value + 1});
}

なんでダメかというと
github.com

setState({value: 1 + 1})
setState({value: 1 + 1})

連続で使用した時に
1+1 = 2 , 2+1 = 3 となってほしい所を、
1+1 =2, 1+1=2 , と古い状態のstateにアクセスしてしまう場合があるらしい。
要するに、前のsetStateが終わっていない状態で、次のsetStateが走ってしまうということ。

function increment() {
  this.setState(prevState => ({value: prevState.value + 1}));
}

そういう時は、setStateメソッドには、コールバックが用意されているので
これを使えば、

setState({value: 1 + 1})
setState({value: 2 + 1})

と、期待通りの挙動になる。