Javascript – How can I ensure variables are globally accessible and that they appear upon the user logging in?

The goal is to be able to access user data in any component upon the user logging in hence why <UserProvider> is wrapped around <App/>.

The issue’s that upon user successfully logging in, console.log("UserContext.js", res.data); logs the user’s data only when refreshing the page.

I know this is due to the async stuff going on behind the scenes but I can’t put my finger on what’s exactly the problem.

How can I fix it?

Here’s UserContext.js:

import { createContext, useContext, useState, useEffect } from 'react';
import ApiClient from "./ApiClient";

// Create the context
const UserContext = createContext();

// Custom hook to access the context
export const useUserContext = () => useContext(UserContext);

// Provider component to wrap the app and provide the context value
export const UserProvider = ({ children }) => {
    const [userId, setUserId] = useState('');
    const [name, setName]     = useState('');

    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${localStorage.getItem('token')}`
    };

    const fetchUserData = () => {
        ApiClient.get('get-user-data', {headers})
            .then(res => {
                console.log("UserContext.js", res.data);
                setUserId(res.data.UserID);
                setName(res.data.name);
            }).catch(err => {
            console.log(err);
        });
    }

    useEffect(fetchUserData,[])

    const contextValue = {
        userId,
        name,
        refreshUserData: fetchUserData // provide this function in context so that it can be called elsewhere
    };

    return (
        <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>
    );
};

Here’s Home.js:

const { refreshUserData } = useUserContext();

useEffect(() => {
    refreshUserData(); // first attempt
}, [theme]);

const handleLogin = (e) => {
    e.preventDefault();

    let dataLogin = {
        'email': email,
        'password': password
    };

    JSON.stringify(dataLogin);

    ApiClient.post('/login', dataLogin)
        .then(resp => {
            refreshUserData();
            history.push('/gallery'); // second attempt
        }).catch(error => {
        console.log(error);
    });


};

Here’s App.js:

import { UserProvider } from '../utilities/UserContext';

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <ProtectedRoute path="/gallery" component={Grid} />
                <Route path="/support" component={Support} />
                <Route path='/faq' component={FaqComp} />
            </Switch>
        </Router>
    );
}

const container = document.getElementById('example');
const root = createRoot(container);
root.render(<UserProvider><App/></UserProvider>);