React函数组件设置相同状态为何仍触发重渲染？

你遇到的问题核心其实是React批量更新的状态处理逻辑，还有重渲染的触发条件，具体拆解如下：

• 直接值更新和函数式更新的区别：
  当你调用setValue(0)时，React会直接对比新值和当前状态（都是0），发现严格相等，直接跳过这次更新，组件也不会重渲染。但调用setValue((prev) => prev + 1)时，React没法提前知道这个函数会返回啥，必须执行它才能得到新状态1。这时候状态从0变成1，React就已经标记组件需要重渲染了。

• 批量更新里的状态变化流程：
  点击事件属于React的批量更新场景，React会按顺序执行所有状态更新：先执行函数式更新把状态改成1，这时候已经触发了重渲染标记；再执行setValue(0)把状态改回0。虽然两次更新会合并成一次重渲染，但因为中间确实有过状态变化，React还是会执行这次重渲染，所以OUTSIDE useEffect会被打印。

• 为啥注释函数式更新就正常了？
  只留setValue(0)的话，React一看新值和当前状态一样，直接跳过更新，自然不会触发重渲染，日志也就不会打出来。

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