Why is my code causing my component to show up for a split second? - react-native

Question

I am developing an application for a religious group, and I just implemented AsyncStorage to store the JWT received from my back end. My back end is working perfectly, and I'm able to store and delete the token on login/register and logout. But when the app is refreshed, it shows the login screen for a split second.
Here is my action:
export const fetchUser = () => {
return async (dispatch) => {
const token = await getData();
const reqObj = {
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
},
};
if (token) {
dispatch({ type: "IS_LOADING_JWT" });
fetch(`http://${IP_ADDRESS}:4000/api/v1/auto_login`, reqObj)
.then((resp) => resp.json())
.then((current_user) => {
dispatch({ type: "LOGIN_SUCCESS", user: current_user });
dispatch({ type: "NOT_LOADING_JWT" });
});
}
};
};
Here is my helper function to retrieve the stored value-key pair:
const getData = async () => {
try {
const token = await AsyncStorage.getItem("jwt");
return token;
} catch (error) {
console.log(error);
}
};
This is my user reducer:
const user = (state = null, action) => {
switch (action.type) {
case "LOGIN_SUCCESS":
return action.user;
case "LOGOUT_USER":
return null;
default:
return state;
}
};
export default user;
Here is my 'authentication flow' with my stack navigator:
class Navigator extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<NavigationContainer>
{this.props.jwtLoader ? (
<Stack.Navigator
screenOptions={{
title: "",
headerShown: false,
animationEnabled: false,
}}
>
<Stack.Screen name="loader" component={LoaderScreen} />
</Stack.Navigator>
) : !this.props.user ? (
<Stack.Navigator
screenOptions={{
title: "",
headerShown: false,
animationEnabled: false,
}}
>
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
) : (
<Stack.Navigator
screenOptions={{
title: "",
headerShown: false,
animationEnabled: false,
}}
>
<Stack.Screen name="Main" component={MainScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
);
}
}
My jwtLoader:
const jwtLoader = (state = false, action) => {
switch (action.type) {
case "IS_LOADING_JWT":
return true;
case "NOT_LOADING_JWT":
return false;
default:
return state;
}
};
export default jwtLoader;
My theory is that there is a delay on dispatching the action. That is why I believe my Login component shows for a split second.
I have already tried getting and setting my user during my SplashScreen load, but that doesn't work either.
Here is a demo video: Text

Answer 1

Can you try fetching user from the constructor instead of componentDidMount?