title: Local storage is getting updated only after refreshing the page, is there any way to update it immediately after the setItem call
body: <p>In the user authentication page I'm trying to set the local storage with the response token that I'm obtaining from the API call, and then navigating to the home page, where I'm trying to show the profile details if the localstorage has a value, even though the local storage is updated, I'm able to use it only after refreshing the home page, So I want to update the local storage immediately before I enter the Home page, so that there is no need to refresh, I'm not using redux so can anyone help me without the use of redux.</p>
  <p>Thanks in advance.</p>
  <p><strong>login function</strong></p>
  <pre><code>login(event) {
  fetch('api link', {
    method: 'post',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username: this.state.username,
      password: this.state.password,
    }),
  })
    .then((Response) =&gt; Response.json())
    .then((result) =&gt; {
      console.log('result is: ', result);
      if (result.message === null) {
        this.setState({ response: 'Invalid Username' });
      } else if (result.message === 'INVALID_CREDENTIALS') {
        this.setState({ response: 'Invalid Password' });
      } else if (result.message === 'USER_DISABLED') {
        this.setState({ response: 'Not verified' });
      } else {
        localStorage.setItem('ResetToken', result.token);
      }
    });
  </code></pre>
  <p>}</p>
  <p><strong>Home page</strong></p>
  <pre><code>{localStorage.getItem('ResetToken') ? (
          &lt;IconButton
            aria-controls=&quot;simple-menu&quot;
            aria-haspopup=&quot;true&quot;
            color=&quot;inherit&quot;
            onClick={handleClick}
          &gt;
            &lt;AccountCircleIcon /&gt;
          &lt;/IconButton&gt;
        ) : null}
  </code></pre>