useMemoとか理解せずに実装している俺へ ― React最適化の落とし穴と正しい使いどころ

📝 TL;DR

• useMemo は値のキャッシュであり最適化の万能薬ではない
• 再計算よりメモ化のコストが高いと 逆にパフォーマンス低下する
• React.memo / useCallback とセットで理解することで 最適化の意図が一致する
• 「なんとなく遅そう」で入れる useMemo はだいたい不要
• 最適化は 計測 → 判断 → 実装 の順番が鉄則
• 未来の俺へ → useMemo は理解してから使うと最強。理解しないまま使うと事故る。

🎄 はじめに：未来の自分へのメッセージ

React や Next.js を使っていると、どこかで必ず出会うのが useMemo。
でも当時の自分は、正直ほとんど理解してなかった。

「なんか高速化できるっぽいから付けとくか」
「依存配列？とりあえず入れとけばよくない？」

こんなノリで実装していた時期が確実にある。
でもそれ、今振り返ると 一番危ない使い方 だった。

この記事は、そんな過去の自分に向けて、
「useMemo を正しく理解して、無駄な最適化を卒業するためのガイド」 としてまとめたもの。

同じように React のパフォーマンス最適化に悩んでる人にも届けば嬉しい。

🎁 Part 1: useMemo を誤解したまま使っていた理由

当時はこんなイメージを持ってた。

• useMemo はレンダリングを軽くする
• つければつけるほどアプリが高速になる
• map/filter あたりも全部 useMemo に包んでおけば安全
• React.memo とセットで使えばとりあえず良い

今考えると、どれも半分しか合ってない。

useMemo は 頻繁に発生する高コストな処理 をキャッシュするためのものであって、
「なんとなく重そう」に対して闇雲に使っても良い結果にはならない。

🎁 Part 2: useMemo の正体 — “値のキャッシュ装置”

useMemo は単純で、

「同じ入力なら同じ結果を返す処理」をキャッシュする機能

それだけ。
ただしキャッシュには当然コストがある。

✔️ 本当に使うべきケース

• 大量データのフィルタリング
• 重い計算処理（複雑な reduce など）
• 配列やオブジェクトを子コンポーネントに渡す時 identity を固定したい
• メモ化しないと React.memo が機能しない状態

❌ 不要なケース

• map/filter 程度の軽い処理
• 依存配列が毎回変わる（＝毎回再計算）
• ただの読みやすさ低下につながる場合
• 遅そうな気がする だけの勘

特に「依存配列が毎回変わる useMemo」は本当に意味がない。
実際よく見るアンチパターン。

🎁 Part 3: React.memo / useCallback / useMemo の関係を理解する

最適化は 意図が揃わないと効果が出ない。

これが正しい関係👇

React.memo（子の再レンダリングを抑えたい）
　↓
props の参照が毎回変わっていることに気付く
　↓
オブジェクト → useMemo で参照を固定  
関数 → useCallback で参照を固定

つまり useMemo/useCallback は
React.memo を成立させるための補助装置でもある。

全部セットで理解できると「なぜ最適化が効かないのか」が一気に腑に落ちる。

🎁 Part 4: よく見る“意味のない useMemo”を例にする

❌ 例：とりあえず map を包んでるパターン

const names = useMemo(() => items.map(i => i.name), [items]);

• items が毎回新しい配列として生成されるなら毎回再計算
• map 程度なら useMemo のコストのほうが高い

むしろマイナス。

✔️ 例：メモ化が実際に効くケース

const filtered = useMemo(
  () => hugeList.filter(item => item.category === category),
  [hugeList, category]
);

• hugeList がでかい
• filter がコスト高い
• 再計算を避けられるメリットが大きい

こういう勝算のある useMemo だけ使うべき。

🎁 Part 5: useMemo を使うか判断する基準

未来の俺へ。
迷ったらこの判断基準で決めろ。

① 計測して遅かったら使う
Profiler やログで確認する。体感で決めない。

② 依存配列が安定しているか
値が毎回変わるならメモ化は意味なし。

③ useMemo を使うことでコードが複雑化しないか
可読性が落ちるなら撤退したほうが良い。

🎁 Part 6: 未来の自分へのメッセージ

当時はよく分からず使ってたけど、今はこうして振り返れるようになった。
技術って、理解が深まった瞬間に「なんだ、そういうことか」って急に世界がクリアになる。

useMemo もまさにそれ。

理解して使うと強力。
理解せずに使うとノイズ。

React のパフォーマンス最適化は奥が深いけど、
判断基準ができたおかげでコードの質は確実に上がった。

未来の俺、もっといいコード書いてるはずだから期待してるぞ。

🎁 まとめ

React の useMemo は値のキャッシュ
Next.js でパフォーマンス最適化するなら使いどころを見極める
React.memo / useCallback と併用することで UI の無駄な再レンダリングを抑止
最適化は計測してから判断すること
なんとなく useMemo は不具合の温床