最終更新:2023-07-21 (金) 17:07:03 (338d)  

React/ステート
Top / React / ステート

React/コンポーネントの状態

state を正しく使用する

state を直接変更しないこと

  • setStateを使う。
  • this.state に直接代入してよい唯一の場所はコンストラクタ

state の更新は非同期に行われる可能性がある

  • React はパフォーマンスのために、複数の setState() 呼び出しを 1 度の更新にまとめて処理することがあります。
  • this.props と this.state は非同期に更新されるため、次の state を求める際に、それらの値に依存するべきではありません。
  • this.setState((state, props) とすると第2引数のpropsで更新が適用される時点のpropsを受け取れる

state の更新はマージされる

メモ

  • React の仕様で state は次のレンダリングされるタイミングまで反映されない

React/関数コンポーネントの場合

React Hooks

React/クラスコンポーネントの場合

  • コンストラクタの中でthis.stateにオブジェクトとして代入

更新されない

  • 非同期的に実行されるコールバック内で、意図的に state の最新の値を読み出したいという場合は、その値を ref 内に保持して、それを書き換えたり読み出したりすることができます。

関連