为何同概念的两个forceUpdate Hook一个生效一个失效？

代码示例 #

export const App = ()=>{
    const forceUpdate1 = useForceUpdate1();
    const forceUpdate2 = useForceUpdate2();

    // ignore usage in effect. As both will be used exactly at same place still shows different result
    useEffect(() => {
        /// some logic
        forceUpdate1();  //not working
        // forceUpdate2();  //working
    },[])

    return <>...</>;

}

export const useForceUpdate1 = () => {
    const [counter, setCounter] = React.useState(1);
    return () => {
        setCounter(counter + 1);
    }
}

export const useForceUpdate2 = () => {
    const [_, forceUpdate] = useReducer((x) => x + 1, 0);
    return forceUpdate;
}

问题现象 #

• useForceUpdate1()无法触发组件重渲染
• useForceUpdate2()可正常触发组件重渲染

疑问：即便快速多次调用forceUpdate1只会让状态变更一次，单次调用也应该触发重渲染才对？

问题解答 #

1. 这是变量捕获导致的吗？ #

是的，核心原因就是闭包的变量捕获特性。

• useForceUpdate1返回的函数会捕获它被创建时的counter值，比如第一次渲染时counter=1，这个函数里的setCounter(counter+1)就固定为setCounter(2)；
• 如果这个函数在组件重渲染后被调用（比如被空依赖的useEffect闭包保存的旧函数实例），它依然会使用捕获到的旧counter值来更新状态。如果此时组件的counter已经是2，重复设置相同的值会被React忽略，不会触发重渲染；
• 哪怕是第一次调用，若后续再次调用同一个forceUpdate1实例，它还是会试图把counter设为2，同样不会触发重渲染。

而useForceUpdate2使用useReducer的方式，每次调用forceUpdate都会触发reducer执行x+1，这个计算是基于当前最新的状态值，不受闭包捕获的影响，所以每次调用都会生成新的状态，必然触发重渲染。

2. 未来如何避免此类困惑？ #

• 优先使用函数式更新：当状态更新依赖于之前的状态时，不要直接用闭包捕获的旧值，改用setState的函数形式。比如把useForceUpdate1修改为：

  export const useForceUpdate1 = () => {
      const [counter, setCounter] = React.useState(1);
      return () => {
          setCounter(prev => prev + 1); // 基于当前最新状态计算新值
      }
  }
  

  这样不管什么时候调用返回的函数，都会使用最新的状态值来更新，每次调用都能触发重渲染。
• 理解React闭包特性：组件每次重渲染都会生成新的函数实例，这些函数会捕获当前渲染周期的变量值。如果需要在异步操作或持久化回调中使用最新状态，要么用函数式更新，要么用useRef保存最新状态的引用。
• 统一forceUpdate实现：如果需要实现强制重渲染，优先选择useReducer的方式，逻辑简洁且不受闭包影响；若用useState，必须搭配函数式更新写法。

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