React组件卸载时clearInterval未生效问题排查

问题根源 #

你的代码存在三个核心错误，导致定时器无法被正确清理：

• 定时器在组件顶层重复创建：组件每次渲染时都会执行const timer = setInterval(...)，每渲染一次就新增一个定时器，而你只能清理当前渲染周期的timer ID，旧定时器会一直运行。
• 清理时错误调用timer：setInterval返回的是数字类型的定时器ID，不是函数。你写的clearInterval(timer())会直接报错，导致清理逻辑完全失效。
• useEffect缺少依赖数组：没有指定依赖数组的useEffect会在每次组件渲染时重新执行，包括生成新的清理函数，但旧定时器的ID已经丢失，无法被清理。

修复后的代码 #

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

const ToggleComponent = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    // 仅在组件挂载时创建一次定时器
    const timer = setInterval(() => {
      console.warn('3 Seconds');
    }, 3000);

    console.warn('Timer started');
    
    return () => {
      clearInterval(timer); // 直接传入定时器ID清理
      console.warn('Timer ended');
    };
  }, []); // 空依赖数组确保useEffect只执行一次

  return (
    <TouchableOpacity onPress={() => setShow(!show)}>
      <Text style={{fontSize:20, color:'red'}}>
        {show ? 'Hide Component' : 'Show Component'}
      </Text>
    </TouchableOpacity>
  );
};

修复说明 #

1. 将定时器创建逻辑移入useEffect内部，配合空依赖数组[]，确保组件挂载时仅初始化一次定时器。
2. 清理函数中直接传入定时器IDtimer，不再错误调用它。
3. 补充了点击切换组件显示/隐藏的逻辑（用TouchableOpacity和useState），符合你描述的交互场景，确保组件卸载时清理函数能正常触发。

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