title: asynchronous context with useEffect in React
body: <p>im trying to create an api request with the header value, that is received from a context component. However, as soon as the page component is loaded, it throws an <code>Cannot read property '_id' of null</code> exception. Is there a way to run the useEffect function, as soon as the context is loaded?</p>
  <p><strong>main component:</strong></p>
  <pre><code>import React, { useState, useEffect, useContext } from &quot;react&quot;;
  import &quot;./overview.scss&quot;;
  
  /* COMPONENTS */;
  import axios from 'axios';
  import { GlobalContext } from '../../components/context/global';
  
  const Overview = () =&gt; {
    const [bookings, setBookings] = useState([]);
    const [loaded, setLoaded] = useState(false);
  
    const [user, setUser] = useContext(GlobalContext);
  
    useEffect(() =&gt; {
        axios
        .get(`/api/v1/bookings/user/${user._id}`)
        .then(res =&gt; setBookings(res.data))
        .catch(err =&gt; console.log(err))
        .finally(() =&gt; setLoaded(true));
    }, [user]);
  </code></pre>
  <p><strong>context component:</strong></p>
  <pre><code>import React, {useState, useEffect, createContext} from 'react';
  import jwt from 'jsonwebtoken';
  
  /* GLOBAL VARIABLES (CLIENT) */
  export const GlobalContext = createContext();
  
  export const GlobalProvider = props =&gt; {
  
      /* ENVIRONMENT API URL */
      const [user, setUser] = useState([]);
  
      useEffect(() =&gt; {
          const getSession = async () =&gt; {
              const user = await sessionStorage.getItem('authorization');
              setUser(jwt.decode(user));
      }
      getSession();
      }, [])
  
      return (
          &lt;GlobalContext.Provider value={[user, setUser]}&gt;
              {props.children}
          &lt;/GlobalContext.Provider&gt;
      );
  };
  </code></pre>