useCallback中反转布尔状态时关联useCallback获取旧值异常

你碰到的是React闭包捕获陈旧值的经典问题：

• 所有通过useCallback创建的函数，都会固定捕获它被创建时所处渲染周期里的变量值。哪怕后续状态更新触发组件重渲染，只要这个函数实例没有被替换，它内部引用的forceProxy就永远是创建那一刻的旧值。
• 你虽然给selected加了forceProxy作为依赖，正常情况下forceProxy变化时selected会被重新创建、拿到新值，但如果下游接收selected的VideoItem做了渲染优化（比如被React.memo包裹、或是内部把传入的onSelect绑定在了无依赖的useCallback/useEffect里），就会一直持有绑定了旧forceProxy的回调实例，触发时自然读不到最新值。
• 你当前写的setForceProxy(!forceProxy)本身就有隐患：这是基于闭包里的旧值计算新状态的写法，连续触发时很容易出现状态更新不符合预期的问题。

• 改造状态切换逻辑，从源头避免闭包拿旧值
  把invertProxy里的状态更新改成React提供的函数式写法：

  const invertProxy = useCallback(() => {
    setForceProxy(prevState => !prevState)
  }, [])
  

  因为setForceProxy是React自带的稳定引用，这个回调的依赖可以清空，永远不会被重新创建，也不会闭包捕获旧的forceProxy值。
• 用Ref打通最新状态的读取通道，彻底绕开闭包限制
  额外声明一个ref用来实时存储最新的forceProxy值，所有回调读这个ref就能拿到永远最新的状态，不需要跟着状态变化重新创建回调：

  // 声明ref，初始值和forceProxy保持一致
  const forceProxyRef = useRef(forceProxy)
  // 每次组件渲染时，同步最新的forceProxy到ref上
  forceProxyRef.current = forceProxy
  

  改造selected回调：

  const selected = useCallback((video: VideoInfo) => {
    // 直接从ref里取最新值，不读闭包内的旧变量
    onSelect(video, forceProxyRef.current)
  }, [onSelect])
  

  这种写法可以完全杜绝“回调实例因为各种原因没被替换、内部拿旧值”的问题，无论回调什么时候被触发，读的都是当前最新的forceProxy值。
• 检查下游VideoItem的实现逻辑
  如果VideoItem内部把传入的onSelect存在了空依赖的useCallback、或组件初始化时就绑定了事件，哪怕父组件传了新的onSelect，它内部触发的还是第一次拿到的旧回调。需要确保VideoItem在处理选择事件时直接读取渲染时拿到的最新props，不要提前把props闭包绑定到非响应式逻辑里。

• 写useCallback的时候不要为了凑稳定引用，就故意把用到的响应式变量从依赖数组里删掉，这是90%闭包拿旧值问题的来源。
• 涉及布尔值切换这类状态变更的场景，优先用函数式更新写法，比基于闭包值计算新状态可靠得多。

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