为何连续更新两个useEffect依赖变量仅触发一次useEffect？

你遇到的情况是React的批量更新机制导致的，具体逻辑如下：

1. 批量更新的优化逻辑
   React为了减少不必要的渲染、提升性能，会在同步事件处理函数（比如你的update函数）里，把多次状态更新操作合并成一次重渲染。也就是说，你先后调用的setStep和setReviewElementId不会各自触发一次重渲染，而是等整个update函数执行完毕后，统一进行一次重渲染。

2. useEffect的执行时机
   useEffect是在组件每次重渲染完成后执行的。因为两次状态更新被合并成了一次重渲染，所以监听这两个状态的useEffect自然只会被调用一次，且此时step和reviewElementId都已经是更新后的新值。

3. 如何触发两次useEffect（可选）
   如果确实需要两次状态更新分别触发useEffect，可以绕开批量更新机制，把其中一次更新放到异步回调里，比如：

const update = () => {
    setStep(/* 新值 */);      
    setTimeout(() => {
        setReviewElementId(/* 新值 */);
    }, 0);
}

这样两次状态更新会触发两次独立的重渲染，对应的useEffect也会执行两次。

内容的提问来源于stack exchange，提问作者gene b.