title: React state variable being overwritten (useState)
body: <p>I am having an issue where it seems my state variable is being overwritten by the default/initial value I set when calling useState(). I have <code>const [token, setToken] = useState(&quot;&quot;)</code>. I pass in the <code>setToken</code> function to my <em>Login</em> component, and when I log in I update the token via the <code>setToken</code> function.</p>
  <p>In my <strong>App.js</strong> I only want to render the Login component if the token is not set, otherwise, I redirect to a <strong>Post.js</strong> component. Once I log in my token is being set and I am being redirected to my <strong>Posts.js</strong> page, the problem is if I refresh the page the token is overwritten again to the initial value and I'm not sure why that is.</p>
  <p>My understanding is that useState() is only called on the initial render, otherwise the state is obtained from whatever is stored in state which since I called the <code>setToken</code> function, should be the state with the token, not an empty string.</p>
  <p>What am I missing?</p>
  <p><strong>App.js</strong></p>
  <pre><code>function App() {
    const [errors, setErrors] = useState([]);
    const [token, setToken] = useState(&quot;&quot;);
  
    
    console.log('token', token)
    return (
      &lt;Fragment&gt;
        &lt;Router&gt;
          &lt;Navbar /&gt;
          &lt;Route exact path=&quot;/&quot; component={Landing} /&gt;
          &lt;Container&gt;
            {!errors.length ? &lt;&gt;&lt;/&gt; : &lt;Alerts errors={errors} handleError={setErrors}/&gt; }
            &lt;Switch&gt;
              &lt;Route 
                exact path=&quot;/login&quot; 
                render={ token ? (props) =&gt; &lt;Redirect push to=&quot;/posts&quot; {...props} /&gt; : (props) =&gt; (&lt;Login error={setErrors} isLoggedIn={setToken} {...props} /&gt;)}
              /&gt;
              &lt;Route exact path=&quot;/posts&quot; 
              render={token ? (props) =&gt; &lt;Posts token={token} {...props} /&gt; : (props) =&gt; &lt;Redirect push to=&quot;/login&quot; {...props} /&gt;} /&gt;
            &lt;/Switch&gt;
          &lt;/Container&gt;
        &lt;/Router&gt;
      &lt;/Fragment&gt;
      
    );
  }
  </code></pre>
  <p><strong>Pertinent section of Landing.js</strong></p>
  <pre><code>const handleSubmit = async (e) =&gt; {
      e.preventDefault();
      const res = await login(email, password);
  
      if(res.status !== 200){
        props.error(res.data.errors);
      }else{
        props.error([])
        props.isLoggedIn(res.data.token)
      }
  
    }
  </code></pre>
  <p><strong>UPDATE:</strong>
  I did figure out how to do what I wanted to do, by storing my token in local storage. In my App.js I'm doing this now</p>
  <pre><code>function App() {
    const [errors, setErrors] = useState([]);
    const [token, setToken] = useState(null);
  
    useEffect(() =&gt; {
      setToken(window.localStorage.getItem(&quot;token&quot;));
    })
  </code></pre>
  <p>This is not overwriting my <em>token</em> state as it was initially, so it's doing what I want, but I'm still wondering what I was doing wrong in my original implementation?</p>