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

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

回答与解析：

React 的 useEffect 无限循环通常发生在以下场景：在 useEffect 的依赖数组中包含了会在每次渲染时变化的引用类型（如对象、数组、函数），并且该 effect 又会触发状态更新，从而引起重新渲染，进而再次触发 effect，形成循环。

典型错误示例：

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

  useEffect(() => {
    setCount(count + 1); // 更新状态
  }, [count]); // 依赖 count，count 更新后再次触发 effect
}

在这个例子中，每次 effect 执行都会更新 count，而 count 又是依赖项，于是无限循环。

另一个常见情况：在依赖数组中使用了内联对象或函数：

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

解决方法：

1. 使用函数式更新：如果新状态依赖于前一个状态，使用函数式更新，避免将状态本身作为依赖。

   useEffect(() => {
     setCount(prev => prev + 1);
   }, []); // 无依赖，只执行一次
   

2. 使用 useCallback 或 useMemo 缓存函数或对象：

   const config = useMemo(() => ({ a: 1 }), []);
   useEffect(() => {
     fetchData(config);
   }, [config]);
   

3. 审查依赖项是否必要：有时可以移除不必要的依赖，或重构逻辑。

4. 使用 ESLint 插件（如 react-hooks/exhaustive-deps）：帮助识别依赖问题。

总之，关键在于确保依赖数组中的值在不需要重新执行 effect 时保持稳定，同时避免在 effect 中无条件地更新状态。