最終更新:2022-08-25 (木) 20:15:41 (609d)  

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

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

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

  • propsに変更がない限り再レンダリングされなくなる
  • 関数コンポーネント全体をmemoで囲う 
    export const App = () => {...};
export const App = memo(() => {...}));
↑

関数のメモ化 (useCallback)

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

useCallback 

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

変数のメモ化 (useMemo)

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



検索：