React中useCallback内setState未按预期生效问题

核心问题是useCallback的依赖数组配置错误，触发了**陈旧闭包（Stale Closure）**问题：

• useCallback会缓存传入的函数实例，仅当依赖数组内的变量引用变化时，才会重新创建函数、捕获当前作用域下的最新变量值。
• 你的代码中依赖数组仅传入了setSlimSideBar，而useState返回的setter方法是React保证的稳定引用，组件全生命周期内都不会变化，因此这个被包裹的toggle函数只会在组件首次挂载时创建一次，永久捕获首次渲染时slimSideBar的初始值true。
• 普通写法的箭头函数没有缓存逻辑，每次组件重渲染都会重新创建，天然能捕获当前渲染轮次的最新slimSideBar值，因此能正常工作。

你观察到的“状态未按预期更新”本质不是setSlimSideBar没有执行，而是闭包中保存的slimSideBar永远是初始值true，每次调用实际执行的都是setSlimSideBar(false)，React接收到相同状态值会跳过重渲染，看起来就像功能失效。

方案1：补全依赖数组 #

将状态值slimSideBar加入依赖数组，每次状态变化时重新生成缓存的函数，捕获最新值：

const toggle = React.useCallback(() => {
  console.log(slimSideBar)
  console.log(!slimSideBar)
  setSlimSideBar(!slimSideBar)
}, [slimSideBar, setSlimSideBar])

方案2：使用函数式状态更新（推荐） #

不需要依赖外部闭包的状态值，利用setter的函数式更新语法，直接从React内部获取最新状态，既解决闭包问题，又能保持toggle函数的引用稳定，最大化useCallback的缓存价值：

const toggle = React.useCallback(() => {
  setSlimSideBar(prevState => !prevState)
}, [setSlimSideBar])

内容的提问来源于stack exchange，提问作者Sankeerthan Kasilingam