tell render code to wait until object is recieved - reactjs

Question

I have the following code that grabs user from my firestore database and then returns some components based on some user logic, but because the call to the database is asynchronous, the logic will run before my user object is grabbed. Is there any way I can tell the if-statements to run after user is grabbed with my useEffect().
For example, console.log(user.isSeller) initially is undefined and then turns into true once the data is recieved.
function StorefrontPage(props) {
const auth = useAuth();
const router = useRouter();
const [user, setUser] = useState({});
const uid = auth.user && auth.user.uid;
useEffect(() => {
uid && getUser(uid).then(currentUser => {
setUser(currentUser);
})
}, [auth])
console.log(user.isSeller);
//logic with user object
if (uid) {
if (user.isSeller) {
if (props.sellerId === uid) {
return (
<div>
<Storefront sellerId={props.sellerId}></Storefront>
<style jsx>{
"background-image:linear-gradient(to bottom, #ffffff, #D0D8FD);"
}</style>
</div>
);
}
else {
return (
<div>
<PublicStorefront sellerId={props.sellerId}></PublicStorefront>
<style jsx>{
"background-image:linear-gradient(to bottom, #ffffff, #D0D8FD);"
}</style>
</div>
)
}
}
else {
router.push(`/buyersportal/${auth.user.uid}`)
return (
<div>
<p>
Sending you to the buyer's Portal.
</p>
</div>
)
}
}
else {
return (
<div>
<PublicStorefront sellerId={props.sellerId}></PublicStorefront>
</div>
)
}
}
export default StorefrontPage;
Any idea if there are some functions I can use to make it wait until user is called?

Answer 1

Typically the pattern to solve this is with an isLoading state
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true); // set loading to true again in case auth gets updated
uid && getUser(uid).then(currentUser => {
setUser(currentUser);
setIsLoading(false);
})
}, [auth])
then you can do conditional rendering like so:
if (isLoading) return <LoadingSpinner/>
However if auth never gets updated you can also initialise user to be null:
const [user, setUser] = useState(null);
and then just check if the user exists or not with
if (user === null) return <LoadingSpinner/>

Answer 2

Set user as 'undefined' or 'null' and Just return a loader (or whatever you want as long as it is jsx) while you fetch your data :
if(!user){
return <Loader />
}
// your logic if condition above isn't matched
When user will be updated your component will be re-rendered