React における useCallback の依存関係と古いステートの罠

React では、関数を useCallback でメモ化することで、無駄な再生成を防ぎ、パフォーマンスの最適化を行うことができます。しかし、依存配列を適切に指定しないと「古いステートを持ち続ける」という予期せぬ挙動を引き起こすことがあります。

---

🔁 問題の例

以下のコードを見てください：

const Component = () => {
  const [count, setCount] = useState(0);

  const funcA = useCallback(() => {
    console.log('count in funcA:', count);
  }, [count]); // ✅ count に依存している

  const funcB = useCallback(() => {
    funcA(); // 古い funcA が使われる可能性
  }, []); // ⚠️ funcA を依存配列に含めていない

  return (
    <div>
      <button onClick={funcB}>Click</button>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
};

このコードでは以下の問題が起きます。

• funcA は count に依存しており、count が更新されるたびに新しい関数になります。
• しかし funcB は依存配列が空なので、一度生成された funcA をそのまま使い続けます。
• その結果、funcB の中で使われる funcA は 古いステート（count）にバインドされたまま になります。

---

✅ 要点まとめ

項目	状況	結果
funcA に count を依存登録	✅ 正しい
funcB に funcA を依存登録しない	⚠️ 古い funcA を呼び続ける

関数Bの中で使っている関数Aが新しくなっていても、関数Bが古いAを保持している場合、最新の状態を取得できない。

これは React のクロージャの性質と useCallback の依存配列の指定方法に由来するものです。

---

🛠 対策

1. funcB の依存配列に funcA を追加する

const funcB = useCallback(() => {
  funcA();
}, [funcA]); // ✅ funcA が更新されるたびに funcB も再生成

2. そもそも useCallback を使わない

パフォーマンスの最適化が不要な場合、useCallback を使わずにそのまま関数を定義しても問題ないケースも多いです。

---

💡 まとめ

• useCallback を使うときは 依存配列が命。
• 呼び出す関数を依存配列に入れ忘れると、古いバージョンの関数を使い続けることになる。
• useCallback による最適化は便利ですが、クロージャによる副作用に注意が必要です。