React 中 useCallback 依赖项缺失导致状态切换失效的解决方案

本文详解 React 中因 useCallback 依赖数组遗漏状态变量，导致 useState 切换函数仅执行一次的问题，并提供正确写法、原理分析与最佳实践。

本文详解 React 中因 `useCallback` 依赖数组遗漏状态变量，导致 `useState` 切换函数仅执行一次的问题，并提供正确写法、原理分析与最佳实践。

在 React 函数组件里，useCallback 的作用，说白了就是把函数引用稳住，尽量减少子组件那些没必要的重复渲染。不过，一旦依赖数组（也就是第二个参数）漏掉了函数内部真正用到的响应式值，比如 state 变量，就很容易踩进“闭包陷阱”：函数拿到的始终是初次渲染时那份旧值，而不是最新状态。

以你的代码为例：

const [dark, setDark] = useState(true);

const toggleDark = useCallback(() => {
setDark(!dark); // ❌ 这里读取的是初始的 dark（true），且永远不变
}, []); // ⚠️ 空依赖数组导致函数被永久缓存

第一次点击时，!dark 实际上会被算成 !true → false，于是状态切到了 light mode；可问题在于，toggleDark 这个函数本身并没有被重新创建，它内部闭包里拿着的依然是 dark = true。结果就是，后面每次点击都会重复执行 setDark(!true) → false，状态自然也就不会再变了。

✅ 正确做法是将 dark 显式加入依赖数组：

const toggleDark = useCallback(() => {
setDark(prev => !prev); // ✅ 推荐：使用函数式更新，无需依赖 dark
}, []); // 此时可安全省略 dark —— 因为 prev 自动获取最新值

或保留原始逻辑，但补全依赖：

const toggleDark = useCallback(() => {
setDark(!dark); // ✅ 仍可用，但必须声明依赖
}, [dark]); // ✅ 必须包含 dark

⚠️ 注意事项：

• 优先使用函数式更新（setDark(prev => !prev)）：它不依赖外部变量，天然规避依赖问题，且在并发渲染中更可靠；
• 启用 ESLint 插件（如 eslint-plugin-react-hooks）：它会自动检测缺失依赖并报错，强烈建议集成到开发流程；
• 不要盲目添加所有变量到依赖数组：可能引发频繁重创建，应结合业务逻辑权衡；对 setState 的函数式更新方式，通常只需空依赖数组。

总结：useCallback 的核心不是“让函数变快”，而是“控制何时重建函数”。当函数逻辑依赖于某个 state 或 prop 时，它必须出现在依赖数组中；而更健壮、更推荐的方式是改用函数式状态更新，从根本上消除依赖管理负担。