Why won't my header component update when the context changes?

Question

I'm building a React application and I'm having trouble getting my Header component to update when changes occur in the Auth Context Provider. However, the Dashboard component works as expected. If I hard refresh my app, I see the context changes applied in the Header but this is undesirable.

This is my Routes.js file.

const Routes = () => (
  <Router>
    <AuthProvider>
      <Header />
    </AuthProvider>
      <Suspense fallback={<LoadingSpinner />}>
        <Switch>
          <Route exact path='/public/welcome' component={Welcome} />
          <Route exact path='/public/about' component={About} />
          <AuthProvider>
            <PrivateRoute exact path='/secure/dashboard'>
              <Dashboard />
            </PrivateRoute>
          </AuthProvider>
        </Switch>
      </Suspense>
  </Router>

This is my Header.js file.

const Header = () => {

  const { auth, setAuth } = useAuth();
  const { isLoggedIn } = auth;

  return (
    <div id='header'>
     {isLoggedIn ? ( <div>I'm logged in!</div> ) : ( <div>I'm NOT logged in!</div> )};
    </div>
 );
};

export default Header;

For some reason the Header will not reflect the updates to the Auth context until the page is reloaded.

Answer 1

It seems you are rendering multiple auth contexts. You likely only need one that all consumers use.

Example:

const Routes = () => (
  <AuthProvider>
    <Router>
      <Header />
      <Suspense fallback={<LoadingSpinner />}>
        <Switch>
          <Route exact path='/public/welcome' component={Welcome} />
          <Route exact path='/public/about' component={About} />
          <PrivateRoute exact path='/secure/dashboard'>
            <Dashboard />
          </PrivateRoute>
        </Switch>
      </Suspense>
    </Router>
  </AuthProvider>
);