最終更新:2023-07-21 (金) 17:07:03 (273d)
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
- useStateというフックを使う
React/クラスコンポーネントの場合
- コンストラクタの中でthis.stateにオブジェクトとして代入
更新されない
- 関数内で古い props や state が見えているのはなぜですか?
- https://ja.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function
- イベントハンドラにせよ副作用関数にせよ、コンポーネント内に書かれた関数からは、その関数が作成された時の props や state が「見え」ます。
- 非同期的に実行されるコールバック内で、意図的に state の最新の値を読み出したいという場合は、その値を ref 内に保持して、それを書き換えたり読み出したりすることができます。