Reactのパフォーマンスチューニングの手段になり得るメモ化についてです
そもそもメモ化って何？
- 関数コンポーネントやその他の変数のキャッシュを保持すること
- Reactでメモ化を行う際は以下の機能を使う
- React.memo：関数コンポーネントのデータをメモ化
- 渡ってきたpropsの変更がなければ再レンダリングを回避できる
- propsに渡ってきた関数は再レンダリングされる度に再生成されるので、React.memoでラップしていたとしても、関数コンポーネントが再レンダリングされてしまう課題がある
- useCallback：React.memoではカバーしきれないprops（関数）のメモ化をサポート
- 関数データの変更がない場合は再利用するように制御することで、関数データのpropsを持つ関数コンポーネントの不要な再レンダリングを防ぐことができる
- 変更に応じて再生成をしたい関数データがある場合は、第2引数の依存配列に指定
- useMemo：変数や関数のデータをメモ化
- 変更に応じて再レンダリングをかけたいデータがある場合は、第2引数の依存配列に指定
- メモ化のメリデメ
- メリット
- メモ化することによって毎回コンポーネントや変数が再生成されることがなくなるので、不要な再レンダリングを減らせる
- デメリット
- 依存配列のデータ管理を適切に行わないと、キャッシュによって2回目以降の再レンダリングが走らずに適切にページ反映されないバグが生じる場合がある
- 更新に応じてページを再レンダリングさせたいstateは依存配列に指定する
- メモ化の処理自体もコストがかかるので、重い処理にのみ適用することを意識する
メモ化のユースケースについて
- 親コンポーネントから子コンポーネントに渡されたpropsの変更によって再レンダリングされる頻度が少ない場合
- 子コンポーネントへの再レンダリングのトリガーをpropsの変更だけにとどめることによって、パフォーマンス改善につながる
- 不必要な再レンダリングによってパフォーマンスが悪くなっている場合
- react developer tools > Profilerを使うことで再レンダリングの時間を計測できる
- 一番左の青いボタンを押下して記録開始
- Reactのページ上から再レンダリングさせる
- 再度ボタンを押下して記録終了
- 再レンダリングの測定結果を確認してボトルネックを特定
- 必要に応じてMemo化でラップする
React.memo
これを使うことで、親コンポーネントが再レンダリングされた際に、stateに変更がない子コンポーネントが再レンダリングされる事象を防ぐことができる
※ memoはあくまでpropsの値の変更を監視しているため、stateがuseStateによって更新される際はこれまで通り再レンダリングが走る
親コンポーネントからボタンAを押下したとき、React.memoを使用しない場合には変更内容に関係のないcountBをpropsに渡しているChildコンポーネントも再レンダリングの対象になってしまう