最終更新:2022-08-25 (木) 20:15:41 (609d)
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引数:依存配列
- 空の場合、最初に生成された値が再利用される
- 依存配列が変更されるたびに値が再計算される