本文详解 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 显式加入依赖数组：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
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 时，它必须出现在依赖数组中；而更健壮、更推荐的方式是改用函数式状态更新，从根本上消除依赖管理负担。
