如何在 React 中正确使用 useEffect 避免无限循环？

如何在 React 中正确使用 useEffect 避免无限循环？

回答与解析：

在 React 中，useEffect 的依赖数组（deps）若包含其内部会更新的状态或引用类型（如对象、数组、函数），而该状态/引用又在 effect 中被修改，就可能导致无限循环。

常见错误示例：

function MyComponent() {
  const [count, setCount] = useState(0);
  const obj = { value: count };

  useEffect(() => {
    setCount(count + 1); // 每次渲染都会触发 effect → 无限循环
  }, [obj]); // obj 是新对象，引用变化，依赖始终不同
}

正确做法：

1. 精简依赖项：只包含真正影响副作用执行的值。
2. 使用函数式更新（如果新状态基于旧状态）：

   useEffect(() => {
     setCount(prev => prev + 1);
   }, []); // 若只需初始化时执行一次
   

3. 使用 useCallback/useMemo 缓存函数或对象，避免不必要的引用变化：

   const obj = useMemo(() => ({ value: count }), [count]);
   

4. 必要时使用 ref 跳过依赖比较（高级场景）。

React 官方推荐开启 eslint-plugin-react-hooks 的 exhaustive-deps 规则，可自动检测潜在问题。记住：effect 的依赖应反映代码逻辑的真实意图，而非“绕过”规则。