React中用相同值更新useState为何触发两次渲染？

问题原因分析 #

你遇到的现象和React的**严格模式（Strict Mode）**以及状态更新的优化机制直接相关：

• 状态变化时的严格模式行为：
  在开发环境中，React的严格模式会刻意重复执行组件函数、useEffect等逻辑，用来帮你排查代码里的潜在副作用。当你第一次点击Reset按钮，状态从3变为0时，触发了组件重新渲染，严格模式会让组件函数执行两次，所以控制台会输出两次RENDER。

• 相同状态值的更新优化：
  React内部用Object.is来对比新旧状态值。当你第二次及之后点击Reset按钮时，传入的新值0和当前状态值0完全相等，React会触发**渲染跳过（bailout）**机制，不再执行组件函数，因此控制台不会再打印RENDER。

验证方式 #

如果想确认是严格模式导致的，可以临时移除项目中index.js里的<StrictMode>标签，重新测试：

• 第一次点击Reset按钮，控制台只会输出一次RENDER（状态变化引发的正常渲染）
• 第二次点击Reset按钮，控制台不会有任何RENDER输出（相同状态值被React优化跳过）

额外说明 #

• 生产环境下，严格模式的重复渲染逻辑会被关闭，即使状态变化也只会渲染一次。
• 不管是否开启严格模式，只要新旧状态值通过Object.is判断相等，React都会跳过组件的重新渲染，这是React的核心性能优化手段。

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