如何避免Firebase的onAuthStateChange创建不必要的监听器？

我开发了一个基于ReactJS + Vite的应用，采用Firebase登录系统。目前所有需要登录才能访问的页面均由ProtectedRoute.ts组件保护，代码如下：

import { Navigate } from "react-router-dom";
import { ReactNode, useEffect, useState } from "react";
import { useUserDataContext } from '../../context/UserDataContext';

//Firebase Logic
import { auth } from '../../config/firebaseConfig';
import { onAuthStateChanged } from "firebase/auth";

interface ProtectedRouteProps {
  children: ReactNode;
}

const ProtectedRoute = ({ children }: ProtectedRouteProps) => {

  const [loading, setLoading] = useState(true);
  const [signed, setSigned] = useState(false);
  const {setUserData} = useUserDataContext();

  useEffect(() => {

    async function checkLogin(){
      onAuthStateChanged(auth, (user) => {

        if(user){

          setUserData(user);

          setLoading(false);
          setSigned(true);
          return;
        }

        setLoading(false);
        setSigned(false);
      })
    }

    checkLogin();

  }, []);

  if(loading){
    return(<div></div>);
  }

  if(!signed){
    return <Navigate to='/login'></Navigate>
  }

  return children;

};

export default ProtectedRoute;

每次打开受保护路由时，该组件都会通过useEffect调用onAuthStateChange()。用户刷新页面或跳转到新的受保护路由时，onAuthStateChange()都会被再次调用。请问这会引发内存泄漏问题吗？若会，最佳修复方案是什么？

内存泄漏风险分析 #

会引发内存泄漏。onAuthStateChanged会向Firebase Auth实例注册一个状态监听函数，当ProtectedRoute组件卸载（比如用户跳转到非保护路由）时，如果没有主动取消这个监听，该函数会一直绑定在Auth实例上，导致组件实例无法被垃圾回收。多次进入受保护路由后，会积累大量无效监听，不仅浪费内存，还可能触发重复的状态更新操作。

最佳修复方案 #

利用onAuthStateChanged返回的取消订阅函数，在useEffect的清理逻辑中取消监听，确保组件卸载时清理掉所有绑定的资源。同时优化代码逻辑，避免不必要的包装函数和依赖遗漏。

修改后的完整代码：

import { Navigate } from "react-router-dom";
import { ReactNode, useEffect, useState } from "react";
import { useUserDataContext } from '../../context/UserDataContext';

//Firebase Logic
import { auth } from '../../config/firebaseConfig';
import { onAuthStateChanged } from "firebase/auth";

interface ProtectedRouteProps {
  children: ReactNode;
}

const ProtectedRoute = ({ children }: ProtectedRouteProps) => {

  const [loading, setLoading] = useState(true);
  const [signed, setSigned] = useState(false);
  const { setUserData } = useUserDataContext();

  useEffect(() => {
    // 注册监听并获取取消订阅函数
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUserData(user);
        setSigned(true);
      } else {
        setSigned(false);
      }
      setLoading(false); // 合并重复的setLoading调用
    });

    // 组件卸载时执行清理，取消监听
    return () => unsubscribe();
  }, [setUserData]); // 将setUserData加入依赖数组，避免闭包问题与Hook警告

  if (loading) {
    return <div></div>;
  }

  return signed ? children : <Navigate to='/login' />;
};

export default ProtectedRoute;

关键优化点说明 #

• 清理监听：通过useEffect的返回函数调用unsubscribe()，确保组件卸载时移除Firebase Auth的状态监听，彻底避免内存泄漏。
• 移除冗余包装：onAuthStateChanged是同步注册的，不需要用async函数包裹，直接调用即可简化代码。
• 合并重复逻辑：将setLoading(false)移到分支外部，减少重复代码。
• 补全依赖数组：setUserData是Context提供的 setter 函数，本身是稳定的，加入依赖数组可以避免React Hook的依赖警告，同时保证闭包能获取到最新的函数引用。

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