React useCallback — 関数のメモ化のタイミングと方法

useCallbackによる関数のメモ化

useCallbackは、依存関係が変更されたときのみ変わるメモ化されたバージョンの関数を返します。不要な再レンダリングを防ぐためのパフォーマンス最適化です。

解決する問題

Reactでは、毎レンダリングで新しい関数インスタンスが作成されます。React.memoでラップされた子コンポーネントに渡すと、関数参照が変わるため子が毎回再レンダリングされます。

useCallbackが実際に役立つとき

1. メモ化された子コンポーネント（React.memo）にコールバックを渡す場合
2. useEffect、useMemo、または別のuseCallbackで依存関係として使用される関数
3. コンシューマーがエフェクトの依存関係として使用する可能性のある関数を返すカスタムフック

useCallbackを使うべきでないとき

• 「念のため」にすべての関数に対して -- メモ化のオーバーヘッドが再レンダリングコストを超える場合がある
• 受け取るコンポーネントにReact.memoがない場合
• ネイティブDOM要素のイベントハンドラに対して
• 測定可能なパフォーマンス問題を引き起こさないインライン関数に対して

依存関係を回避する関数型更新

// countに依存する代わりに：
const increment = useCallback(() => {
  setCount(prev => prev + 1);
}, []); // 依存関係不要