React Native中setInterval定时器内存泄漏问题排查求助

问题根源分析 #

你的代码存在两个核心问题导致内存阶梯式增长：

1. 频繁创建/销毁定时器：useEffect依赖currentTime，每次倒计时状态更新都会触发useEffect执行，销毁旧定时器并创建新的。频繁的定时器实例创建与销毁会产生内存碎片，额外消耗资源。
2. 不必要的函数重创建：tick函数依赖currentTime，每次状态变化都会生成新的tick实例，旧实例无法被及时回收，加剧内存占用。

修复方案 #

方案1：直接内联定时器逻辑（最简优化）

通过setCurrentTime的函数式更新能力，直接获取最新状态，让定时器仅在组件挂载时创建一次：

import { useState, useEffect } from 'react';
import { Text } from 'react-native';

// 你的gstyles定义
const gstyles = {
  bigText: { fontSize: 24 }
};

const TimerComponent = () => {
  const [currentTime, setCurrentTime] = useState(240);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(prevTime => {
        // 倒计时到0后停止更新
        return prevTime > 0 ? prevTime - 1 : prevTime;
      });
    }, 1000);

    // 组件卸载时强制清理定时器
    return () => clearInterval(timer);
  }, []); // 空依赖数组，确保只在挂载/卸载时执行

  const TimerDisplay = () => {
    return (
      <Text style={gstyles.bigText}>
        {Math.floor(currentTime / 60)}:0{currentTime % 60}
      </Text>
    );
  };

  return <TimerDisplay />;
};

export default TimerComponent;

方案2：抽离逻辑并优化依赖（适合复杂场景）

如果需要将倒计时逻辑单独抽离，可通过useCallback配合函数式更新，避免依赖currentTime：

import { useState, useEffect, useCallback } from 'react';
import { Text } from 'react-native';

// 你的gstyles定义
const gstyles = {
  bigText: { fontSize: 24 }
};

const TimerComponent = () => {
  const [currentTime, setCurrentTime] = useState(240);

  // 仅依赖稳定的setCurrentTime，避免因状态变化重创建函数
  const tick = useCallback(() => {
    setCurrentTime(prevTime => prevTime > 0 ? prevTime - 1 : prevTime);
  }, [setCurrentTime]);

  useEffect(() => {
    const timer = setInterval(tick, 1000);
    return () => clearInterval(timer);
  }, [tick]); // 仅依赖稳定的tick函数

  const TimerDisplay = () => {
    return (
      <Text style={gstyles.bigText}>
        {Math.floor(currentTime / 60)}:0{currentTime % 60}
      </Text>
    );
  };

  return <TimerDisplay />;
};

export default TimerComponent;

关键优化点说明 #

• 函数式更新：setCurrentTime(prev => ...)直接获取最新状态，无需在依赖数组中加入currentTime，避免了状态变化导致的useEffect重复执行。
• 减少定时器频繁操作：优化后定时器仅在组件挂载时创建一次，卸载时清理一次，彻底避免了频繁创建销毁带来的内存开销。
• 稳定的依赖数组：确保useEffect和useCallback的依赖仅为稳定值（如setCurrentTime），减少不必要的函数重创建和副作用触发。

内容的提问来源于stack exchange，提问作者mlav