Reactjs 反应：将Firestore信息传递给组件的最佳方式？

无法找到一种有效的方法来设置用户的配置文件，然后根据需要将该数据传递给其他组件

下面是我当前逻辑的一个示例，虽然应用程序可以工作，但渲染效率不高。当我单击应用程序的各个部分时，每次都会重新呈现来自我的UserProfile组件的数据，导致文本从初始文本更改为呈现的数据文本

我认为，主要问题是用户配置文件和仪表板主页之间的通信。我是useEffect逻辑的新手，所以我可以想象这个钩子的设置效率低下

任何朝正确方向的帮助或轻推都将不胜感激

谢谢

AuthContext文件=>设置当前用户

import React，{useContext，useState，useffect}来自“React”；
从“firebase/app”导入firebase；
进口{
啊,，
登录谷歌，
createUserProfileDocument，
消防商店，
}来自“../firebase.utils”；
const AuthContext=React.createContext（）；
导出常量useAuth=（）=>{
返回useContext（AuthContext）；
};
导出常量AuthProvider=（{children}）=>{
const[currentUser，setCurrentUser]=useState（）；
const[loading，setLoading]=useState（true）；
const注册=（电子邮件、密码）=>{
返回auth.createUserWithEmailAndPassword（电子邮件，密码）；
};
const login=（电子邮件、密码）=>{
返回带有email和password（电子邮件，密码）的身份验证登录；
};
常量注销=（）=>{
setCurrentUser（空）；
返回auth.signOut（）；
};
const resetPassword=电子邮件=>{
返回auth.sendPasswordResetEmail（电子邮件）；
};
const updateEmail=电子邮件=>{
返回currentUser.updateEmail（电子邮件）；
};
const updatePassword=密码=>{
返回currentUser.updatePassword（密码）；
};
常量deleteProfile=（）=>{
currentUser.delete（）；
firestore.doc（`users/${currentUser.uid}`）.delete（）；
};
const updateName=displayName=>{
返回currentUser.updateProfile({
displayName:displayName，
});
};
const setName=displayName=>{
返回auth.currentUser.updateProfile({
displayName:displayName，
});
};
const googleSignIn=（）=>{
const google=signiWithGoogle（）；
setCurrentUser（谷歌）；
返回谷歌；
};
const updatePersonalSettings=data=>{
createUserProfileDocument（当前用户，数据）；
};
const updateAccountSettings=数据=>{
createUserProfileDocument（当前用户，数据）；
};
console.log（当前用户）；
useffect（（）=>{
const unsubscribe=auth.onAuthStateChanged（用户=>{
setCurrentUser（用户）；
设置加载（假）；
});
退订；
}, []);
常量值={
当前用户，
登录，
报名，
注销，
重置密码，
更新邮件，
更新密码，
更新名称，
集合名，
谷歌签名，
更新个人设置，
updateAccountSettings，
删除配置文件，
};
返回(
{！正在加载（&children}
);
};将此答案视为草稿，我已将其公开，以防您将其拼凑在一起，但我将在上午用一些文档对其进行更新

import { useState, useEffect } from 'react';
import { useAuth } from '../context/auth-context';
import { createUserProfileDocument } from '../firebase.utils';

const UserProfile = () => {
    const { currentUser } = useAuth();
    const [userInfo, setUserInfo] = useState();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (!currentUser) {
            // user is signed out
            setUserInfo(null);
            setLoading(false);
            return;
        }

        const userRef = /* ... */;
        setUserInfo(undefined); // clear stale data
        setLoading(true); // update loading status

        return userRef.onSnapshot({
            next(snapshot) {
                if (!snapshot.exists) {
                    userRef
                        .set({
                            /* new data */
                        })
                        .catch((err) => {
                            // TODO: Handle errors
                        });
                    return;
                }

                setUserInfo({
                    id: snapshot.id,
                    ...snapshot.data(),
                });
                setLoading(false);
            },
            error(err) {
                // TODO: Handle errors
            }
        });
    }, [currentUser]);

    return { userInfo }; // <-- this seems odd? missing loading?
};

export default UserProfile;

从'react'导入{useState，useffect}；
从“../context/auth context”导入{useAuth}；
从“../firebase.utils”导入{createUserProfileDocument}；
constuserprofile=（）=>{
const{currentUser}=useAuth（）；
const[userInfo，setUserInfo]=useState（）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
如果（！currentUser）{
//用户已注销
setUserInfo（空）；
设置加载（假）；
返回；
}
常量userRef=/*…*/；
setUserInfo（未定义）；//清除过时数据
setLoading（true）；//更新加载状态
返回userRef.onSnapshot({
下一步（快照）{
如果（！snapshot.exists）{
用户参考
.设置({
/*新数据*/
})
.catch（（错误）=>{
//TODO:处理错误
});
返回；
}
setUserInfo({
id:snapshot.id，
…snapshot.data（），
});
设置加载（假）；
},
错误（err）{
//TODO:处理错误
}
});
}，[currentUser]）；
return{userInfo}；//很抱歉回复太晚。我最终使用useContext api将useInfo从Firestore传递到各个组件。感谢您的帮助！