React中如何停止useEffect内setInterval避免登出后仍运行

你的代码存在3个核心问题，导致登出后定时器无法正常停止：

• isLoggedIn是useEffect首次执行时从localStorage读取的闭包常量，后续localStorage值变化时，这个变量不会同步更新，定时器回调里判断的永远是组件首次挂载时的登录状态，完全感知不到登出动作
• localStorage.getItem返回值永远是字符串类型，你直接用=== false（布尔值）做判断，条件永远不会成立，就算值更新了也进不到清理定时器的分支
• useEffect依赖数组为空，其返回的清理函数只有组件卸载时才会执行，如果登出操作没有触发当前组件卸载，清理逻辑根本不会触发

优先把登录状态改成响应式数据源（从你项目用的Redux/Context/Zustand/React Router等状态容器中读取），不要直接在effect里缓存localStorage的静态值，把登录状态加入useEffect依赖数组，状态变更时会自动执行清理逻辑，实现登出瞬间停掉定时器的需求。
修正后代码如下：

const intervalId = useRef(null)
// 从响应式状态源读取登录状态，以Redux为例，其他状态管理工具逻辑一致
const isLoggedIn = useSelector(state => state.user.isLoggedIn)

useEffect(() => {
  // 未登录状态下不启动定时器，同时清理已有定时器
  if (!isLoggedIn) {
    clearInterval(intervalId.current)
    return
  }

  // 仅登录状态下启动2分钟一次的token刷新
  intervalId.current = setInterval(() => {
    dispatch(refreshUserToken())
  }, 1000 * 60 * 2)

  // 登录状态变化/组件卸载时，自动执行清理
  return () => {
    clearInterval(intervalId.current)
  }
}, [isLoggedIn, dispatch])

如果暂时无法改造登录状态为响应式，需要注意两点：一是不要在定时器外部缓存localStorage的值，每次回调执行时实时读取最新值；二是手动做字符串到布尔值的类型转换。
参考代码如下：

const intervalId = useRef(null)
useEffect(() => {
  const runRefreshTask = () => {
    // 每次执行都读取最新的localStorage值，手动转成布尔类型
    const isLoggedIn = localStorage.getItem("isUserLoggedIn") === "true"
    if (!isLoggedIn) {
      clearInterval(intervalId.current)
      return
    }
    dispatch(refreshUserToken())
  }
  // 初始化时先执行一次校验
  runRefreshTask()
  intervalId.current = setInterval(runRefreshTask, 1000 * 60 * 2)

  return () => {
    clearInterval(intervalId.current)
  }
}, [dispatch])

注意：该方案存在延迟，登出后最多需要等2分钟才会停掉定时器，无法满足「登出立刻停止」的需求，仅作为临时兼容方案使用。

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