最終更新:2022-08-04 (木) 12:53:52 (4d)  

React/レンダリング
Top / React / レンダリング

React/関数コンポーネント

  • stateが更新されたときに頭から処理が実行され、JSXで記述したReact要素がreturnされる
  • useStateの初期値の設定はマウント時のみ

React/クラスコンポーネント

再レンダリングの条件

  • stateが更新されたコンポーネント
  • propsが更新されたコンポーネント
  • 再レンダリングされたコンポーネント配下のコンポーネント全て

useState

値が更新されない

  • 理由:setStateで値が更新されるのは関数が呼び出された後

React/メモ化

  • propsに変更がない限り再レンダリングされないようになる

関数を子コンポーネントに渡す場合

  • 何もしないと再レンダリングでコードが実行されるたびに新しい関数が再生成される
    • propsが変化してしまい、子要素もレンダリングされてしまう
  • useCallbackを使い関数をメモ化