useCallback

公式ドキュメント ↗

const handleClick = useCallback(() => setCount((c) => c + 1), []); // 関数を使い回す
<MemoButton onClick={handleClick} />;

依存配列を書き忘れると、古い値のまま止まる

const logStale = useCallback(() => log(count), []); // countの変化を無視 → 古い値のまま
const logFresh = useCallback(() => log(count), [count]); // countが変わるたびに新しい関数を生成

countをいくつか増やしてから両方の「0.8秒後に記録」を押すと、左はずっと0を記録し、右はその時点の値を記録する。useCallbackも依存配列に「使っている値」を正しく書かないと、useEffectと同じように古い値を覚えたままの関数（クロージャ）になってしまう。

今はReact Compilerが肩代わりしてくれることも多い

このHooked.自体、next.config.tsで reactCompiler: true にしてビルドされている。React Compilerは、コードを自動で解析して、必要な部分だけを賢くメモ化してくれるツール。「useCallbackで関数を固定する」というテクニックも、有効な環境では多くの場合コンパイラが自動でやってくれるため、手書きのuseCallbackは以前ほど必須ではなくなっている。

// next.config.ts
const nextConfig: NextConfig = {
  reactCompiler: true, // このプロジェクトは既に有効
};

React Compilerがある前提だと、useCallbackを手で書く場面は「コンパイラが安全に推論できない特殊なケース」や「仕組みを理解するための学習」に絞られていく。とはいえ挙動を知っておくと、コンパイラが何を肩代わりしてくれているのかが分かるようになる。