title: react component detect changes only after a refresh
body: <p><strong>Navbar.js</strong></p>
  <pre><code>import React from 'react'
  import { useHistory } from 'react-router'
  import { useEffect } from 'react'
  import { useState } from 'react'
  
  const Navbar = () =&gt; {
      let history = useHistory()
      let [token, setToken] = useState('')
  
      const logout = () =&gt; {
          setToken(window.localStorage.removeItem('token'))
          history.push('/login')
      }
      
      useEffect(() =&gt; {
          setToken(window.localStorage.getItem('token'))
      })
  
      return (
          &lt;nav&gt;
              &lt;div className='nav-content'&gt;
                  &lt;h1&gt;LunCare &lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt;&lt;/h1&gt;   
  
                  {
                  token !== null ?
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href='' onClick={logout}&gt;Logout&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt; 
                  :
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href='/register'&gt;Register&lt;/a&gt;
                          &lt;a href='/login'&gt;Login&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt; 
                  }
              &lt;/div&gt;
          &lt;/nav&gt;
      )
  }
  
  export default Navbar
  </code></pre>
  <p><strong>Login.js (I dont think this is needed but ill include it)</strong></p>
  <pre><code>import React from 'react'
  import { useHistory } from 'react-router'
  
  const Login = () =&gt; {
      let user = {
          username: '',
          password: ''
      }
  
      let error = false
  
      let history = useHistory()
      
      const login = (e) =&gt; {
          e.preventDefault()
          fetch('http://127.0.0.1:8000/auth/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(user)
        }).then(res =&gt; {
            if(res.status === 200 || res.status === 201) {
                  return res.json()
            } else {
                  error = true
            }
        })
          .then(data =&gt; {
      
          window.localStorage.setItem('token', data.token);
          history.push('/')
        })
          .catch(err =&gt; {
  
          })
        
      }
      
      const updateForm = (e) =&gt; {
          e.preventDefault()
          user[e.target.name] = e.target.value
      }
  
      return (
          &lt;div className='form-container'&gt;
              &lt;form onSubmit={login}&gt;
                  &lt;div className='form-content'&gt;
                      &lt;h1&gt;Log In&lt;/h1&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type='text' name='username' onChange={updateForm}&gt;&lt;/input&gt;
                      &lt;label&gt;Password&lt;/label&gt;
                      &lt;input type='password' name='password' onChange={updateForm}&gt;&lt;/input&gt;
                      &lt;button type='submit'&gt;Log In&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      )
  }
  
  export default Login
  </code></pre>
  <blockquote>
  <p>Everything works as intended, but when I successfully login the navbar doesnt change accordingly... I need to refresh it so that it detects the token, how can I make it so that the navbar changes when the user gets redirected after logging in, any help is appreciated!</p>
  </blockquote>