如何在 React 中正确地使用 useEffect 避免无限循环？

如何在 React 中正确地使用 useEffect 避免无限循环？

回答：
在 React 中，useEffect 无限循环通常是因为依赖项数组（dependency array）包含了一个在每次渲染时都会变化的值（如对象、数组或函数），导致 effect 不断触发，进而更新状态，又触发重新渲染，形成死循环。

避免方法：

1. 确保依赖项稳定：只将真正需要监听变化的、稳定的值放入依赖数组。避免直接传入对象字面量、数组字面量或内联函数。

   // ❌ 错误：每次渲染 data 都是新对象
   useEffect(() => {
     fetchData(data);
   }, [{ id: 1 }]); // 每次都是新对象，导致无限循环
   
   // ✅ 正确：使用原始值或稳定引用
   useEffect(() => {
     fetchData(id);
   }, [id]); // id 是原始类型，稳定
   

2. 使用 useCallback / useMemo 缓存函数或对象：

   const config = useMemo(() => ({ id, name }), [id, name]);
   const handleUpdate = useCallback(() => { /* ... */ }, []);
   
   useEffect(() => {
     doSomething(config, handleUpdate);
   }, [config, handleUpdate]);
   

3. 避免在 effect 中更新触发其自身的状态：如果 effect 中调用了 setState，并且该 state 是 effect 的依赖项，就会导致循环。应确保状态更新有终止条件。

   // ❌ 危险：可能无限循环
   useEffect(() => {
     setCount(count + 1);
   }, [count]);
   
   // ✅ 改用函数式更新或移除依赖
   useEffect(() => {
     setCount(c => c + 1);
   }, []); // 若只需执行一次
   

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

解析：
useEffect 的依赖数组用于决定 effect 是否重新执行。React 通过 Object.is 对比依赖项前后值。若依赖项是引用类型且每次渲染都创建新实例（如 {}、[]、() => {}），即使内容相同，也会被视为“变化”，从而触发 effect。因此，保持依赖项的引用稳定性是避免无限循环的关键。同时，应始终遵循“依赖项完整性”原则——所有 effect 中使用的响应式变量都必须声明在依赖数组中。