一行代码引发的内存泄漏：React 中闭包的陷阱

一行代码引发的内存泄漏：React 中闭包的陷阱
生产环境偶现页面卡顿，排查三天发现是 useEffect 里少写了一个字符。
// 看似无害的定时器
useEffect(() => {
const timer = setInterval(() => {
fetchData(); // 轮询获取最新数据
}, 5000);

// 漏写了 return，或者写了但没清掉
return () => clearInterval(timer);
}, []); // 依赖项为空，只执行一次

问题代码：
useEffect(() => {
setInterval(() => {
setLogs(prev => [...prev, newLog]); // 日志持续增长
}, 1000);
}, []); // ❌ 没有清理函数，组件卸载后定时器仍在跑

修复方案

// ✅ 标准写法
useEffect(() => {
const timer = setInterval(fetchData, 5000);
return () => clearInterval(timer); // 清理函数
}, []);

// ✅ 更健壮的封装（支持异步清理）
useEffect(() => {
let isCancelled = false;
const timer = setInterval(async () => {
if (isCancelled) return;
await fetchData();
}, 5000);

return () => {
isCancelled = true; // 防止竞态
clearInterval(timer);
};
}, []);