React中同一更新操作下setState回调多次执行的原因？

问题场景 #

在React 18（关闭严格模式、启用自动批处理）环境下，当同时在useEffect和DOM事件回调中更新同一状态时，发现setState的函数式回调出现多次执行的异常情况。

代码示例 #

function App() {
  const [state, setState] = useState([]);
  const [state2, setState2] = useState(0);

  useEffect(() => {
    if (state2) {
      console.log("effect");
      setState(s => {
        console.log("effect setState", s);
        return [...s, "effect"];
      });
    }
  }, [state2]);

  return (
    <input
      onMouseDown={() => {
        setState2(1);
      }}
      onFocus={() => {
        console.log("focus");
        setState(s => {
          console.log("focus setState", s);
          return [...s, "focus"];
        });
      }}
    />
  );
}

日志差异 #

• 预期输出：

  effect
  focus
  effect setState []
  focus setState ['effect']
  

• 实际输出：

  effect
  focus
  focus setState []
  effect setState []
  focus setState ['effect']
  

问题原因 #

这是React 18中自动批处理与副作用同步更新交错导致的现象，具体时序如下：

1. 点击输入框后，onMouseDown触发setState2(1)，onFocus触发setState，两者被加入同一自动批处理队列。
2. React优先处理setState2(1)，触发组件重新渲染，随后执行依赖state2的useEffect。
3. useEffect中的setState属于渲染完成后的副作用更新，不在自动批处理范围内，会立即触发状态计算与重新渲染。
4. 此时原批处理队列中onFocus的setState尚未完成处理，React会重新执行其函数式回调，基于最新的状态（已被useEffect更新后的['effect']）重新计算，以保证最终状态的一致性。

这并非并发模式直接导致的问题，而是自动批处理与副作用更新的交互逻辑。即使关闭严格模式，函数式setState的回调也可能在这种交错场景下被多次调用——React的设计逻辑是确保状态最终正确，而函数式回调本身要求是纯函数，多次执行不应影响最终结果。

解决方案 #

如果需要避免回调多次执行（比如回调包含非纯逻辑），可以采用以下方案：

1. 强制批处理副作用中的更新：使用unstable_batchedUpdates将useEffect中的更新加入批处理，避免同步更新打断原批处理流程：

   import { unstable_batchedUpdates } from 'react-dom';
   
   useEffect(() => {
     if (state2) {
       console.log("effect");
       unstable_batchedUpdates(() => {
         setState(s => {
           console.log("effect setState", s);
           return [...s, "effect"];
         });
       });
     }
   }, [state2]);
   

2. 保证回调纯函数性：确保setState的函数式回调仅依赖传入的状态参数，不包含外部可变状态或副作用（比如将日志逻辑移到useEffect或其他独立位置）。

使用unstable_batchedUpdates后，日志输出将符合预期。

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