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

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

优化

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

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

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

内存优化内存分析

我来解答赞 10 收藏

反馈

2 条解答

一佳宁 Lv1

啊这个问题我也遇到过！虽然看起来清理函数执行了，但其实有个隐蔽的闭包陷阱。你的代码里setInterval回调引用了setData，这个引用在组件卸载后可能还保持着。

试试这样改：

useEffect(() => {

  let mounted = true;

  const timer = setInterval(() => {

    if(mounted) setData(prev => prev + 1);

  }, 1000);

  return () => {

    mounted = false;

    clearInterval(timer);

  };

}, []);

关键点是用mounted变量来标记组件是否挂载。这样即使定时器回调还在执行队列里，也不会去更新已卸载的组件状态。我之前用这个方法解决了内存泄漏，你可以试试看。

另外建议在开发环境用React.StrictMode测试，它会故意多次挂载/卸载组件来暴露这类问题。如果还不行的话，可能需要检查是不是其他地方的闭包引用导致内存没释放。

熬夜debugging最烦这种隐蔽问题了...希望能帮到你！

2026-03-07 09:00

博主培培 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