title: Why React useState with functional update form is needed?
body: <p>I'm reading <a href="https://reactjs.org/docs/hooks-reference.html#functional-updates" rel="noreferrer">React Hook documentation</a> about functional updates and see this quote: </p>
  
  <blockquote>
    <p>The ”+” and ”-” buttons use the functional form, because the updated
    value is based on the previous value</p>
  </blockquote>
  
  <p>But I can't see for what purposes functional updates are required and what's the difference between them and directly using old state in computing new state. </p>
  
  <p><strong>Why functional update form is needed at all for updater functions of React useState Hook?</strong> <strong>What are examples where we can clearly see a difference (so using direct update will lead to bugs)?</strong></p>
  
  <p>For example, if I change this example from documentation</p>
  
  <pre><code>function Counter({initialCount}) {
    const [count, setCount] = useState(initialCount);
    return (
      &lt;&gt;
        Count: {count}
        &lt;button onClick={() =&gt; setCount(initialCount)}&gt;Reset&lt;/button&gt;
        &lt;button onClick={() =&gt; setCount(prevCount =&gt; prevCount + 1)}&gt;+&lt;/button&gt;
        &lt;button onClick={() =&gt; setCount(prevCount =&gt; prevCount - 1)}&gt;-&lt;/button&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>to updating <code>count</code> directly:</p>
  
  <pre><code>function Counter({initialCount}) {
    const [count, setCount] = useState(initialCount);
    return (
      &lt;&gt;
        Count: {count}
        &lt;button onClick={() =&gt; setCount(initialCount)}&gt;Reset&lt;/button&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;+&lt;/button&gt;
        &lt;button onClick={() =&gt; setCount(count - 1)}&gt;-&lt;/button&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>I can't see any difference in behaviour and can't imagine case when count will not be updated (or will not be the most recent). Because whenever count is changing, new closure for <code>onClick</code> will be called, capturing the most recent <code>count</code>.</p>