• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React.memo

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)

• 使用頻度はmemoやuseCallback程は高くない

  const num = useMemo(() => {}, [])

• 引数
  • 第1引数:関数
  • 第2引数:依存配列
    • 空の場合、最初に生成された値が再利用される
    • 依存配列が変更されるたびに値が再計算される