React useEffect添加未使用依赖出现maximum update depth exceeded报错求解

你的判断是对的，报错的根因就是serviceInstance每次渲染时都返回了新的引用，触发了无限更新循环。

React的useEffect对依赖项的对比默认采用浅比较（引用相等判断），数组、对象这类引用类型的值，只要内存地址发生变化，不管内容是否和之前一致，React都会判定为依赖发生了变更，进而重新执行useEffect的回调逻辑。

结合你的代码流程，无限循环的路径是：

1. 组件渲染，从entityStore拿到新的serviceInstance数组引用
2. useEffect检测到依赖变化，执行回调，调用setFirst等4个状态更新函数
3. 状态更新触发组件重新渲染，回到第一步，形成循环，最终触发最大更新深度超限的错误。

通常这类问题来源于状态存储层的返回值没有做引用稳定优化，常见的场景包括：

• entityStore每次返回serviceInstance时都生成了新数组，比如对原始数据做了过滤、映射、展开等操作后返回新实例
• 你使用的状态管理工具没有做选择器缓存，每次取值都会重新计算生成新的引用值

方案1：从源头稳定serviceInstance的引用（推荐） #

优先修改serviceInstance的生成逻辑，只有当它的内容真正发生变化时才返回新的引用：

• 如果是你自行维护的entityStore，可以用useMemo包裹serviceInstance的生成逻辑，仅当它的依赖发生变化时才重新计算：

// 示例：仅当rawServiceList变化时才生成新的serviceInstance数组
const serviceInstance = useMemo(() => rawServiceList.filter(/* 你的过滤逻辑 */), [rawServiceList])

• 如果使用的是第三方状态管理库（比如Redux、Zustand等），可以使用库自带的缓存选择器能力，比如Redux的createSelector、Zustand的shallow比较选择器，避免返回不必要的新引用。

方案2：自定义依赖比较逻辑 #

如果无法修改serviceInstance的生成逻辑，可以自己实现对比逻辑，仅当值真正发生变化时才执行effect内容：

const { contractParams, serviceInstance } = entityStore;
const prevServiceRef = useRef(serviceInstance);
const prevContractParamsRef = useRef(contractParams);

useEffect(() => {
  // 自定义数组比较逻辑，可根据实际业务调整，比如对比长度、关键字段等
  const isServiceChanged = JSON.stringify(prevServiceRef.current) !== JSON.stringify(serviceInstance);
  const isContractChanged = JSON.stringify(prevContractParamsRef.current) !== JSON.stringify(contractParams);
  
  if (isServiceChanged || isContractChanged) {
    const [first, second, third, fourth] = getParamDetails(contractParams);
    setFirst(first);
    setSecond(second);
    setThird(third);
    setFourth(fourth);
    // 更新缓存的上一次值
    prevServiceRef.current = serviceInstance;
    prevContractParamsRef.current = contractParams;
  }
}, [contractParams, serviceInstance])

如果你的数组内容不会出现循环引用，也可以直接把序列化后的字符串作为依赖项，简化写法：

useEffect(() => {
  const [first, second, third, fourth] = getParamDetails(contractParams);
  setFirst(first);
  setSecond(second);
  setThird(third);
  setFourth(fourth);
}, [JSON.stringify(contractParams), JSON.stringify(serviceInstance)])

方案3：忽略不必要的依赖警告（不推荐） #

如果你确认serviceInstance的引用只会在内容真正变化时才更新，只是因为没有在effect内部使用触发了eslint警告，可以添加注释忽略依赖检查：

useEffect(() => {
  const [first, second, third, fourth] = getParamDetails(contractParams);
  setFirst(first);
  setSecond(second);
  setThird(third);
  setFourth(fourth);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contractParams, serviceInstance])

这种方式只建议在你完全确认依赖引用稳定性的前提下使用，否则依然会有循环更新的风险。

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