title: component not re-rendering once user is set
body: <p>I'm using Context to keep track of the user.</p>
  <p>I've created the context:</p>
  <pre><code>import { createContext, useState } from &quot;react&quot;;
  
  export const UserContext = createContext();
  
  export function UserProvider(props) {
      const [user, setUser] = useState(null);
  
      return (
          &lt;UserContext.Provider value={{user, setUser}}&gt;
              {props.children}
          &lt;/UserContext.Provider&gt;
      )
  }
  </code></pre>
  <p>I've wrapped my app with the UserProvider. I have a component called Appbar, that displays whether a user logged in or not. If the user is logged in, it should show a signout button and if user isn't logged in, it should show a signin button.</p>
  <p>The Appbar component:</p>
  <pre><code>export default function Appbar(props) {
      const classes = useStyles();
      const {user, setUser} = useContext(UserContext);
  
      return (
          &lt;AppBar className={classes.appbar} color=&quot;primary&quot; position=&quot;static&quot;&gt;
          &lt;Toolbar className={classes.tab}&gt;
          &lt;Typography variant=&quot;h6&quot;&gt;
              Duncc Blogs
              &lt;/Typography&gt;
                  {user ? &lt;Button color=&quot;inherit&quot; onClick={async () =&gt; {
                      const googleUser = signOut;
                      setUser(googleUser);
                  }}&gt;Logout&lt;/Button&gt; : &lt;Button color=&quot;inherit&quot; onClick={async () =&gt; {
                          const googleUser = await signIn;
                          setUser(googleUser);
                      }} className=&quot;button&quot;&gt;Login&lt;/Button&gt;}
          &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
      )
  }
  </code></pre>
  <p>The problem is, when the user has successfully signed in, I want my Appbar component to re-render, so the signout button is visible. But this doesn't happen.</p>
  <p>Can someone tell me why? Am I not using the Context API properly?</p>