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

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

回答：
无限循环通常发生在 useEffect 的依赖数组中包含了在 effect 内部被更新的状态或引用类型（如对象、数组、函数），而该 effect 又会再次触发该状态的更新，从而形成闭环。

示例场景：

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

  useEffect(() => {
    fetchData().then(setData);
    // 问题：依赖数组为空，但 setData 被调用 → 正常，不会无限循环
  }, []);

  // 错误示例：
  useEffect(() => {
    const newData = [...data, 'item'];
    setData(newData);
    // 如果依赖项包含 data，则每次 setData 都会触发 effect 再次运行
  }, [data]); // ⚠️ 无限循环！
}

更常见的陷阱是使用对象或函数作为依赖：

useEffect(() => {
  doSomething();
}, [obj]); // 每次渲染 obj 都是新对象（即使内容相同），导致 effect 频繁执行

解决方法：

1. 避免不必要的依赖更新：检查 effect 是否真的需要该依赖。如果只是想在 mount 时执行一次，依赖数组留空。
2. 使用函数式更新：当新状态依赖于旧状态时，使用 setState(prev => ...) 避免依赖旧状态值。

   useEffect(() => {
     setData(prev => [...prev, 'item']);
   }, []); // 不依赖 data，避免循环
   

3. 使用 useCallback / useMemo：稳定函数或对象引用，防止每次渲染都创建新引用。

   const callback = useCallback(() => { ... }, [deps]);
   

4. 使用 ESLint 插件（eslint-plugin-react-hooks）：它会提示缺失或多余的依赖，帮助你写出正确的依赖数组。

总结：
无限循环的根本原因是 effect 的副作用改变了它所依赖的变量，从而再次触发 effect。通过合理管理状态更新方式和依赖引用稳定性，可以有效避免此类问题。