title: React - Login Variables cached in the browser
body: <p>I'm quite new to React and trying to learn it but have a strong background in backends (java/nodejs/php/...)</p>
  
  <p>So first I wanted to create a login portal, basically 3 pages:
  - The homepage which redirects you to login if you are not authenticated
  - Login page
  - Register page</p>
  
  <p>The features are working (register/login/logout)
  My problem is on the Homepage, if I first log in with user1, I will see Hello user1. If I log out and log in with user2, I will still see user1.</p>
  
  <p>It seems that the variable is cached somehow by the browser.
  F5 refresh actually updates the value ... :/</p>
  
  <p>This is what I've done:</p>
  
  <p>In my app, I have this route:</p>
  
  <pre><code>&lt;Provider store={store}&gt;
        &lt;HashRouter&gt;
          &lt;Switch&gt;
            &lt;Route path="/login" name="Login" component={Login} /&gt;
            &lt;Route path="/register" name="Register" component={Register} /&gt;
            &lt;PrivateRoute path="/" name="Home" component={Layout} /&gt;
          &lt;/Switch&gt;
        &lt;/HashRouter&gt;
      &lt;/Provider&gt;
  </code></pre>
  
  <p>The provider configureStore is doing :</p>
  
  <pre><code>store.dispatch(requestUserInfo());
  </code></pre>
  
  <p>And this requestUserInfo() is something I created in the following class
  I get the token, decode it with jwt and render some user info:</p>
  
  <pre><code>import jwt_decode from 'jwt-decode'
  
  export const REQUEST_USER = "REQUEST_USER";
  export const USER_INFO = "USER_INFO";
  
  export function requestUserInfo() {
  if(localStorage.usertoken){
    const decoded = jwt_decode(localStorage.usertoken)
    let usertest = {
      "username": decoded.first_name + " " + decoded.last_name,
      "picture": "assets/img/avatars/test.png",
      "activity": 1
    } 
  
    return dispatch =&gt; {
  
        dispatch({
          type: USER_INFO,
          payload: usertest
        });
  
    };
  } else {
    return dispatch =&gt; {
        dispatch({
          type: USER_INFO,
          payload: {"username": "","picture": "","activity": 0}
        });
    };
  }
  }
  
  export default function isLogged() {
  let status = false
  
  if(localStorage.usertoken){
    try{
      if(jwt_decode(localStorage.usertoken)){
        status = true;
      }
    } catch(e){
      console.log(e)
    }
  
  }
  
  return status
  } 
  </code></pre>
  
  <p>When doing the logout, I remove the token by doing :
  localStorage.removeItem('usertoken')</p>
  
  <p><strong>Edit: When trying to do a 1st login in a private tab, nothing is shown, the variables are empty. Looks like my variables are set after the rendering maybe?</strong></p>
  
  <p><strong>Edit2: I put everything on github so it might be easier to debug: <a href="https://github.com/senechalm/learning-reactjs" rel="nofollow noreferrer">https://github.com/senechalm/learning-reactjs</a></strong></p>
  
  <p>Does anyone have any idea/suggestion on how to fix this issue/bug?</p>