title: Why's the button displayed only when refreshing the page?
body: <p>I want the logout button to show up only when the user's logged in.  It kind of works now but it's not working the way it should.</p>
  <p>With the code below, the logout button shows up when the user's logged in only if the page's refreshed.  That's because upon the <code>&lt;App/&gt;</code> component being loaded, the <code>&lt;Navbar/&gt;</code> component mounted along with it.</p>
  <p>But how can I make it so that even if <code>&lt;Navbar/&gt;</code>'s loaded, it can still be possible to manipulate when the button can appear based on if the auth token is not null?</p>
  <p>Here's App.js:</p>
  <pre><code>const App = () =&gt; {
  let [logoutButtonFlag, setLogoutButtonFlag] = useState(false);
  let authToken = localStorage.getItem('token');
  
  useEffect(() =&gt; {
      if (authToken !== null) {
          setLogoutButtonFlag(true);
      } 
  }, [authToken]);
  
  return (
      &lt;&gt;
        &lt;Navbar logoutButtonFlag={logoutButtonFlag}/&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Here's Navbar.js:</p>
  <pre><code>const Navbar = (props) =&gt; {
      return ( 
        {!props.logoutButtonFlag ? null : &lt;button className=&quot;learn-more&quot;&gt;Logout&lt;/button&gt;}
      );
  };
  
  export default Navbar;
  </code></pre>