title: React : Unable to set context state in app.js using useContext hook
body: <p>I am unable to set context state in my app.js, I get empty values in it somehow, but can access it in child component.</p>
  <p>I want to set context state in app.js whenever user comes to page so that I can use it throughout the application, for example show different headers based on whether user is logged in or not</p>
  <p><em><strong>SandBox URL as requested</strong></em> -&gt; <a href="https://codesandbox.io/s/quizzical-snyder-2qghj?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/quizzical-snyder-2qghj?file=/src/App.js</a></p>
  <p>I am following <a href="https://upmostly.com/tutorials/how-to-use-the-usecontext-hook-in-react" rel="nofollow noreferrer">https://upmostly.com/tutorials/how-to-use-the-usecontext-hook-in-react</a></p>
  <p><strong>app.js</strong></p>
  <pre><code>// import installed dependencies
  import React, { useEffect, useContext } from 'react';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  
  // import custom contexts
  import { AuthContext, AuthContextProvider } from './contexts/auth/AuthContext';
  
  // import pages
  import Homepage from './pages/homepage/Homepage';
  
  // import components
  import Footer from './components/footer/Footer';
  import Header from './components/header/Header';
  
  export default function App() {
      const [authState, setAuthState] = useContext(AuthContext);
  
      useEffect(() =&gt; {
          console.log(authState); // prints *{}*
          console.log(setAuthState); // prints *() =&gt; {}*
          const token = localStorage.getItem('token');
          const tokenIsExpired = parseInt(localStorage.getItem('tokenIsExpired'));
  
          if (!tokenIsExpired &amp;&amp; token.length) {
              setAuthState({
                  userIsLoggedin: true,
                  fName: 'test fname',
                  lName: 'test lname',
                  userName: 'testname'
              });
          } else {
              setAuthState({
                  userIsLoggedin: false,
                  fName: '',
                  lName: '',
                  userName: ''
              });
          }
  
          if (tokenIsExpired) {
              localStorage.setItem('token', '');
          }
      }, [authState, setAuthState]);
  
      return (
          &lt;Router&gt;
              &lt;AuthContextProvider value={[authState, setAuthState]}&gt;
                  &lt;div className='App'&gt;
                      &lt;Header /&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path='/'&gt;
                              &lt;Homepage /&gt;
                          &lt;/Route&gt;
                      &lt;/Switch&gt;
                      &lt;Footer /&gt;
                  &lt;/div&gt;
              &lt;/AuthContextProvider&gt;
          &lt;/Router&gt;
      );
  }
  </code></pre>
  <p><strong>AuthContext.js</strong></p>
  <pre><code>import React, { useState, createContext } from 'react';
  
  const AuthContext = createContext([{}, () =&gt; {}]);
  
  const AuthContextProvider = (props) =&gt; {
      const [authState, setAuthState] = useState({
          userIsLoggedin: false,
          fName: '',
          lName: '',
          userName: ''
      });
      return (
          &lt;AuthContext.Provider value={[authState, setAuthState]}&gt;
              {props.children}
          &lt;/AuthContext.Provider&gt;
      );
  };
  
  export { AuthContext, AuthContextProvider };
  </code></pre>
  <p><strong>UseAuthCOntext.js</strong></p>
  <pre><code>import { useContext } from 'react';
  import { AuthContext } from './AuthContext';
  
  const useAuthContext = () =&gt; {
      const [authState, setAuthState] = useContext(AuthContext);
  
      const login = (loginDetails) =&gt; {
          setAuthState({
              userIsLoggedin: true,
              fName: 'test fname',
              lName: 'test lname',
              userName: 'testname'
          });
      };
  
      const logout = () =&gt; {
          setAuthState({
              userIsLoggedin: false,
              fName: '',
              lName: '',
              userName: ''
          });
      };
  
      return { login, logout };
  };
  
  export default useAuthContext;
  </code></pre>
  <p><strong>Header.js</strong></p>
  <pre><code>// import installed dependencies
  import React, { useContext, useEffect } from 'react';
  
  // import components
  import LoggedOutHeader from './logged-out-header/LoggedOutHeader';
  import LoggedInHeader from './logged-in-header/LoggedInHeader';
  
  // import custom contexts
  import { AuthContext } from '../../contexts/auth/AuthContext';
  
  const Header = () =&gt; {
      const [authState, setAuthState] = useContext(AuthContext);
      console.log(authState);  //prints *{userIsLoggedin: false, fName: &quot;&quot;, lName: &quot;&quot;, userName: &quot;&quot;}*
      console.log(setAuthState); //prints *ƒ dispatchAction(fiber, queue, action) {...*
      const header = authState.isUserLoggedIn ? (
          &lt;LoggedInHeader /&gt;
      ) : (
          &lt;LoggedOutHeader /&gt;
      );
  
      return header;
  };
  
  export default Header;
  </code></pre>