React useEffect 清理函数哪些场景必须写？

Question

仓乃文 · Accepted Answer

useEffect 的清理函数在组件卸载或依赖变化重新执行 Effect 前调用。凡是注册了外部副作用（订阅、定时器、事件监听、网络请求）的 Effect 都必须写清理函数，否则会内存泄漏或产生错误。

必须写清理函数的场景：
```javascript
useEffect(() => {
  // 1. 定时器
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);

// 2. 事件监听
  const handler = (e) => setMouse({ x: e.clientX, y: e.clientY });
  window.addEventListener("mousemove", handler);
  return () => window.removeEventListener("mousemove", handler);

// 3. 订阅
  const unsub = onSnapshot(docRef, (snap) => setData(snap.data()));
  return () => unsub();

// 4. WebSocket
  const ws = new WebSocket(url);
  ws.onmessage = (e) => setMessage(JSON.parse(e.data));
  return () => ws.close();

// 5. 异步请求
  let ignored = false;
  fetchData().then((data) => { if (!ignored) setData(data); });
  return () => { ignored = true; };
}, [dep]);
```

不需要清理函数的场景：
```javascript
// 1. 纯计算赋值（无外部副作用）
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

// 2. 一次性初始化
useEffect(() => {
  initAnalytics();
}, []);
```

补充说明：
- 依赖变化时，React 先执行上一次的清理函数，再执行新的 Effect
- 严格模式下 Effect 会执行两次（mount → cleanup → mount），帮助发现遗漏的清理
- 清理函数不支持 async，如果需要异步清理用 Promise.then
- 忘记写清理函数是最常见的 React 内存泄漏原因