如何调试React "Warning: Maximum update depth exceeded"警告

零依赖手动定位法 #

不需要安装任何工具、插件，直接通过依赖前后值对比就能精准定位触发源，是生产/开发环境都通用的方案：

• 借助useRef存储上一轮渲染时的所有依赖项副本
• 每次useEffect回调执行时，逐位对比当前依赖和ref中存储的上一轮依赖，通过浅比较找出值/引用发生变化的项
• 直接输出变化项的索引、旧值、新值，就是本次触发effect执行的直接原因
  可以直接抽成可复用的自定义hook，替换原生useEffect使用：

import { useEffect, useRef } from 'react';

function useTrackEffectTrigger(effectCallback, deps) {
  const prevDepsRef = useRef(deps);
  useEffect(() => {
    const changedEntries = deps.reduce((result, currDep, idx) => {
      if (currDep !== prevDepsRef.current[idx]) {
        result.push({
          depIndex: idx,
          previousValue: prevDepsRef.current[idx],
          currentValue: currDep
        });
      }
      return result;
    }, []);

    if (changedEntries.length) {
      console.log('useEffect触发原因：以下依赖项发生变更', changedEntries);
    } else {
      console.log('useEffect触发原因：无依赖变更，属于首次挂载/严格模式双调用/热更新场景');
    }

    const cleanupFn = effectCallback();
    prevDepsRef.current = deps;
    return cleanupFn;
  }, deps);
}

使用方式和原生useEffect完全一致，直接替换即可，不需要改动原有业务逻辑。

高频特殊场景排查 #

如果对比后发现没有依赖发生变更，但effect仍然循环执行，优先排查以下高频问题：

• 依赖数组中传入了每次渲染都会生成新引用的非原始值：包括行内定义的对象、数组、未经过useCallback包裹的普通函数。这类值即使内容完全一致，每次渲染的引用地址不同，浅对比会判定为依赖变化，反复触发effect。
• React 18+严格模式的开发环境校验：严格模式下组件首次挂载时会主动执行两次effect挂载、清理流程，用来检测不规范的副作用写法，该行为仅在开发环境出现，不会触发生产环境的无限循环。
• effect内的setState逻辑缺少前置判断：比如数据请求完成后直接赋值state，没有判断组件是否已卸载、或者当前state值和待设置值是否完全一致，也会触发重复渲染。

React DevTools辅助排查 #

• 打开React开发者工具设置，勾选「渲染时高亮更新」选项，可以直观看到哪些组件在持续重复渲染，快速缩小问题范围
• 选中目标组件后，右侧组件面板会实时展示当前所有state、props的最新值，配合console打印的依赖变更记录，可以快速定位修改对应状态的代码位置。

注意：不要为了消除警告直接删除依赖项、或者给effect的依赖校验规则加eslint禁用注释，绝大多数无限循环问题的本质是依赖传入了不稳定引用、或者副作用逻辑缺少终止判断，绕开校验只会把隐患带到生产环境。

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