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

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

回答与解析：

当 useEffect 的依赖数组中包含一个对象、数组或函数，并且该依赖在每次组件渲染时都会被重新创建（例如在函数组件内部定义的对象字面量、箭头函数等），useEffect 会因“看似变化”的依赖而反复执行，进而可能触发状态更新，再次导致重渲染，形成无限循环。

典型错误示例：

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

  useEffect(() => {
    fetchData().then(setData);
  }, [{ a: 1 }]); // ❌ 每次渲染都创建新对象，依赖永远不同
}

正确做法：

• 若依赖是原始值（如 number、string、boolean），确保其稳定；
• 对于对象或数组依赖，使用 useMemo 缓存：

  const config = useMemo(() => ({ a: 1 }), []);
  useEffect(() => {
    // 使用 config
  }, [config]);
  

• 对于回调函数依赖，使用 useCallback 包裹；
• 如果 effect 中只读取状态而不响应其变化，可考虑移除该依赖（但需谨慎，避免闭包陷阱）；
• 必要时可使用 useRef 保存可变值以避免触发 effect。

关键原则：useEffect 的依赖必须是稳定的引用或原始值，否则将破坏依赖比较机制，引发意外行为。