Rerendering the screen after changing a state

Question

I have a problem with useState and the fact that it doesn't rerender the screen after a state change :

For example, when the user logs in, I get the cookie via my api, but the main page doesn't load automaticaly, I need to do a ctrl + s in my vscode file to "update" the state change and thus change the page Same problem if the user wants to disconnect, the user must either change the page to "update" the state, or I must do a ctrl + s

App.js

const AuthStack = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(null);
  //Method to check if the session cookie exists on the device
  checkSessionCookie().then((isLoggedIn) => setIsLoggedIn(isLoggedIn));
  return (
    <Stack.Navigator initialRouteName="HomeScreen">
      {isLoggedIn ? (
        <>
          <Stack.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{
              headerShown: false,
            }}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name="RegisterScreen"
            component={RegisterScreen}
            options={{
              headerShown: false,
            }}
          />
        </>
      )}
    </Stack.Navigator>
  );
};

Answer 1

Use useEffect, because when components render

The first state gets initialized and the return code is executed and then useEffect is called bu this your code should be like

import {useState, useEffect} from 'react'
.
.
.
const AuthStack = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(null);
    const checkIsLogedIn = () => checkSessionCookie().then((isLoggedIn) => setIsLoggedIn(isLoggedIn));
useEffect(() => {
    checkIsLogedIn();
}, []);
return (
    <Stack.Navigator initialRouteName="HomeScreen">
    {isLoggedIn ? (
        <>
        <Stack.Screen
            name="TabNavigator"
            component={TabNavigator}
            options={{
            headerShown: false,
            }}
        />
        </>
    ) : (
        <>
        <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{
            headerShown: false,
            }}
        />
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
            headerShown: false,
            }}
        />
        <Stack.Screen
            name="RegisterScreen"
            component={RegisterScreen}
            options={{
            headerShown: false,
            }}
        />
        </>
    )}
    </Stack.Navigator>
);
};