React应用突然无限加载的原因排查与解决求助

• 无限重渲染循环：useEffect依赖项设置错误是重灾区——比如依赖了每次渲染都会生成新引用的对象/数组，或者漏加必要依赖导致反复触发副作用；另外，直接在组件渲染逻辑里调用setState也会立刻触发新一轮渲染，形成循环。
• 异步请求状态未正确收尾：如果数据请求超时、接口报错但未捕获异常，或者请求响应后没有正确将isLoading这类状态切换为false，页面会一直停留在加载状态。还有可能是响应数据格式不符合预期，导致状态更新逻辑执行失败，加载状态无法解除。
• 路由与状态管理的循环触发：路由守卫中错误地触发页面跳转、状态管理（如Redux）的reducer或中间件里不合理地触发状态更新，都会导致应用反复执行跳转/重置逻辑，陷入无限加载。
• 递归渲染无终止条件：组件在渲染过程中递归调用自身，且没有设置终止判断，会导致组件无限创建、渲染，拖垮页面并持续显示加载状态。
• 遗留状态或缓存干扰：即使注释了新增代码，浏览器缓存的旧代码、本地存储中残留的异常状态，甚至React DevTools里的缓存状态都可能让应用保持异常。可以尝试清除浏览器缓存、清空本地存储，或者重启开发服务器排查。
• 第三方依赖异常：引入的第三方库（如UI组件、请求工具）存在bug，或者版本不兼容，可能在加载或运行时陷入无限计算，导致应用卡住。比如某些动画库、图表库在处理特定数据时会出现死循环。

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