React useEffect 无限循环怎么解决？

Question

仓乃文 · Accepted Answer

useEffect 无限循环通常是因为依赖数组设置不当，每次渲染都触发新的 Effect。最常见的原因是依赖了对象或数组等引用类型。

问题原因：
```javascript
function Component({ user }) {
  useEffect(() => {
    fetchUser(user);  // user 对象每次渲染都是新引用
  }, [user]);  // 触发无限循环！
}
```

方案一：提取具体值作为依赖：
```javascript
function Component({ user }) {
  useEffect(() => {
    fetchUser(user.id, user.type);
  }, [user.id, user.type]);  // 只依赖原始值
}
```

方案二：使用 useMemo 稳定引用：
```javascript
function Component({ userId }) {
  const user = useMemo(() => ({ id: userId }), [userId]);
  useEffect(() => {
    fetchUser(user);
  }, [user]);
}
```

方案三：使用 useRef 存储不稳定值：
```javascript
function Component({ onUpdate }) {
  const onUpdateRef = useRef(onUpdate);
  useEffect(() => { onUpdateRef.current = onUpdate; });
  useEffect(() => {
    const timer = setInterval(() => onUpdateRef.current(), 1000);
    return () => clearInterval(timer);
  }, []);  // 空依赖，timer 只创建一次
}
```

补充说明：
- 无限循环本质：Effect 执行 → 状态更新 → 渲染 → Effect 再次执行
- 对象、数组、函数作为依赖，每次渲染都是新引用
- ESLint 的 exhaustive-deps 规则能帮助检测依赖问题
- 如果确实只需要执行一次，用空数组 [] 作为依赖