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

回答与解析：

在 React 的函数组件中，useEffect 是一个用于处理副作用（如数据获取、订阅、DOM 操作等）的 Hook。无限循环通常发生在 useEffect 的依赖数组（dependency array）使用不当的情况下。

典型原因：

在 useEffect 中更新状态，而该状态又被包含在依赖数组中，且每次更新都生成新的引用。

例如：

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData([...data, 'new item']); // 每次都创建新数组
  }, [data]); // data 是依赖项
}

每次 setData 触发重新渲染，生成新的 data 引用，useEffect 再次执行，从而陷入无限循环。

在依赖数组中包含对象或函数，而这些对象/函数在每次渲染时都会重新创建。

useEffect(() => {
  fetchData();
}, [{ a: 1 }]); // 每次渲染都是新对象，导致 effect 重复执行

解决方法：

使用函数式更新（functional update）避免依赖状态本身：

useEffect(() => {
  setData(prev => [...prev, 'new item']);
}, []); // 无需依赖 data

对于对象或函数依赖，使用 useMemo、useCallback 或将它们移出组件（如定义在组件外或使用 useRef 保存稳定引用）。
审查依赖数组：确保只包含真正需要监听变化的值。

总结：
useEffect 无限循环的根本原因是依赖项在每次渲染后发生变化，而 effect 又会触发状态更新，形成闭环。正确管理依赖项和状态更新逻辑是避免此问题的关键。