Tuve un problema con la actualización de la página en la aplicación de reacción con el uso de la API de contexto. Después de actualizar la página en mi consola, veo estos registros:

mi contexto obtiene datos de la API de descanso, pero solo la tercera vez, por lo que mi intervalo está vacío después de finalizar la actualización de la página: /

Aquí está mi componente con el uso de datos de la API de contexto.

Encabezado/index.tsx

 const { currentAccount } = useContext(AppContext); console.log("ACCOUNT: ", currentAccount); return ( <span>{currentAccount?.name}</span> );

Este es mi contexto de aplicación

ApplicationContext.tsx

 useEffect(() => { checkLogin(); }, []); const checkLogin = async () => { console.log("checkLogin"); setLoggedIn(false); const token = localStorage.getItem("session"); if (token) { const decode = jwt(token); const query = { id: decode["id"] }; const response: Account = await axios.get("/auth/account", query); setCurrentAccount(response); setLoggedIn(true); } else { setCurrentAccount(null); setLoggedIn(false); } }

Aquí también está mi enrutamiento desde App.tsx

 <AppContextProvider> {publicRouting.map(({ path, component }, i) => ( <Route key={i} path={path} component={component} /> ))} <Main> {privateRouting.map(({ path, component }, i) => ( <Route key={i} path={path} component={component} /> ))} </Main> </AppContextProvider>

¿Alguien puede decirme cómo renderizar el componente solo cuando los datos ya se obtuvieron de mi API de descanso? Todo esto está sincronizado, por lo que debo esperar hasta que los datos lleguen a la aplicación.

¡Gracias por cualquier ayuda!