React顶层组件useMediaQuery失效，移入子组件或移除Firebase Auth代码可恢复

核心原因 #

你遇到的问题和容器组件尺寸属性无关，根源是每次App组件渲染时都会重复注册Firebase的onIdTokenChanged监听，导致组件陷入频繁重渲染循环，直接干扰了Material UI useMediaQuery的内部更新逻辑。

每次组件渲染（比如窗口resize触发useMediaQuery更新、state变化），都会重新执行firebase.auth().onIdTokenChanged注册新的监听，Firebase回调会反复触发setIsLoggedIn和setUser，引发组件无限重渲染，让useMediaQuery的resize响应完全失效。

修复方案 #

用React的useEffect包裹Firebase监听，确保只在组件挂载时注册一次，同时添加清理逻辑防止内存泄漏：

修改后的App组件代码：

import firebase from './firebase/Firebase';
import { useState, useEffect } from "react";
import { AuthContext } from "./contexts/AuthContext";
import useMediaQuery from "@mui/material/useMediaQuery";

function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(true);
    const [user, setUser] = useState(null);
    const isWideScreen = useMediaQuery('(min-width: 500px)', {noSsr: true});

    useEffect(() => {
        // 注册Firebase Auth监听，获取取消监听的函数
        const unsubscribe = firebase.auth().onIdTokenChanged(async (userObject) => {
            setIsLoggedIn(!!userObject);
            if (userObject) {
                const token = await userObject.getIdToken();
                await localStorage.setItem('accessToken', token);
            }
            setUser(userObject);
        });

        // 组件卸载时取消监听，避免内存泄漏
        return () => unsubscribe();
    }, []); // 空依赖数组，确保只在组件挂载时执行一次

    return (
        <AuthContext.Provider value={{ isLoggedIn , user }}>
            <>
                <span>{'isWideScreen:'+ isWideScreen.toString()}</span>
            </>
        </AuthContext.Provider>
    );
}

export default App;

为什么这样能解决问题 #

• useEffect配合空依赖数组，只会在组件首次挂载时注册一次Firebase监听，不会随着组件重渲染重复绑定，避免了频繁触发state更新导致的重渲染循环。
• 组件卸载时调用unsubscribe()取消监听，防止不必要的内存占用和回调触发。
• 之前移到子组件能正常工作，本质是子组件不会被顶层的频繁重渲染牵连，Firebase监听的影响范围被限制住了；而注释掉onIdTokenChanged后，没有了频繁的state更新，useMediaQuery的resize监听自然能正常运行。

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