Reactのパフォーマンスチューニング

Reactのパフォーマンスチューニングについて、調べたことをまとめていきます。

パフォーマンスを意識せずに、Reactでそこそこの規模のWebアプリを作成すると、動きがもっさりする。
この主な原因としては、コンポーネントの再描画のコストが大いこと。

コンポーネントの再描画は以下の契機で発生する。

• 親のコンポーネントが再描画された。
  • Propsに変更がない場合でも再描画が実行される。
• useStateやuseReducerで取得したstateが更新された。
  • useStateやuseReducerを呼び出しているFCが再描画される。
• useContextで取得したstateが更新された。
  • Provider配下全てではなく、useContextでstateを取得しているFCが再描画される。
    （当然その子孫コンポーネントも再描画される）

パフォーマンスチューニングのアプローチは以下の通り

• React.memo
• memo + useCallback
• useMemo
• Contextの分割

参考記事系

• Hooks時代のReactパフォーマンスチューニング
• React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする
• 雰囲気で使わない React hooks の useCallback/useMemo
  
• React Hooks、useStateの更新関数引数には関数を
• React の関数コンポーネントが再呼び出しされる条件
• React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜

React.memo

概要

• レンダリング結果をキャッシュする。(propsが変わった場合のみレンダリングされる)
  • 正確には第2引数で、比較関数を書ける

方針

• 基本的に全コンポーネントに適用する(本当は乱用は避けるべき)
  • ただし以下は除外
    • 各ページのルートとなるコンポーネント

useCallback

概要

• 生成された関数をキャッシュする。

方針

• 子コンポーネントにPropsでハンドラーを渡す場合に適用する。
  • = ハンドラーを即時関数で渡すことは禁止（一旦useCallbackでラップして変数代入する）

useMemo

概要

• 計算結果をキャッシュする。

方針

• フロントで重い処理をする関数で利用する。
  • 配列処理で、サイズが大きくなる可能性がある部分についても予め追記しておく。

注意

• useCallback,useMemoの第二引数には注意する。
  • 意図したタイミングで再生成されている、されていないこと両方を確認すること