UseCallback 依赖props缓存取旧值导致输入状态被覆盖的问题咨询

你遇到的是React开发里最常见的闭包陷阱，这不是useCallback出了bug，是对它的缓存逻辑和JavaScript闭包规则的认知错位：

• 每一次组件重渲染，React都会生成一份独立的渲染快照，快照里包含这一轮传入的props、组件内定义的所有变量、以及所有函数的绑定关系。
• useCallback的缓存规则非常直白：对比传入的依赖数组，值没变化就保留上一次渲染创建的函数实例，值变了就基于当前轮的快照重新创建函数。
• 按照JS的闭包规则，任何函数内部引用的外部变量，永远是它被创建那一刻词法作用域里的值。也就是说，被useCallback缓存下来的函数，会永久绑定它创建时那一轮渲染的变量快照，只要这个函数实例没被替换，它就完全感知不到后续渲染的变量更新。

你观察到的日志错位、旧值覆盖问题，完全符合上面的运行规则：

• 组件顶层写的console.log('1 here is data with updated name', data)是每轮渲染时直接执行的，天然能拿到当前轮最新的data值，所以你看到它的输出是正确的——这行代码的输出和两个回调函数的执行完全没有时序绑定，只是恰好打印结果容易让你误以为是回调内部的日志。
• 触发第二个输入框逻辑的handleChangeSomeProp，是在早期某一轮渲染（也就是data还没更新、name为空值的那次渲染）时被创建的。这个函数实例被useCallback缓存后一直没有被新实例替换，所以它内部引用的data永远是创建时的空值快照。当你输入内容时，它基于这个旧空值做对象扩展，自然会把之前更新好的name字段覆盖掉。
• 不用疑惑为什么依赖已经写了[data]还会拿到旧值：只要事件触发时调用的还是上一轮渲染遗留的缓存函数，它就一定会带着当时的旧值快照，哪怕你这一轮已经重新创建了新的函数实例。

• 改用函数式更新逻辑，消除对外部快照的依赖
  不要在回调里直接引用外层的data变量，把传给onUpdate的更新逻辑改成函数形式，让更新方法直接从父组件拿到最新的state值。比如把第二个回调里的更新逻辑改成onUpdate(prevData => ({ ...prevData, anotherProp: anotherProp }))，这样不管缓存的是哪个版本的回调，执行时拿到的永远是最新的state，不会被旧闭包困住。
• 用ref存储实时最新值，绕开闭包绑定限制
  在组件顶层维护一个和data保持同步的ref：

  const dataRef = useRef(data);
  useEffect(() => {
    dataRef.current = data;
  }, [data]);
  

  之后两个useCallback内部所有引用data的地方，都改成读取dataRef.current。因为ref的current属性是可变的、不会绑定某一轮的渲染快照，哪怕回调是几个版本之前缓存的，读取到的永远是最新的data值。
• 逐行检查useCallback的依赖数组完整性
  很多旧值问题的来源是漏写依赖：只要你在回调内部引用了任何外层的props、state、组件内定义的变量，就必须把它完整写到useCallback的依赖数组里。如果漏写依赖，useCallback会一直保留旧的函数实例，永远引用第一次渲染的旧值，哪怕外层变量已经更新。

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