为什么即使state未变更，调用setState也会触发过多重渲染错误？

关于setState是否会无条件触发重渲染 #

正常情况下（更新触发时机在组件渲染流程结束后，例如事件回调、定时器、异步接口回调、useEffect回调内部），如果传入setState的新值与当前state通过Object.is对比结果为相等，React会直接跳过本次重渲染，不会执行组件函数。
只有当更新是组件同步渲染流程中触发的特殊场景下，React不会做全等校验，会强制触发重渲染。

第一段代码触发无限重渲染的原因 #

你写在组件顶层的setActive(false)属于渲染过程中同步执行的更新：

• 组件第一次执行的时候，同步调用setActive(false)
• React检测到渲染流程中存在state更新，会丢弃当前渲染结果，使用更新后的state重新执行组件函数
• 新一次组件执行又会同步调用setActive(false)，再次触发强制重渲染，就此进入无限循环
  哪怕你传入的新值和原有state值一致，只要是渲染期间同步触发的setState，都会触发重跑，所以才会出现无限渲染的问题。

第二段代码不会出现问题的原因 #

• 空依赖的useEffect仅会在组件首次挂载完成（整个渲染流程已经完全结束）后执行一次，只会注册一次setInterval
• setInterval的回调属于宏任务，永远在渲染流程结束后才会执行，不属于渲染期间的同步更新
• 第一次执行setActive(true)时，state从false变为true，会触发一次重渲染
• 后续setInterval每次调用setActive(true)时，当前active已经是true，新旧值全等，React会直接跳过重渲染，因此不会出现无限循环的问题

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