Hice mi archivo context.js para probar si el usuario ha iniciado sesión:
export const myContext = createContext({}); export default function Context(props) { const [userObject, setUserObject] = useState(); useEffect(() => { axios.get("http://localhost:3030/getuser", { withCredentials: true }).then((res) => { if (res.data) { setUserObject(res.data); } }) }, []) return ( <myContext.Provider value={userObject}>{props.children}</myContext.Provider> ) }** todo funciona perfectamente y estoy listo para iniciar y cerrar sesión **, el único problema es cuando cuando inicio sesión y actualizo la página sigo viendo la página de inicio de sesión por un segundo (porque está haciendo la solicitud al backend) estoy usando mi contexto así en:
const App = () => { const userObject = useContext(myContext); console.log("userObject: ",userObject); return ( <div className="App"> {/* <Header /> */} <UserBubble /> <Home /> { userObject ? (<h1>Welcome {userObject.email}</h1>) : <Login /> } </div> ); }; export default App;así que, básicamente, el objeto de usuario se carga como indefinido o nulo antes de realizar la solicitud al backend y luego volverá a cambiar después de la respuesta para arreglar todo .
la pregunta es: ¿cómo puedo evitar que ocurra ese retraso y obtener el objeto de usuario con la respuesta sin demorar esos pocos segundos? Gracias **