title: What happens if state is updated multiple times?
body: <p>When I run the code below, I expected the counter to be set to zero and start again like <code>1..2..3</code> and so on.</p>
  
  <p>But when I click reset (on 5) it goes like <code>0..6..1..7..2..</code> and so on.</p>
  
  <p>Why does this happen? What am I missing here? Thanks.</p>
  
  <pre><code>const App = (props) =&gt; {
    const [counter, setCounter] = useState(0)
    setTimeout(
      () =&gt; setCounter(counter + 1),
      1000  
    )
    return (
      &lt;div&gt;
        &lt;h1&gt;{counter}&lt;/h1&gt;
        &lt;button onClick={()=&gt;setCounter(0)}&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>