title: Can't read latest state variable in setInterval (Hooks)
body: <p>I suppose this is because how JS works, but you wouldn't have this problem with classes I suppose. In this code:</p>
  <pre><code>  let [open, setOpen] = React.useState(false);
    let [counter, setCounter] = React.useState(0);
  
    function handleClick() {
      setOpen(true);
  
      setInterval(() =&gt; {
        console.log(counter);
        setCounter(counter + 1);
      }, 2000);
    }
  </code></pre>
  <p>If I call handleClick <strong>once</strong> (e.g. click button), the value logged on console is always 0 (despite state being updated each time).</p>
  <p>This is probably because of the closure. But what if I wanted to see the most recent value of <code>counter</code> in such setup?
  With classes you could have done <code>this.state.counter</code> and it would read latest value.
  Is there some workaround with hooks?
  <a href="https://codesandbox.io/s/material-demo-r39ws" rel="nofollow noreferrer">demo</a>.</p>
  <hr />
  <p><em>Note</em>: I found <a href="https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval">this</a> question which asks basically the same. Somehow I didn't encounter it on initial search.</p>