在 React 中使用 useEffect 时，为什么有时会出现无限循环？如何避免？

在 React 中使用 useEffect 时，为什么有时会出现无限循环？如何避免？

回答：
useEffect 出现无限循环的常见原因是：在 useEffect 的依赖数组中包含了在每次渲染时都会变化的值（如对象、函数或未正确记忆的引用类型），并且该 effect 中又触发了状态更新，从而导致组件重新渲染，再次触发 effect，形成死循环。

解析：
例如：

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

  useEffect(() => {
    setCount(count + 1); // 每次执行都会更新状态
  }, [count]); // 依赖 count，count 变化后重新执行，又改变 count → 无限循环
}

另一个常见情况是依赖了一个在每次渲染中都重新创建的对象或函数：

useEffect(() => {
  fetchData();
}, [{ a: 1 }]); // 每次渲染都创建新对象，引用不同，effect 重复执行

解决方法：

1. 合理设置依赖项：确保只在真正需要响应变化时才将其加入依赖数组。
2. 使用函数式更新：如果新状态依赖于旧状态，使用 setCount(prev => prev + 1)，并可能移除该状态作为依赖。
3. 使用 useCallback / useMemo：对函数或对象进行记忆，避免不必要的引用变化。
4. 检查是否真的需要在 effect 中更新状态：有时逻辑可以移到事件处理函数中，而非副作用中。

正确示例：

useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1); // 不依赖 count，避免循环
  }, 1000);
  return () => clearInterval(timer);
}, []); // 仅在挂载时执行一次

遵循 React 的依赖规则并合理使用记忆化工具，可有效避免无限循环。