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

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

回答与解析：

无限循环的副作用通常发生在 useEffect 的依赖数组中包含了在每次渲染时都会发生变化的值（如对象、函数或数组），而该 useEffect 又会更新状态，从而触发组件重新渲染，进而再次触发 useEffect，形成死循环。

常见原因示例：

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

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

这个例子中，useEffect 依赖 count，而 effect 本身又修改 count，导致无限循环。

另一个常见情况：

useEffect(() => {
  fetchData();
}, [{}]); // 每次渲染都会生成一个新的对象字面量，导致依赖变化

解决方法：

1. 使用函数式更新（适用于状态基于前一个状态更新）：

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

2. 将对象/函数移出组件或使用 useMemo/useCallback 缓存：

const config = useMemo(() => ({ id: 1 }), []); // 确保引用稳定
// 或
const handleClick = useCallback(() => { ... }, []);

3. 仔细审查依赖数组：确保只包含真正需要监听变化的变量，必要时使用 ESLint 插件（如 eslint-plugin-react-hooks）帮助检查。

4. 使用 ref 存储可变值而不触发重渲染：如果某些值不需要触发 effect，但又需在 effect 中使用，可将其存入 ref。

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