title: Why React setState can be asynchronous?
body: <p>I am aware <code>setState</code> can be synchronous or asynchronous:</p>
  
  <blockquote>
    <p><code>setState()</code> does not immediately mutate this.state but creates a
    pending state transition. Accessing <code>this.state</code> after calling this
    method can potentially return the existing value.</p>
    
    <p>There is no guarantee of synchronous operation of calls to <code>setState</code>
    and calls may be batched for performance gains.</p>
  </blockquote>
  
  <p>Right, and I understand the function executes a few things:</p>
  
  <ul>
  <li>Update the actual value in the state</li>
  <li>Update the virtual and real DOM as needed with the new state values</li>
  </ul>
  
  <p>But what I'm trying to figure out is why this is sometimes synchronous and sometimes asynchronous? What happens behind the scene? Why can't it be always synchronous?</p>
  
  <p>Thanks.</p>