为何React中设置useState为当前值仍会触发重渲染？

核心原因 #

React的useState更新函数（比如这里的set_ready），默认不会自动判断新值是否和当前状态相等——哪怕你传入的新值和当前状态完全一样，它依然会触发组件重渲染流程。

原代码无限循环的逻辑拆解 #

看你的初始代码：

const [ready, set_ready] = useState(false);

...

if (condition === true) {
  set_ready(true);
}

1. 组件首次渲染，ready是false，如果condition为true，调用set_ready(true)，触发重渲染；
2. 重渲染时，ready已经是true，但只要condition还是true，代码依然会执行set_ready(true)；
3. 每一次set_ready调用都会触发新的重渲染，如此往复就形成了无限循环。

修复代码的作用 #

修改后的代码加了&& !ready的判断：

if (condition === true && !ready) {
  set_ready(true);
}

当ready已经是true时，这个条件不再成立，不会调用set_ready，自然也就不会触发额外的重渲染，循环被打断。

补充：React的重渲染细节 #

需要注意的是，即使调用set_ready传入当前值，React虽然会触发组件渲染函数执行，但在后续的虚拟DOM diff阶段，如果发现组件输出和上一次完全一致，会跳过真实DOM的更新——但渲染函数本身还是会跑一遍，这在性能敏感的场景下可能还是有损耗。

额外优化方案 #

如果想彻底避免这类不必要的重渲染，可以：

• 保持你现在的手动判断逻辑，只在值真正变化时调用状态更新函数；
• 用React.memo包裹组件，它会对组件的props做浅比较，只有props变化时才触发重渲染；
• 对于复杂状态类型（比如对象、数组），可以考虑使用useReducer来更精准地控制更新时机。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture