React useEffect依赖数组写错导致无限循环的排查

React 组件在运行时陷入无限渲染循环，通常表现为浏览器标签页卡死、CPU 飙升或控制台日志疯狂滚动。这种现象绝大多数情况下源于 useEffect 的依赖数组配置不当。以下指南将通过具体的排查步骤和代码修正方案，帮你彻底解决这一问题。

一、 确认问题：区分无限循环与 Strict Mode

在着手修复前，需先确认这是真正的无限循环，还是 React 开发环境的正常行为。

1. 打开 浏览器的开发者工具（按 F12）。
2. 切换 至 Console（控制台）面板。
3. 观察 日志输出的频率。如果日志在短时间内连续输出成百上千行，且没有停止迹象，即为无限循环。
4. 检查 根组件是否被 <React.StrictMode> 包裹。在生产构建中，Strict Mode 不会生效；若仅在开发环境看到某些 useEffect 执行两次，属于 React 的特性（用于检测副作用），无需修复。

若确认为无限循环，按以下步骤分类排查。

二、 排查场景一：引用类型导致的依赖变化

这是最常见的原因。JavaScript 中，对象、数组和函数是引用类型。每次组件重新渲染时，这些引用的内存地址都会改变，即使内容没变。若将它们直接放入 useEffect 依赖数组中，Effect 会认为依赖发生了变化，从而再次触发渲染。

1. 对象/数组依赖

错误代码示例：

function UserList() {
  // 每次渲染，options 都是一个新的空对象 {}
  const options = { page: 1, size: 10 };

  useEffect(() => {
    fetchUsers(options);
  }, [options]); // options 引用每次都变，导致无限循环
}

修复步骤：

1. 引入 useMemo Hook。
2. 包裹 需要缓存的变量定义。
3. 配置 useMemo 的依赖数组，确保仅当内部变量真正变化时才更新引用。

正确代码：

import { useEffect, useMemo } from 'react';

function UserList() {
  // 仅当 page 或 size 变化时，options 才会重新创建
  const options = useMemo(() => ({ page: 1, size: 10 }), []);

  useEffect(() => {
    fetchUsers(options);
  }, [options]); 
}

2. 函数依赖

将函数直接放入依赖数组也会导致同样的问题，因为 function() {} !== function() {}。

修复步骤：

1. 引入 useCallback Hook。
2. 包裹 目标函数的定义。
3. 确保 useCallback 的依赖数组准确包含了函数内部使用的所有 State 或 Props。

正确代码：

import { useEffect, useCallback, useState } from 'react';

function Form() {
  const [value, setValue] = useState('');

  // 仅当 value 变化时，handleSubmit 才会更新
  const handleSubmit = useCallback(() => {
    console.log(value);
  }, [value]);

  useEffect(() => {
    // 某些逻辑需要依赖 handleSubmit
    handleSubmit();
  }, [handleSubmit]);
}

三、 排查场景二：Effect 内部更新了依赖项

另一种典型情况是：useEffect 执行 -> 更新了某个 State -> State 变化触发组件重新渲染 -> useEffect 再次检测到依赖变化。

1. 直接更新 State 导致循环

错误代码示例：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 每次渲染后都会执行
    setCount(count + 1);
  }, [count]); // 依赖 count
}

逻辑链路：

修复方案：

移除不必要的依赖，或使用函数式更新。

1. 若目的是在组件挂载时仅执行一次，检查 依赖数组是否误加了 State。
2. 若目的是基于旧值更新，使用 函数式更新形式 setCount(prev => prev + 1)，并从依赖数组中移除 count。

正确代码：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 不依赖外部 count 变量，总是基于最新的 prev 更新
    setCount(prev => prev + 1);
  }, []); // 空数组，注意：这仍会导致无限递增，因为 setCount 会导致重渲染，且每次 prev 都在变
}

注意：上述“正确代码”在某些场景下（如确实需要无限增加计数器）是符合预期的。若想仅执行一次，必须确保 Effect 内部不会触发 State 更新，或者增加条件判断。

2. 带条件的 State 更新

若需要根据特定条件才更新 State，以打破循环。

修复步骤：

1. 添加 if 条件判断。
2. 使用 useRef 存储上一个值，进行对比。

正确代码：

import { useEffect, useState, useRef } from 'react';

function DataFetcher({ userId }) {
  const [data, setData] = useState(null);
  const prevUserIdRef = useRef(userId);

  useEffect(() => {
    if (prevUserIdRef.current !== userId) {
      // 仅当 userId 真正改变时才请求
      fetchUserData(userId).then(setData);
      prevUserIdRef.current = userId;
    }
  }, [userId]);
}

四、 排查场景三：依赖数组拼写错误或遗漏

遗漏依赖会导致闭包陷阱（读取到旧数据），而错误地包含不稳定的变量或过度包含变量则会导致性能问题或无限循环。

常见错误：

1. 拼写错误：写成了 [dependecy] 而非 [dependency]（React 无法识别，视为空数组或依赖丢失）。
2. 包含整个 Props 对象：useEffect(() => {}, [props])。每次父组件渲染，props 对象引用都可能变化。

修复步骤：

1. 使用 ESLint 插件 react-hooks/exhaustive-deps。这是最有效的防线。
2. 配置 ESLint 规则以在编辑器中直接报错。
3. 解构 Props，仅提取具体需要的变量放入依赖数组。

错误代码：

function Profile({ user }) {
  useEffect(() => {
    console.log(user.name);
  }, [user]); // user 对象每次可能都是新的
}

正确代码：

function Profile({ user }) {
  useEffect(() => {
    console.log(user.name);
  }, [user.name]); // 仅依赖 name 字符串
}

五、 终极排查清单

当遇到死循环时，按此顺序操作：

1. 定位 发生无限循环的组件（通过 console.log('Component Render') 或 React DevTools Profiler）。
2. 审查 该组件内所有的 useEffect。
3. 检查 每一个 useEffect 的代码逻辑：是否直接或间接调用了 setState？
4. 核对 依赖数组：
   • 是否包含对象、数组或函数（未被 useMemo/useCallback 包裹）？
   • 是否包含那些在 Effect 内部被修改的 State？
5. 临时注释 掉 Effect 内部逻辑，确认循环是否停止。若停止，则问题确实出在此 Effect 内。

通过以上步骤，即可精确定位并修复 useEffect 导致的无限循环问题。