title: this.state inside setState ReactJS
body: <p>So I have some confusion regarding the async nature of setState in ReactJS.
  As per React docs, you shouldn't use this.state inside setState(). But if I have a counter as a state and i want to update it on click like this:</p>
  
  <pre><code>class App extends React.Component {
      state = { counter: 0 }
  
      onClick = () =&gt; {
          this.setState({counter: this.state.counter + 1})
      }
  
      render() {
          return (
            &lt;div&gt;
              &lt;div&gt;{this.state.counter}&lt;/div&gt;
              &lt;p onClick={this.onClick}&gt;Click me&lt;/p&gt;
            &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>This works as expected. So why is this code wrong? </p>
  
  <p>UPDATE: I know that setState is async, and it accepts a callback which has previous state as an argument, but I am not sure why I should use it here? I want to refer to the old state inside setState, so why should I use the callback function in this case? Whenever <code>this.setState()</code> is executed, <code>this.state</code> inside it will always refer to the old state, and its value will be changed to the new state only after setState has finished executing, not while it is executing. </p>