React新手疑问：ESLint exhaustive-deps规则导致useEffect无限循环如何处理？

嘿，刚接触React三周就能碰到这个常见的“坑”，已经很棒啦！先直接给你吃个定心丸：你的核心理解完全没错——useEffect的设计初衷就是允许开发者指定仅在特定状态变化时触发副作用，所以你想仅保留stateOne作为依赖来控制触发时机，是完全合理的做法。

那为什么会出现ESLint提示和无限循环的矛盾呢？咱们一步步拆解：

1. 为什么ESLint会提示你添加stateTwo？ #

ESLint的exhaustive-deps规则是个“安全卫士”，它会扫描你的useEffect回调里用到的所有变量，只要这些变量不在依赖数组里，就会发出警告——它怕你因为遗漏依赖导致过时闭包问题（比如回调里用到的state还是旧值）。但有时候它的判断会过于“死板”，比如当你明确不想让某个变量触发副作用时，它的提示就会变成困扰。

2. 为什么添加stateTwo后会触发无限循环？ #

大概率是这两种情况之一：

• 你的//do something逻辑里修改了stateTwo：当stateTwo变化触发useEffect，useEffect里又修改stateTwo，形成循环；
• stateTwo是引用类型（对象/数组）：React在比较依赖时是浅比较，如果每次渲染stateTwo都是重新创建的新对象（比如const stateTwo = { key: value }），哪怕内容没变，React也会认为它“变了”，从而触发useEffect，进而可能又导致stateTwo重新生成，循环往复。

3. 该怎么解决这个问题？ #

根据你的实际场景，有几种可选方案：

方案一：如果副作用里没用到stateTwo——直接忽略ESLint提示 #

如果//do something里根本没用到stateTwo，那ESLint的提示就是误报。你可以在useEffect下面加一行注释来忽略这个警告，但一定要加上说明，避免后续维护时困惑：

useEffect(() => {
  // do something
}, [stateOne]); // eslint-disable-next-line react-hooks/exhaustive-deps
// 注释：仅需监听stateOne的变化，stateTwo未在副作用中使用

方案二：如果副作用里用到了stateTwo，但不想让它触发useEffect #

• 用useRef保存stateTwo的引用：把stateTwo存到ref里，这样依赖数组里不用加stateTwo，在useEffect里通过ref.current获取最新的stateTwo值：

  const stateTwoRef = useRef(stateTwo);
  useEffect(() => {
    stateTwoRef.current = stateTwo;
  }, [stateTwo]);
  
  useEffect(() => {
    // 这里用stateTwoRef.current获取最新的stateTwo
    // do something
  }, [stateOne]);
  

• 用useMemo缓存引用类型的stateTwo：如果stateTwo是计算出来的对象/数组，用useMemo缓存它，避免每次渲染都重新创建：

  const stateTwo = useMemo(() => {
    return { key: someValue };
  }, [someValue]); // 只有someValue变化时才重新生成stateTwo
  
  useEffect(() => {
    // do something
  }, [stateOne, stateTwo]); // 现在stateTwo不会频繁变化，就不会无限循环了
  

• 拆分副作用逻辑：把依赖stateTwo的部分抽出来放到另一个useEffect里，分开控制触发时机：

  // 只在stateOne变化时触发的逻辑
  useEffect(() => {
    // do something related to stateOne
  }, [stateOne]);
  
  // 只在stateTwo变化时触发的逻辑
  useEffect(() => {
    // do something related to stateTwo
  }, [stateTwo]);
  

最后再划个重点 #

exhaustive-deps规则是个工具，不是必须严格遵守的铁律。它的目的是帮你避免潜在的bug，但你作为开发者，最清楚自己的副作用应该在什么时候触发。所以只要你确认自己的逻辑是正确的，忽略提示或者调整代码都是完全可行的~

内容的提问来源于stack exchange，提问作者John Roice M. Aldeza