title: ReactJS: why can you pass a function to setState() to trigger a synchronous update?
body: <p>I was reading the page on React's docs about State and Lifecycle:</p>
  <p><a href="https://reactjs.org/docs/state-and-lifecycle.html" rel="nofollow noreferrer">https://reactjs.org/docs/state-and-lifecycle.html</a></p>
  <p>And I don't understand why you can pass a function to &quot;setState&quot; to make state updates synchronous.</p>
  <p>In other words, according to the docs:</p>
  <pre><code>this.setState({ counter: this.state.counter + this.props.increment, });
  </code></pre>
  <p>Might update the counter when it's executed... or it might not. But this:</p>
  <pre><code>this.setState((state, props) =&gt; ({ counter: state.counter + props.increment }));
  </code></pre>
  <p>Will always update the counter.</p>
  <p>Why? What's the difference between both? What does React do internally in that case? Does it execute the internal function first and then store the result to update the state later, when it's better for performance? Or does it update the state inmediately? And in that case, is that a good practice for performance? Or does it do something completely different?</p>