MENU

React setState レンダリング メモ

setSateの理解の重要性

  • stateを更新すると再レンダリングが走る
  • 再レンダリングが走ると、マウント、update（ライフサイクル）が走る
  • useEffect内の処理が走るためその中にデータ取得の処理があればロジックの理解に大切

setState

  • 丁寧な書き方

setStateは setState(updater[, callback]) となっている 丁寧に書くと下記の様になる見たい

## 簡略化
setState({counter: counter += 1})

## 丁寧な書き方
this.setState((state, props) => {
  return {counter: state.counter + props.step};
});
  • 非同期

setStateは非同期処理っぽいので setStateで値を更新してすぐにstateを利用すると値がセットされないことがある 実際に自分でも体験したのは下記

badの方法でAPIリクエストしたら valが渡されいなかった。 おそらくstate更新の非同期処理のせいなんだと思う

### bad
const updateValue = (val: number) => {
  setValue({value: val})

  ## apiを実行する関数です
  updateValue(value)
}

### good

const updateValue = (val: number) => {
  setValue({value: val})

  ## apiを実行する関数です
  updateValue(val)
}

補足情報

  • ライフサイクル

zenn.dev