React/NextJS钩子抛出错误时为何触发无限重渲染？

问题背景 #

有开发者在使用Next.js 12 + React 17.0.2的项目中遇到了严重问题：当组件挂载阶段的副作用（如监听Service Worker、Socket事件）抛出未捕获错误时，会触发无限重渲染，导致服务器被重复API请求持续冲击。

开发者编写了一个模拟挂载后执行一次的自定义Hook：

import { EffectCallback, useEffect } from 'react';

/**
 * 仅在首次渲染完成后执行一次
 */
export default function useDidMountEffect(func: EffectCallback): void {
    useEffect(() => {
        return func();
    }, []);
}

在_app.tsx中使用时，针对不支持Service Worker的浏览器出现了无限重渲染：

useDidMountEffect(() => {
    window.navigator && navigator.serviceWorker.addEventListener('message', (event) => console.log(event));
});

对应的报错信息：

TypeError: undefined is not an object (evaluating 'navigator.serviceWorker.addEventListener')

核心疑问 #

为什么Hook的副作用抛出错误会触发无限重渲染？React/Next.js为何不仅展示一次错误就停止，反而进入循环？

复现步骤 #

1. 依赖版本：

"next": "12",
"react": "^17.0.2",

2. 修改_app.tsx中的代码：

// 其他代码
useDidMountEffect(() => {
    window.notexistent.addEventListener('ok', () => { console.log('永远不会执行，SPA会无限重渲染并持续发起请求')});
});
// 其他代码

3. 执行yarn build构建生产包，再通过yarn start启动服务器（开发模式不会触发此问题）。
4. 现象：页面持续重渲染（非浏览器刷新），网络请求仅显示logo.png，常规监控难以发现异常。

原因分析 #

在React生产环境中，当组件的副作用（useEffect）执行时抛出未捕获错误，React会判定组件处于不可用状态，进而尝试卸载并重新挂载组件，期望能恢复正常运行。但如果错误的触发条件在每次挂载时都存在（比如访问不存在的对象属性），就会形成「报错→卸载→重新挂载→再次报错」的无限循环，导致组件反复渲染，连带触发所有挂载阶段的逻辑（包括API请求）。

Next.js 12在生产环境中并未为_app.tsx默认添加全局错误边界，因此未捕获的副作用错误会直接触发React的重试机制，最终引发无限重渲染。

修复方案 #

方案1：确保副作用逻辑无未捕获错误 #

通过存在性校验避免访问不存在的对象：

useDidMountEffect(() => {
    registerServiceWorker();
    window.navigator &&
        'serviceWorker' in navigator &&
        navigator.serviceWorker.addEventListener('message', listenForSwMessages);
});

方案2：添加全局错误边界 #

在_app.tsx中实现自定义错误边界，捕获全局未处理错误，阻止组件进入无限重渲染循环：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>页面出错，请稍后重试。</h1>;
    }

    return this.props.children;
  }
}

function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

export default MyApp;

关于设计脆弱性的思考 #

React的这种重试机制在特定场景下确实存在隐患：一旦副作用中出现未预见的错误，就可能引发资源耗尽甚至服务器被冲击的问题。理想情况下，框架应该对这类不可恢复的错误设置重试次数上限，或者直接展示错误页面而非无限重试，降低系统的脆弱性。

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