React Navigation：停止定时数据获取的正确方式及最佳实践探讨

首先说结论：你当前的实现不是最佳实践，而且存在明显bug，我们可以用更简洁直接的方式实现需求。

当前代码的问题 #

1. 依赖数组错误：你的useEffect依赖是空数组，意味着它只会在组件挂载时执行一次。后续isPlaying状态变化时，这个useEffect不会重新运行，所以即使页面切换后isPlaying设为false，原来创建的定时器依然会继续执行，完全达不到停止的效果。
2. setInterval参数无效：setInterval的第二个参数如果传null，会被JS自动解析为0，这会导致定时器疯狂高频执行（几乎每秒跑无数次），直接引发性能问题。

更优实现方式：直接用useFocusEffect管理定时器 #

useFocusEffect本身就是React Navigation专门用来处理页面焦点状态的Hook，它的回调会在页面获得焦点时执行，返回的清理函数会在页面失去焦点时自动调用。我们完全不需要额外的isPlaying状态，直接把定时器的创建和清理逻辑放在这里面：

import { useFocusEffect } from '@react-navigation/native';
import React from 'react';

// ...

useFocusEffect(
  React.useCallback(() => {
    // 页面聚焦时，启动5秒定时器
    const intervalId = setInterval(fetchData, 5000);

    // 页面失焦时，清除定时器
    return () => clearInterval(intervalId);
  }, [fetchData])
);

为什么这是更好的方案？ #

• 逻辑更直接：不需要额外的状态变量做中间层，把定时器的生命周期和页面焦点状态直接绑定，代码更简洁，可读性更高。
• 无冗余状态：去掉了isPlaying这个中间状态，减少了状态管理的复杂度，也避免了状态不同步的可能。
• 避免bug：完全利用useFocusEffect的特性，确保页面离开时定时器100%被清理，不会出现内存泄漏或无效执行的情况。

如果你的fetchData函数是在组件内部定义的，记得要把它用useCallback包裹，避免因为函数引用变化导致useFocusEffect频繁触发。

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