ReactのコードでuseMemoやuseCallbackを見かけると、「とりあえず付けておけば速くなる」と思ってしまうことがあります。AIにコードを書いてもらうと、こうしたフックが最初から多用されているケースもよく見かけます。本当に「付けるほど速くなる」のか、あえて疑ってみます（useEffectの依存配列の書き方が原因で無限ループにハマる話は以前扱いましたが、今回は依存配列そのものではなく、メモ化のコストの話です）。

そもそも何をしているフックなのか

// メモ化なし
const total = calculateTotal(items); // 再描画のたびに毎回計算

// メモ化あり
const total = useMemo(() => calculateTotal(items), [items]); // itemsが変わった時だけ計算

useMemoは「依存配列（[items]）の値が変わっていなければ、前回計算した結果をそのまま使い回す」仕組みです。重い計算を毎回やり直さずに済む、という点では確かに有効です。

「付けるほど速くなる」わけではない理由

ここで見落とされがちなのが、useMemo自体にも依存配列を比較するコストがかかっているという点です。

// 悪い例: 軽い計算にまでuseMemoを付ける
const doubled = useMemo(() => count * 2, [count]);

count * 2のような一瞬で終わる計算に対してuseMemoを使うと、「計算をスキップできて得をする量」よりも「依存配列を毎回比較するコスト」の方が上回ってしまうことがあります。つまり、軽い処理に対しては、メモ化しない方がむしろ速いケースがあるということです。

// 良い例: 軽い計算はそのまま
const doubled = count * 2;

どこで使うと効果が出るのか

useMemoが効果を発揮しやすいのは、次のような場面です。

  • 配列のソートやフィルタリングなど、要素数が多いと処理時間が伸びる計算
  • 子コンポーネントに渡すオブジェクト・配列の参照を固定して、不要な再描画を防ぎたい場合
  • APIから受け取った大量データの集計処理

逆に、単純な四則演算や文字列の結合程度であれば、メモ化のコストの方が高くつくことが多く、付けない方が素直で読みやすいコードになります。

AIに依頼するときの視点

AIに最適化を依頼すると、「念のため」で多くの箇所にuseMemoやuseCallbackを付けてくることがあります。ここで「なぜここに付けたのか」「この計算は重いと言えるか」を聞き返すと、本当に必要な箇所だけに絞られたコードが返ってきやすくなります。

「付いているかどうか」ではなく「その計算が本当に重いかどうか」で判断できるようになると、AIが返してきた最適化が妥当かどうかも、自分の目で見極められるようになります。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください