title: React: potential race condition for Controlled Components
body: <p>There is the following code in <a href="https://reactjs.org/docs/forms.html#controlled-components" rel="noreferrer">the React tutorial</a>:</p>
  
  <pre><code>class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A name was submitted: ' + this.state.value);
      event.preventDefault();
    }
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;label&gt;
            Name:
            &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
          &lt;/label&gt;
          &lt;input type="submit" value="Submit" /&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p>There is also <a href="https://reactjs.org/docs/react-component.html#setstate" rel="noreferrer">a warning</a> about the <em>setState</em> method:</p>
  
  <blockquote>
    <p><em>setState()</em> does not always immediately update the component. It may
    batch or defer the update until later. This makes reading <em>this.state</em>
    right after calling <em>setState()</em> a potential pitfall.</p>
  </blockquote>
  
  <p><strong>Q:</strong> Is the following scenario possible:</p>
  
  <ol>
  <li><em>handleChange</em> is fired;</li>
  <li><em>setState</em> is queued in the React;</li>
  <li><em>handleSubmit</em> is fired and it reads an obsolete value of <em>this.state.value</em>;</li>
  <li><em>setState</em> is actually processed.</li>
  </ol>
  
  <p>Or there is some kind of protection preventing such scenario from happening?</p>