在 React 里，若用 useCallback 包住依赖组件 state 的事件处理函数，却没有把这个 state 写进依赖数组，闭包就会一直拿着初始 state 值不放。结果看起来就像状态更新只成功了一次。

解决办法很直接：把函数真正依赖的 state 变量，比如 dark，明确加到 useCallback 的依赖数组里即可。

问题本质

在 React 中，若用 useCallback 包裹依赖组件 state 的事件处理函数，却未将其加入依赖数组，会导致闭包捕获初始 state 值，使状态更新仅生效一次。

修复方式是将所依赖的 state 变量（如 dark）显式添加到 useCallback 的依赖数组中。

问题的症结，其实就卡在 useCallback 的依赖机制上。

当依赖数组写成空（[]）时，这个回调函数只会在组件第一次渲染时创建一次，后面会一直复用。

同样被“定格”的，还有当时闭包里拿到的 dark。它会停留在初始值 true。

结果就是，!dark 每次算出来都始终是 false。于是 setDark(false) 会一遍遍执行，但状态并不会再从 false 切回去。

正确写法

正确写法是将 dark 加入依赖数组。

import React from 'react';
import { useState, useCallback } from 'react';

export default function App() {
const [dark, setDark] = useState(true);

//  正确：dark 作为依赖，确保每次 dark 变化时生成新函数
const toggleDark = useCallback(() => {
setDark(prev => !prev); // 推荐使用函数式更新，避免依赖外部变量
}, [dark]);

return (

{dark  'dark mode' : 'light mode'}

);
}

注意事项

• 优先使用函数式更新：setDark(prev => !prev) 比 setDark(!dark) 更健壮。它不依赖闭包中的 dark 值，即使 useCallback 依赖遗漏也不会出错。
• 依赖数组必须完整：只要回调内引用了响应式值（state、props、其他 hooks 返回值），就必须列入依赖项。否则将引发 stale closure（陈旧闭包）问题。
• 可选优化：若逻辑简单，也可直接省略 useCallback。现代 React 对简单内联函数的性能影响极小，过度优化反而会增加维护成本。

总结

useCallback 不是为了“让函数能多次执行”，而是为了控制何时重新创建函数。

它的依赖数组必须真实反映函数内部所读取的所有响应式值，否则将破坏 React 的响应性模型。

《夸克》非常好用的免费AI浏览器

下载APP查看