useMemo と useCallback の違いと使い分け

React でパフォーマンス最適化を行う際によく使われるフックが useMemo と useCallback です。
どちらも「再計算・再生成を防ぐ」ことが目的ですが、使い方と用途には明確な違いがあります。

🧠 結論から言うと…

🧮 useMemo の使い方（値のキャッシュ）

const expensiveValue = useMemo(() => {
  return heavyCalculation(input)
}, [input])

• inputが変わらない限り、再計算されない
• DOMレンダリングとは無関係な「値の再生成」を抑えたいときに便利

🧩 useCallback の使い方（関数のキャッシュ）

const handleClick = useCallback(() => {
  console.log('clicked')
}, [])

• 新しい関数インスタンスの生成を防ぐ
• React.memo を使った子コンポーネントに関数を渡すときに再レンダリングを防げる

🎯 使い分けの判断フロー

• 「関数」をメモ化したい？ → useCallback
• 「値」をメモ化したい？ → useMemo
• パフォーマンスに影響する処理か？ → ✅使う / ❌使わない（早期最適化は不要）

🧪 注意点

• 両方とも「依存配列（第二引数）」を正確に設定しないとバグや再実行漏れの原因に
• 安易な多用は逆にパフォーマンスを悪化させることもある
• 最適化が本当に必要な場面かどうか、まずReact DevToolsなどで測定を

✅ まとめ

🔗 参考リンク

• React公式 useMemo
• React公式 useCallback