title: why is the value of state evaluated only once in asynchronous function?
body: <p>Why is the value of count evaluated only once if called like <code>setCount(count + 1)</code> if the code is asyonchronous?<br>
  When you press the button <code>Increment Count Twice Async Naive</code> it triggers two <code>timeOut()</code>, one with 500ms delay and other with 1000ms delay. So, I thought that since the first <code>timeOut</code> triggers a re-render through <code>setCount(count + 1)</code>, the value of count should be updated in the second <code>timeOut</code>? Since 500ms is plenty of time to execute the operation and a re-render should cause <code>count</code> to be updated at the time the function of the second <code>timeOut</code> is invoked.</p>
  
  <p>The second button <code>Increment Count Twice Async Robust</code> works correctly if you pass a function to <code>setCount</code>. So if count is one, it becomes 3. Why is the state evaluated at time of invocation unlike the previous button?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  useEffect(() =&gt; {
      if (triggerAsyncIndex &gt; 1) {
        setTimeout(() =&gt; {
          setCount(count + 1);
        }, 500);
      }
    }, [triggerAsyncIndex]);
    useEffect(() =&gt; {
      if (triggerAsyncIndex &gt; 1) {
        setTimeout(() =&gt; {
          setCount(count + 1);
        }, 1000);
      }
    }, [triggerAsyncIndex]);
    useEffect(() =&gt; {
      if (triggerRobustAsyncIndex &gt; 1) {
        setTimeout(
          () =&gt;
            setCount(prev =&gt; {
              return prev + 1;
            }),
          500
        );
      }
    }, [triggerRobustAsyncIndex]);
    useEffect(() =&gt; {
      if (triggerRobustAsyncIndex &gt; 1) {
        setTimeout(
          () =&gt;
            setCount(prev =&gt; {
              return prev + 1;
            }),
          1000
        );
      }
    }, [triggerRobustAsyncIndex]);
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Count: {count}&lt;/h1&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment Count&lt;/button&gt;
        &lt;br /&gt;
        &lt;button onClick={() =&gt; setTriggerAsyncIndex(triggerAsyncIndex + 1)}&gt;
          Increment Count Twice Async Naive
        &lt;/button&gt;
        &lt;br /&gt;
        &lt;button
          onClick={() =&gt; setTriggerRobustAsyncIndex(triggerRobustAsyncIndex + 1)}
        &gt;
          Increment Count Twice Async Robust
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>