为何设置相同值时函数组件仍重渲染？过多重渲染错误解析

我了解函数组件会通过Object.is方法进行检查，当结果为true时不会触发重渲染，那为何会出现此错误？

问题根源 #

核心原因是组件渲染过程中直接触发了状态更新，导致无限渲染循环。

拿你的示例逻辑来说，要是组件顶层直接写了setCount(count + 1)这类代码：每次组件渲染时这段代码都会执行，触发状态更新；状态更新又会促使React重新渲染组件，如此循环往复根本停不下来，最终触发“过多重渲染”的报错。

你提到的Object.is检查，是React用来判断新旧状态/ props是否一致、从而决定是否跳过DOM更新的逻辑，但它管不了“是否触发重渲染”的发起动作——哪怕Object.is判断新旧状态完全相同，只要你发起了状态更新请求，React还是会执行一次渲染流程（只是最后跳过DOM变更）。但如果是无限发起更新请求，这个循环就会一直跑，直到触发报错。

常见触发场景 #

• 组件顶层代码直接调用状态更新函数
• useEffect没有设置正确的依赖项，且内部的状态更新没有终止条件
• 自定义Hook内部逻辑有问题，导致每次组件渲染都会触发状态更新

解决办法 #

• 把状态更新逻辑放到事件回调（比如按钮点击、表单提交）、有明确依赖项的useEffect里，或者其他只会在特定时机执行的逻辑中，别放在组件顶层的渲染流程里
• 如果必须在渲染时判断是否更新状态，一定要加条件判断，确保只有当状态真的需要改变时才调用更新函数，避免无意义的更新触发循环

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