React setState以60Hz触发导致Chrome崩溃问题排查

代码核心问题 #

• 定时器任务堆积：你的代码通过setTimeout递归调用onClick，即便有停止机制，若未正确保存并清理定时器ID（调用clearTimeout），会导致大量未处理的宏任务堆积在浏览器任务队列中。主线程被持续占用，无法处理用户交互、页面渲染等核心任务，最终因资源耗尽引发崩溃。
• 高频重渲染的累积开销：每次调用setCounter都会触发组件重渲染，20ms一次的更新频率（约50次/秒）会让React反复执行组件函数、进行虚拟DOM对比、更新真实DOM。1000次更新后，CPU和内存的持续消耗会超出浏览器承载能力，Chrome渲染进程会因长期高负载出现黑屏崩溃。

关于60Hz重绘的问题 #

浏览器默认刷新频率为60Hz（约16.6ms/帧），如果React组件的更新频率接近或超过这个值，且每次更新都伴随DOM操作，会导致主线程在每帧都被占满，无法完成绘制、输入响应等必要工作。你的代码更新频率（20ms/次）接近60Hz，持续1000次后，浏览器渲染进程会因无法及时处理所有任务而卡顿，最终崩溃。

优化建议 #

• 改用requestAnimationFrame：它会与浏览器刷新周期同步，避免不必要的更新，减少主线程压力，比setTimeout更适合高频UI更新场景。
• 严格清理任务句柄：保存setTimeout或requestAnimationFrame返回的ID，在停止机制触发时调用clearTimeout或cancelAnimationFrame，彻底终止后续任务。
• 减少不必要的重渲染：如果不需要实时显示每一次计数，可以用useRef保存计数器值，每隔若干次更新再调用setState触发渲染；或者利用React的批量更新机制合并状态更新。

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