[React] メモ化で効率的なコンポーネントを作れるように

メモ化とは？

計算結果をキャッシュしておき、同じ計算が再度必要になったとき、キャッシュされた結果を再利用する技術

Reactでは主に以下のメソッドを利用する。

• useMemo
• useCallback
• React.memo

---

useMemo

• useMemoはメモ化された値を返すためのReactフック
• 第1引数に関数、第2引数に依存配列を渡す（省略不可）
• 依存配列を省略した場合は初回のみ実行される

使用するべきケース

• 重い計算の結果をメモ化
  計算コストが高い処理をメモ化することで、パフォーマンスを向上させる

  const heavyCalculation = useMemo(() => {
      return expensiveFunction(a, b);
  }, [a, b]);
  

• オブジェクトや配列の再生成を避ける
  オブジェクトや配列を再生成すると再レンダリングが発生するため、これを避けるために使用

  const memoizedObject = useMemo(() => ({ key: value }), [value]);
  

使用しない方が良いケース

• 安価な計算
  • 計算コストが低い場合、useMemoのオーバーヘッドの方が大きくなる
• 依存配列が頻繁に変わる
  • 頻繁に依存配列が変わる場合、再計算のコストが無視できない

注意点

• useMemoはパフォーマンス最適化のために使うが、必要以上に使用すると逆効果になる場合がある
• 重い計算や再生成のコストが高いオブジェクトのメモ化に限定して使うのが良い

---

useCallback

• useMemoはメモ化された関数を返すためのReactフック
• 第1引数に関数、第2引数に依存配列を渡す
• 依存配列を省略した場合は初回のみ実行される

使用するべきケース

• 関数の再生成を避ける
  子コンポーネントに渡す関数をメモ化することで、不要な再レンダリングを防ぐ

  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

• イベントハンドラのメモ化
  頻繁に再生成されるイベントハンドラをメモ化することで、パフォーマンスを向上させる

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);
  

使用しない方が良いケース

useMemoと同様

---

React.memo

• メモ化されたコンポーネントを返すために使用される
• 再レンダリングを防ぐために使用され、親コンポーネントの再レンダリング時に子コンポーネントが再レンダリングされないようにする
• 親コンポーネントから渡されるpropsが更新された場合は再レンダリングが実行

使用するべきケース

• コンポーネントの再レンダリングを防ぐ
  再レンダリングコストが高いコンポーネントや、頻繁に再レンダリングされるコンポーネントに対して使用

  const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
  });
  

使用しない方が良いケース

• 軽量なコンポーネント

---

まとめ

• useMemo: 値をメモ化するために使用
• useCallback: 関数をメモ化するために使用
• React.memo: コンポーネント全体をメモ化するために使用