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

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

回答：
useEffect 出现无限循环通常是因为在依赖数组中包含了在每次渲染时都会变化的值（例如对象、数组或函数），并且 useEffect 的回调函数又会触发状态更新，从而导致组件重新渲染，再次触发 useEffect，形成死循环。

解析：
举例说明：

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

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

常见原因包括：

• 依赖项中包含每次渲染都重新创建的对象或函数（如内联对象 {}、箭头函数等）。
• useEffect 中更新了作为依赖的状态。

解决方法：

1. 检查是否真的需要该依赖：如果 useEffect 中的逻辑不需要依赖某个值，就不要将其加入依赖数组。

2. 使用函数式更新：如果新状态基于前一个状态，应使用函数式更新方式，避免依赖状态本身：

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

3. 使用 useCallback 或 useMemo 缓存函数或对象，确保引用稳定：

   const fetchData = useCallback(async () => {
     // ...
   }, [deps]);
   
   useEffect(() => {
     fetchData();
   }, [fetchData]);
   

4. 谨慎添加依赖项：始终遵循 React 官方建议——依赖数组应包含所有在 effect 中使用的响应式值（props、state、函数等），但要确保这些值的引用稳定。

通过合理管理依赖项和状态更新逻辑，可以有效避免 useEffect 无限循环问题。