useEffect为什么会触发死循环

一、核心结论（根因）

useEffect 死循环的根因并非 useEffect 本身，而是逻辑闭环导致：effect 回调函数内部触发了 state 更新，state 更新后会导致组件重新渲染，进而触发 useEffect 再次执行，如此循环往复，形成无限闭环。

二、死循环本质逻辑闭环

完整闭环流程：

1. 组件初始渲染

2. useEffect 依据依赖项执行回调函数

3. 回调函数内部更新 state

4. state 变化触发组件重新渲染

5. 重新渲染后，useEffect 再次执行（若依赖项变化，或无依赖但回调仍更新 state）

6. 重复步骤3-5，进入无限循环

三、经典死循环案例

案例1：依赖项与更新的state一致（最常见）

// 错误示例（死循环）
useEffect(() => {
  // effect 内更新 state（count）
  setCount(count + 1);
}, [count]); // 依赖项为 count

执行逻辑：渲染（count=0）→ useEffect执行 → setCount（count=1）→ 组件重渲染 → 依赖项count变化 → useEffect再次执行 → 再次setCount → 无限循环。

案例2：空依赖仍死循环

// 错误示例（死循环）
useEffect(() => {
  setCount(100); 
}, []); // 空依赖

原因：空依赖仅保证"不因为依赖项变化而触发 useEffect"，但无法阻止"state 更新导致组件重渲染后，useEffect 重新定义并执行"，回调内持续更新 state，依然形成闭环。

四、3种根治解法

解法1：避免在effect内更新其监听的同一state

// 错误
useEffect(()=>{
  setCount(count+1)
}, [count])

// 正确
useEffect(()=>{
  // 仅执行逻辑，不更新当前依赖的state（count）
}, [count])

解法2：使用函数式更新，移除对应依赖

// 正确示例（无死循环）
useEffect(() => {
  // 函数式更新，不依赖外部count变量
  setCount(prev => prev + 1); 
}, []); 

说明：函数式更新（prev => prev + 1）可直接获取上一轮state的值，无需将count加入依赖项，打破闭环。

解法3：确认是否必要使用useEffect

很多死循环源于"滥用useEffect"，可替换为更合适的方式：

• 直接在组件顶部进行简单计算，无需放入effect；

• 用useMemo缓存复杂计算结果；

• 通过state初始化直接赋值，无需在effect中更新。

五、最终总结

• 死循环核心：effect内更新state + state变化触发effect重新执行，形成闭环；

• 关键认知：并非useEffect本身存在缺陷，而是逻辑设计不当；

• 破环关键：打破"effect更新state→state触发effect"的任意一环即可。