React组件用useEffect定时器内存持续增长怎么办？

小令敏提问于 2026-02-05 11:00:32 阅读 64

优化

我在开发一个实时数据展示组件时用到了useEffect里的setInterval，但组件卸载后内存一直没释放。虽然加了cleanup函数，但内存分析工具显示heap还在持续增长，这是什么问题啊？

代码是这样的：useEffect(() => { const timer = setInterval(() => setData(prev => prev + 1), 1000); return () => clearInterval(timer); }, []);，看起来没问题啊，但卸载组件后定时器还在跑？

尝试过在cleanup里加console.log发现确实执行了，但内存监控工具显示内存还是在缓慢上涨。用Chrome DevTools的Memory tab做堆快照对比，发现闭包对象在不断增加…

内存优化内存分析

我来解答赞 5 收藏

反馈

1 条解答

博主培培 Lv1

用 useRef 存 timer id，确保 cleanup 时能清除干净。闭包里拿不到最新值，导致旧 timer 清不掉。

const timerRef = useRef();

useEffect(() => {

  timerRef.current = setInterval(() => setData(prev => prev + 1), 1000);

  return () => {

    clearInterval(timerRef.current);

  };

}, []);

2026-02-05 11:03