メモ化 (useMemo, useCallback)

Reactは「変化があったら再描画する」ライブラリですが、時には「変化がないなら再計算しない」ように指示する必要があります。

useMemo：値のメモ化

重い計算結果を、依存配列が変化しない限り再利用します。

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

useCallback：関数のメモ化

関数自体の定義を保存します。これは、子コンポーネントに React.memo を使って不要な再描画を防ぎたい場合に必須となります。

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

注意点：乱用は禁物

メモ化自体にもオーバーヘッドがあります。

• 依存配列の比較コストがかかる。
• コードが読みづらくなる。

「計測（Profilers）をして、本当に必要な場所だけに適用する」 のが、エンジニアとしての正しい姿勢です。