title: setState being called multiple times after await
body: <p>I've written a test case in <a href="https://codepen.io/anon/pen/oPRXxd#anon-login" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>Run the test by clicking the button, then see the result from Browser Console.</p>
  
  <p>You can see from the console log that even I called <code>setState</code> multiple times <strong>before</strong> <code>await</code>, it will only update the component once. </p>
  
  <p>But if I call <code>setState</code> multiple times <strong>after</strong> <code>await</code>, it will update the component multiple times too.</p>
  
  <p>Any idea why is this happening?</p>
  
  <p>Code:</p>
  
  <pre><code>/*
   * A simple React component
   */
  class Application extends React.Component {
  
    state = {
      value: 0
    }
  
    onClickHandler = (e) =&gt; {
      this.runAsyncFunc();
    }
  
    runAsyncFunc = async() =&gt; {
      console.log('BEFORE AWAIT');
      this.setState({ value: 1 });
      this.setState({ value: 1 });
      this.setState({ value: 1 });
  
      await setTimeout(()=&gt;{}, 2000);
  
      console.log('AFTER AWAIT');
      this.setState({ value: 1 });
      this.setState({ value: 1 });
      this.setState({ value: 1 });
    }
  
    componentDidUpdate(prevProps, prevState, snapshot) {
      console.log('updated');
    }
  
    render() {
      return &lt;div&gt;
        &lt;p&gt;{this.state.value}&lt;/p&gt;
        &lt;button onClick={this.onClickHandler}&gt;RUN TEST&lt;/button&gt;
        &lt;p&gt;Please check from Browser Console's Log&lt;/p&gt;
      &lt;/div&gt;;
    }
  }
  
  /*
   * Render the above component into the div#app
   */
  React.render(&lt;Application /&gt;, document.getElementById('app'));
  </code></pre>