在 React 中使用 useEffect 时，为什么有时会出现无限循环的依赖问题？如何正确解决？

在 React 中使用 useEffect 时，为什么有时会出现无限循环的依赖问题？如何正确解决？

回答与解析：

无限循环通常发生在 useEffect 的依赖数组中包含了在 effect 内部被更新的状态（state）或引用类型（如对象、数组、函数），而该 effect 又反过来更新这个状态，从而触发组件重新渲染，再次执行 effect，形成闭环。

常见错误示例：

function MyComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ value: 0 });

  // 错误：每次渲染都会创建新的 data 对象，导致依赖变化
  useEffect(() => {
    setData({ value: count });
  }, [count, data]); // ❌ data 在每次渲染时都是新引用
}

正确解决方法：

1. 避免不必要的依赖：如果 effect 中的状态更新不依赖于某个变量的当前值，可以将其从依赖数组中移除（但需确保逻辑正确）。

2. 使用函数式更新：如果新状态基于前一个状态计算，使用函数式 setState，这样可以避免将状态本身作为依赖。

   useEffect(() => {
     setData(prev => ({ ...prev, value: count }));
   }, [count]); // ✅ 不依赖 data
   

3. 使用 useCallback / useMemo 缓存函数或对象：防止引用类型在每次渲染时都变化。

   const config = useMemo(() => ({ value: count }), [count]);
   useEffect(() => {
     doSomething(config);
   }, [config]);
   

4. 使用 ESLint 插件 react-hooks/exhaustive-deps：它会提示依赖缺失或冗余，帮助你写出更安全的代码。

核心原则：effect 的依赖数组应准确反映 effect 中使用的所有外部变量，同时避免因引用变化导致不必要的重复执行。