title: Why is setState printing out the final state value only in the functional setState?
body: <pre><code>import React from 'react';
  
  class Add extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              count: 0
          };
      }
  
      componentDidMount() {
          console.log('componentDidMount called');
      }
  
      componentDidUpdate(prevProps, prevState) {
          console.log('componentDidUpdate called');
      }
  
      increment() {
  
          this.setState(prevState =&gt; ({
              count: prevState.count + 1
          }), () =&gt; {
              console.log('callback ' + this.state.count)
          });
  
          console.log('not a callback ' + this.state.count);
      }
  
      incrementFive() {
          this.increment();
          this.increment();
      }
  
      render() {
          console.log('render called');
          return (
              &lt;div&gt;
                  &lt;h2&gt;count is {this.state.count}.&lt;/h2&gt;
                  &lt;button onClick={() =&gt; this.incrementFive()}&gt;Increment&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Add;
  </code></pre>
  <p>click <code>Increment</code> button. console logs:</p>
  <pre><code>not a callback. count: 0
  not a callback. count: 0
  render called
  componentDidUpdate called
  callback. count: 2  //why is it 2 here instead of 1
  callback. count: 2
  </code></pre>
  <p>I was expecting:</p>
  <pre><code>not a callback. count: 0
  not a callback. count: 0
  render called
  componentDidUpdate called
  callback. count: 1 
  callback. count: 2 
  </code></pre>
  <p>I understand <code>setState</code> behaves in async way, but I couldn't understand why <code>setState</code> only prints the final state value in the callback. If we provide a callback, it is executed right after the state is updated. Here when we click <code>Increment</code> button, the <code>count</code> is set to 1 and the callback should have printed out <code>count: 1</code>, but I see its only printing the final state value, i.e <code>2</code>.</p>