title: React: Updated non-state variables in useEffect show old value
body: <p>The useeffect hook shows older values of a non-state variable that I am trying to access there. The non-state variable's value is being updated just before the state variable set method is called. What I am doing wrong here?</p>
  <pre><code>function Clock(){
    const [count, setCount] = React.useState(0);
    let custom = 1;
    const clickHandler = () =&gt; {
      custom = 0;
      setCount(1);
    }
    React.useEffect(()=&gt;{
      alert(custom);
    })
    return (&lt;div&gt;
        &lt;button onClick={clickHandler}&gt;Click Me&lt;/button&gt;
      &lt;/div&gt;);
  }
  
  function tick() {
    ReactDOM.render(
      &lt;Clock/&gt;,
      document.getElementById('root')
    );
  }
  tick();
  </code></pre>
  <p>The alert still prints the old value of the variable <code>custom</code>
  Why is useEffect unable to get the up-to-date value of the variable?</p>