title: Value of state within React context not updating when used in another component
body: <p>I'm trying to use context in conjunction with state to do role-based routing with React router. Upon clicking sign in, the user data is fetched from the backend API and set as state within the context provider.</p>
  <p>The issue is that when I then attempt to use that state in my authorization component that I wrap around my route, the state isn't updated (I presume). What am I missing here?</p>
  <p><a href="https://codesandbox.io/s/clever-mopsa-yffzvk?file=/src/App.js" rel="nofollow noreferrer">Codesandbox</a></p>
  <p>The context:</p>
  <pre><code>const CurrentUserContext = createContext({});
  
  export const CurrentUserProvider = ({children}) =&gt; {
      const [currentUser, setCurrentUser] = useState(null)
      const [currentUserRole, setCurrentUserRole] = useState(null)
      const requestOption = {
          method: 'GET',
          headers: {
              'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json',
              'Authorization': `Token ${localStorage.getItem('token')}`
          }
      }
      const fetchCurrentUser = () =&gt; {
          fetch('http://127.0.0.1:8000/api/users-current/', requestOption)
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  console.log('called')
                  setCurrentUser(data['user'])
                  setCurrentUserRole(data['role'])
              })
              .catch(error =&gt; console.log(error))
      }
  
      return (
          &lt;CurrentUserContext.Provider value={{
              setCurrentUser,
              setCurrentUserRole,
              currentUser,
              currentUserRole,
              fetchCurrentUser
          }}&gt;
              {children}
          &lt;/CurrentUserContext.Provider&gt;
      )
  }
  
  
  export const useAuth = () =&gt; useContext(CurrentUserContext)
  </code></pre>
  <p>The sign in component where I run fetchCurrentUser on sign in to set the state etc:</p>
  <pre><code>export default function SignIn() {
      
      const { fetchCurrentUser } = useAuth()
      const handleSubmit = (event) =&gt; {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          const credentials = btoa(`${data.get('username')}:${data.get('password')}`);
  
          const requestOptions = {
              method: &quot;POST&quot;,
              credentials: 'include',
              headers: {
                  'Accept': 'application/json, text/plain, */*',
                  'Content-Type': 'application/json',
                  &quot;Authorization&quot;: `Basic ${credentials}`
              },
              body: JSON.stringify({})
  
          }
          fetch('http://127.0.0.1:8000/api/login/', requestOptions)
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  localStorage.setItem('token', data['token'])
                  localStorage.setItem('role', data['role'])
              })
              .then(fetchCurrentUser())
              .catch(error =&gt; console.log(error))
  
      }
  </code></pre>
  <p>The component where I'm trying to access the currentUser state:</p>
  <pre><code>import { useLocation, Navigate, Outlet } from &quot;react-router&quot;;
  import { useAuth } from &quot;./CurrentUserContext&quot;
  
  const RequireAuth = () =&gt; {
  
      const { currentUser } = useAuth()
      const location = useLocation()
  
      return (
          currentUser
          ? &lt;Outlet /&gt;
          : &lt;Navigate
                  to=&quot;/&quot;
                  state={{ from: location }}
                  replace
              /&gt;
      )
  }
  
  export default RequireAuth;
  </code></pre>
  <p>And finally my routes:</p>
  <pre><code>export default function App() {
      return (
          &lt;CurrentUserProvider&gt;
          &lt;DialogProvider&gt;
              &lt;Router&gt;
                  &lt;Routes&gt;
                      &lt;Route element={&lt;RequireAuth/&gt;}&gt;
                          &lt;Route path=&quot;roles&quot; element={&lt;DashboardContent role={true}/&gt;}/&gt;
                      &lt;/Route&gt;
                      &lt;Route path=&quot;/&quot; element={&lt;SignIn/&gt;}/&gt;
                  &lt;/Routes&gt;
              &lt;/Router&gt;
          &lt;/DialogProvider&gt;
          &lt;/CurrentUserProvider&gt;
  </code></pre>
  <p>If I navigate to roles after signing in I'm just redirected to the sign in page again since currentUser is null.</p>