React中为什么setTimeout调用setState不会触发最大更新深度超限错误

为什么最初的写法会触发无限重渲染 #

• 你使用的useEffect没有传入第二个依赖数组参数，这意味着这个effect会在每一次组件渲染完成后都会执行
• 你在effect中同步调用forceUpdate，这个方法会修改state触发组件重渲染，重渲染完成后又会再次执行effect、调用forceUpdate，形成无限循环，直接触发React的最大更新深度保护机制，抛出警告。

为什么加了setTimeout之后问题解决 #

这和浏览器的事件循环机制、React的更新调度逻辑有关：

• setTimeout(callback, 0)会把回调函数推到宏任务队列末尾，要等当前所有同步任务（包括本次组件渲染的全流程、当前effect的同步执行、React的同步更新调度）全部执行完成后才会执行回调
• 每次组件触发重渲染前，都会先执行上一次effect返回的清理函数，你在清理函数中调用了clearTimeout(timeout)，上一次渲染调度的还没执行的forceUpdate会被直接清除，不会累积多个更新任务
• 这种写法把forceUpdate的调用和当前的渲染流程拆成了两个独立的事件循环任务，不会形成同步的无限更新链路，也就不会触发最大更新深度超限的警告。

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