多个useState更新执行顺序：为什么setPeople在事件处理函数退出后才执行？

这是React的自动批处理更新机制和函数式更新的执行逻辑共同导致的，核心原理如下：

• React 18及以上版本默认对所有事件回调中的状态更新开启自动批处理：所有setXxx调用不会立刻触发状态更新和重渲染，而是先把更新任务存入队列，等整个事件处理函数的所有同步代码执行完毕后，再统一处理所有攒下的更新。
• 你给setPeople传入的是函数式更新回调，这个回调不会在你调用setPeople的时刻立刻执行，而是React在真正处理people状态更新任务时，才会调用这个回调获取最新的状态快照来计算新值。

对应你的代码执行顺序拆解：

1. 触发handleSubmit后同步代码依次执行：打印before → 调用setPeople，把你传入的更新函数存入更新队列（不执行回调） → 打印after → 调用setFirstName、setEmail，二者的更新也存入队列 → 打印exiting handler，事件处理函数的所有同步代码执行完成，退出函数。
2. 此时React才开始处理队列中的所有更新任务，轮到处理people的更新时，才会执行你之前传入的更新回调，因此打印inside。

补充说明：不是setPeople本身调用时机晚于另外两个set方法，你调用三个状态更新方法的顺序是setPeople在前，只是它的更新回调需要等到React实际处理更新阶段才会执行，三个状态的更新是在同一个批处理流程中完成的。

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