本文详解 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，状态自然不会再变化。

正确写法

推荐做法：将状态更新改为函数式写法。

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

这种写法不直接读取外部的 dark，而是通过 prev 获取最新状态，因此可以安全使用空依赖数组。

另一种可行写法

如果保留原始逻辑，也可以补全依赖数组：

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

为什么函数式更新更推荐

• 不依赖外部变量：无需额外维护 dark 依赖。
• 规避闭包陷阱：不会因为缓存函数而读取旧状态。
• 在并发渲染中更可靠：状态更新逻辑更稳妥。

使用注意事项

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

总结

核心结论：useCallback 的重点不是“让函数变快”，而是“控制何时重建函数”。

当函数逻辑依赖于某个 state 或 prop 时，它必须出现在依赖数组中。

而更健壮、更推荐的方式，是改用函数式状态更新，从根本上消除依赖管理负担。