如何避免useEffect中因data引用变化触发的无限循环问题

DevOps 小满

2026-10-28

无限循环的核心本质

React 的 useEffect 依赖判断采用浅相等比较规则：

字符串、数字这类基础类型比较的是实际值，值不变就不会触发effect
数组、对象这类引用类型比较的是内存引用地址，哪怕内容和之前完全一致，只要引用变了就会判定为依赖变化，触发effect执行

你遇到的无限循环本质是形成了完整的逻辑闭环：
effect触发执行 → 运行fetchFunc → 内部更新data时生成全新的数组引用 → 依赖检测到data引用变化 → 再次触发effect → 往复循环。

可落地的解决方案（按推荐优先级排序）

优先方案：梳理触发逻辑，拆分具体依赖，从根源避免自循环
首先要明确：如果你把fetchFunc执行后必然会更新的data本身当成依赖，逻辑上就会形成“跑fetch→更新data→data变了又跑fetch”的死循环。正确的思路是先想清楚：你到底希望什么变化触发fetch？
如果data里存的是和fetch触发相关的字段（比如页码、搜索关键词、筛选条件），不要把整个data数组/对象当依赖，直接把这些需要监听的基础类型字段抽出来当依赖。这些字段是你手动控制、不是fetch跑一次就随便改的，用基础类型做比较不会受引用变化影响。
举个例子：原来data是存储了分页参数和列表内容的对象{ page: 1, pageSize: 10, keyword: 'react', list: [] }，你希望page、pageSize、keyword变化的时候才重新拉列表，就把原来的：
```
// 原写法：依赖整个data，引用变就触发，很容易循环
useEffect(() => { fetchFunc(); }, [data]);
```
改成：
```
// 新写法：只依赖需要响应变化的基础类型字段
useEffect(() => {
  fetchFunc();
}, [data.page, data.pageSize, data.keyword]);
```
哪怕fetch执行后更新了data.list内容，只要page、pageSize、keyword没变，就不会触发effect，从根源上解决循环问题，也没有额外的比较开销。
次选方案：用内容快照当依赖，只在实质内容变化时触发
如果确实需要监听整个data的内容变化（比如data是用户手动编辑的标签列表，没有固定可拆分的响应字段），可以用useMemo把data的内容转成一个基础类型的“内容指纹”当依赖，只有内容真的变了，指纹才会变。
示例代码：
```
// 生成data的内容指纹，只有内容变化时这个字符串才会变
const dataFingerprint = useMemo(() => JSON.stringify(data), [data]);

useEffect(() => {
  fetchFunc();
}, [dataFingerprint]);
```
注意：这个方法只适合内容可序列化的data（没有函数、循环引用的结构），如果有复杂嵌套结构不要硬套。

根源打断循环：fetch更新数据时避免无意义的引用变更
很多时候循环是因为fetch拿到接口返回数据后，不管内容和之前是不是一样，都直接setData生成新的数组引用。这种情况可以在setState的时候先做内容比较，内容一致就直接返回之前的旧引用，从根源上不触发重渲染，也就不会触发effect。
示例代码：

const fetchFunc = useCallback(async () => {
  const res = await fetch('/api/your-endpoint');
  const newData = res.data;
  setData(prevData => {
    // 简单实现数组浅比较：长度一致+每一项内容一致就不更新
    const isSame = Array.isArray(prevData) 
      && prevData.length === newData.length 
      && prevData.every((item, idx) => item === newData[idx]);
    // 内容一致就返回旧的引用，不会触发组件更新
    return isSame ? prevData : newData;
  })
}, []);

避坑提醒

不要为了绕开循环就直接把依赖数组清空写成useEffect(() => {}, [])，这会让effect只在组件首次挂载时跑一次，完全达不到“数据更新时拉取”的目的
不要上来就用递归深比较逻辑，递归比对有性能损耗，能拆具体依赖的场景优先拆，实在有复杂嵌套的比较需求再考虑使用成熟的深比较Hook
如果要把fetchFunc也加到effect依赖里，记得用useCallback把函数包裹成稳定引用，否则函数每次组件渲染都会生成新引用，也会触发循环

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