useMemo / useCallback

なぜ学ぶか： AIは「最適化」と称してuseMemoをあちこちに振りかけることがあります。でも多くは不要で、むしろ読みにくくします。「何を節約しているか」が分かると、「このuseMemoは要る？」というレビューができます。

まずはこの例を見てみましょう

// useMemo = 「計算結果の使い回し」
const filtered = useMemo(
  () => products.filter((p) => p.includes(keyword)), // 重い計算（のつもり）
  [products, keyword], // ← この2つが変わらない限り、前回の結果を使い回す
);

「依存（末尾の配列）が変わらない限り、再計算しない」仕組み。ただし軽い計算に付けても意味がありません。