最終更新:2024-05-09 (木) 09:08:12 (15d)  

React/メモ化
Top / React / メモ化

前回の処理結果を保持して高速化

コンポーネントのメモ化 (React.memo)

  • propsに変更がない限り再レンダリングされなくなる
  • 関数コンポーネント全体をmemoで囲う
    export const App = () => {...};
    export const App = memo(() => {...}));
  • 前回のレンダリング時と Props が変更されている検知し、すべての Props が前回と同一であるなら再レンダリングをスキップ
    • 前回と同一であるかどうかを判定するためにObject.isが使われる

関数のメモ化 (useCallback)

  • コンポーネントをメモ化していても、propsで関数を渡しているとレンダリングの度にコンポーネントの処理時が実行されることにより関数が再生成され、再レンダリングされてしまう
  • useCallbackを使い関数のメモ化を行う

useCallback

  • const onClick = useCallback(() => {}, [])
  • 引数
    • 第1引数:関数
    • 第2引数:依存配列
      • 空の場合、最初に生成された関数が再利用される
      • 依存配列が変更されるたびに関数が再生成される

変数のメモ化 (useMemo)

  • 使用頻度はmemouseCallback程は高くない
    const num = useMemo(() => {}, [])
  • 引数
    • 第1引数:関数
    • 第2引数:依存配列
      • 空の場合、最初に生成された値が再利用される
      • 依存配列が変更されるたびに値が再計算される