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

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

回答与解析：

在 React 中，useEffect 无限循环通常是因为在依赖数组中包含了每次渲染都会变化的值（如对象、函数或状态），并且 effect 中又更新了状态，从而触发重新渲染，再次执行 effect，形成循环。

常见原因示例：

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

  useEffect(() => {
    setCount(count + 1); // 每次 effect 执行都会更新 count
  }, [count]); // 依赖 count，count 改变又触发 effect
}

上面代码会导致无限循环，因为 count 是依赖项，而 effect 又修改了 count。

解决方法：

1. 使用函数式更新（如果新状态仅依赖旧状态）：

useEffect(() => {
  setCount(prev => prev + 1);
}, []); // 无需将 count 加入依赖

2. 避免不必要的依赖：如果某个值不需要作为依赖（比如只在 effect 内部临时使用），可以将其移出 effect 或使用 useRef 保存。

3. 正确使用 useCallback/useMemo：如果依赖项是一个函数或对象，使用 useCallback 或 useMemo 确保其引用稳定。

const fetchData = useCallback(() => {
  // ...
}, []); // 稳定的函数引用

useEffect(() => {
  fetchData();
}, [fetchData]);

4. 检查是否真的需要该依赖：有时依赖可以安全地省略（例如使用 ESLint 的 react-hooks/exhaustive-deps 规则提示时需谨慎判断）。

关键原则：确保 effect 的依赖项在逻辑上是稳定的，并且 effect 不会无条件地更新这些依赖项。