understanding Event Loop using Firebase & React Native - firebase

Question

I'm building navigation to my App,
and I'm trying to give the navigation certain conditions on which to navigate around.
for example:haveFilledForm ? go to screen x : go to screen y
Those conditions are base on currentUser object which i get from Firebase Live DataBase
I configure a database.js with functions to use the live database, this is my Get User Function From Database:
export const getUser = async (uid) => {
firebase
.database()
.ref("users/" + uid)
.once("value")
.then((snap) => {
console.log(snap);
return snap;
});
};
Now, I manage different navigators from one main file called AppNavigator.js
In this file I'm try to get user Information and redirect user according to his props from the livedatabase which i get using firebase.auth()
Here is this page:
import * as React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { AuthStack } from "./AuthStack";
import { TabNavigator } from "./TabNavigator";
import PersonalInfo from "../screens/Auth/PersonalInfo";
import firebase from "../util/firebase";
import { AppLoading } from "expo";
import { getUser } from "../util/database";
export default class AppNavigator extends React.Component {
constructor(props) {
super(props);
this.state = {
user: "",
isLoading: true,
isFilled: false,
userInfo: {},
};
}
componentDidMount() {
firebase.auth().onAuthStateChanged(async (user) => {
if (user) {
console.log("logged in " + JSON.stringify(user.uid));
this.setState({ user });
} else {
console.log("not logged in");
this.setState({ user: "" });
this.setState({ isLoading: false });
}
getUser(this.state.user.uid)
.then((usr) => {
console.log(usr + " usr");
this.setState({ userInfo: usr });
this.setState({ isLoading: false });
})
.then(console.log("Imlast"));
});
}
render() {
if (this.state.isLoading) {
return <AppLoading />;
} else {
return (
<NavigationContainer>
{this.state.user ? (
this.state.userInfo ? (
<TabNavigator />
) : (
<PersonalInfo />
)
) : (
<AuthStack />
)}
</NavigationContainer>
);
}
}
}
the console.log output from this page is:
logged in "jmC6C5quEFSY0cFBfT8dqJe5E8a2"
Imlast
undefined usr
Object {
"admin": false,
"credit": 0,
"injuries": "",
"isProfileFilled": true,
"phone": "",
}
Now I can't seem to understand why Imlast is printed before the user object,
I understand that it got something to do with Event Loop and the fact that firebase is async.
So what is the right way to achieve this?
Eventually my end goal is to redirect user based on his "isProfileFilled" value from database

Answer 1

The reason Im last is printed before undefined usr is because .then accepts a callback function but you pass it a statement. So when the js interpreter goes over your code it executes the console.log immediately instead of waiting for it to be invoked when the promise is resolved. This how you can fix it:
getUser(this.state.user.uid)
.then((usr) => {
console.log(usr + " usr");
this.setState({ userInfo: usr });
this.setState({ isLoading: false });
})
.then(() => console.log("Imlast"));
//Instead of .then(console.log("Imlast"));
Changing state in react is asynchronous! Which means that when you call setState in the next line this.state isn't guaranteed to equal the new state.
I suggest you use the user object you receive in the callback like this: getUser(user.uid). In addition to that it seems redundant to save the user twice in the component state(user and userInfo).
Instead of saving an empty string for a user to represent there is no user, just initialize it as null in the ctor.
Lastly to show different components base on isProfileFilled you can do it like this:
render() {
const { user, isLoading } = this.state
if (isLoading) {
return <AppLoading />;
} else if(!user) {
return <AuthStack />
} else {
return <NavigationContainer>
{user.isProfileFilled ? <TabNavigator /> : <PersonalInfo />}
</NavigationContainer>
}
}