React+MobX+Hooks场景下useState更新异常、回调获取旧值问题

问题核心根源：React渲染的闭包机制 #

每次组件触发重新渲染时，函数组件内的所有变量（包括状态、自定义回调函数）都会基于当前这一轮渲染的作用域重新生成。你在回调函数里引用的selected值，本质是生成这个回调的那次渲染留下的状态快照，不会跟着后续的状态更新自动指向最新值。
之前遇到的“useEffect能拿到最新selected，但回调里永远是旧值”的问题，根源就是回调函数被旧的渲染作用域缓存了：要么是组件状态更新后，回调没有在最新的渲染周期重新生成；要么是使用useCallback等Hook时依赖配置错误，缓存了早期渲染的回调实例，内部永远持有旧的状态引用。

两种setState写法的本质区别 #

• 直接传值的写法：setSelected(newValue)
  这种写法会把你传入的新值直接作为状态更新的最终结果。但这个写法本身无法绕开闭包的问题：你在调用setState之前读取的selected，仍然是当前闭包捕获的旧值，和React调度后真正更新的状态没有关联。
  对应到实际流程：删除接口请求成功后，你调用setSelected(serviceContext.nodeListArrayIds)更新选中值，但React的状态更新是异步调度的，不会立刻同步重渲染生成新的回调函数。如果用户在这个调度间隙快速触发勾选操作，拿到的还是上一轮渲染遗留的旧回调，里面读取的selected自然还是包含已删除服务的旧值。
• 函数式更新的写法：setSelected((prevState) => nextValue)
  这种写法传入的更新函数，会被存入React的状态更新队列，等到真正执行状态合并的时候，React会把队列中已计算完成的最新状态作为参数传入更新函数执行。整个流程完全绕开了组件闭包里捕获的旧状态引用，不管你的回调是哪一轮渲染生成的，拿到的永远是当前最新的状态值，不会被闭包的旧值污染。

改动能解决问题的原因 #

之前直接传值的setSelected写法，在重置选中状态的逻辑本身没有问题，但回调内的勾选逻辑是直接依赖闭包捕获的selected做计算——只要回调没有及时更新到最新的渲染作用域，就会永远读到旧值。
改成函数式setState后，勾选操作的增删逻辑不再依赖回调里捕获的selected变量，而是直接在React内部的更新逻辑中获取最新的前置状态做计算，哪怕回调还是旧的闭包引用，最终生成的状态更新结果也是正确的，不会出现旧值残留的问题。

补充说明：之前尝试搭配useMemo、useCallback始终没解决问题，通常是因为依赖项配置遗漏了selected，导致缓存的回调一直指向最早渲染的闭包作用域，哪怕组件多次重渲染，缓存的回调也不会更新，自然永远拿到旧的状态值。

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