title: Why does calling react setState method not mutate the state immediately?
body: <p>I'm reading <a href="https://facebook.github.io/react/docs/forms.html">Forms</a> section of <a href="/questions/tagged/reactjs" class="post-tag" title="show questions tagged &#39;reactjs&#39;" rel="tag">reactjs</a> documentation and just tried this code to demonstrate <code>onChange</code> usage (<a href="http://jsbin.com/zilofo/edit?html,js,console,output">JSBIN</a>).</p>
  
  <pre><code>var React= require('react');
  
  var ControlledForm= React.createClass({
      getInitialState: function() {
          return {
              value: "initial value"
          };
      },
  
      handleChange: function(event) {
          console.log(this.state.value);
          this.setState({value: event.target.value});
          console.log(this.state.value);
  
      },
  
      render: function() {
          return (
              &lt;input type="text" value={this.state.value} onChange={this.handleChange}/&gt;
          );
      }
  });
  
  React.render(
      &lt;ControlledForm/&gt;,
    document.getElementById('mount')
  );
  </code></pre>
  
  <p>When I update the <code>&lt;input/&gt;</code> value in the browser, the second <code>console.log</code> inside the <code>handleChange</code> callback prints the same <code>value</code> as the first <code>console.log</code>, Why I can't see the result of <code>this.setState({value: event.target.value})</code> in the scope of <code>handleChange</code> callback?</p>