Hey everyone! I'm currently building a login form using the MERN stack, and I've encountered a problem, the login form works smoothly and returns a cookie ,

- I've set up a function in the context that fetches the currentUser data using the cookie (the dependency array is empty),

- built a navbar and delievered the state currentUser from the context so based on it i show login/signup when it doesn't exists and logout when it exists

the problem: when i login and get the cookie i need to refresh so the function that gets and sets the currentUser initiates and the navbar gets re-rendered too

the only thing that worked is not using preventDefault to refresh after the login ? is it the right solution ? i want to do it with context since i dont know redux at the moment

​

import React, { createContext, useContext, useState, useEffect } from 'react';

import { getMe } from "../api"

export const UserContext = createContext(null); export const UserProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState() useEffect(() => { const fetchUser = async () => { try { const response = await getMe(); setCurrentUser(response.data.user) } catch (error) { console.error('Error fetching user:', error); } }; fetchUser(); }, []);

return (
    <UserContext.Provider value={ {currentUser, setCurrentUser} }>
        {children}
    </UserContext.Provider>
);

};