title: ReactJS : Does this.setState have its effect immediately?
body: <p>I'm wondering if <code>this.setState</code> changes states immediately, because it doesn't seem to do so.</p>
  
  <p>To illustrate, let's assume that there is a checkbox....</p>
  
  <pre><code>class Example extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      switch: false
    };
    this.switch = this.switch.bind(this);
  }
  
  clickCoverSwitch(){
    console.log("Before clicking - ", this.state.switch);
    this.setState({switch: !this.state.switch});
    console.log("Now, the state is - ", this.state.switch);
  }
  
  render() {
      return (
         &lt;input onClick={this.clickCoverSwitch} defaultChecked={this.state.coverSwitch} type="checkbox"&gt;
         &lt;/input&gt;
      );
  }
  </code></pre>
  
  <p>In this example, the checkbox is off by default - which is OK.</p>
  
  <p>However, when the switch (i.e. checkbox) is clicked, I see the following messages in the console.</p>
  
  <p><code>Before clicking - false</code></p>
  
  <p><code>Now, the state is - false</code></p>
  
  <p>The second line is supposed to show <code>true</code>, because <code>this.state.switch</code> should have been changed through <code>this.setState({switch:  !this.state.switch})</code>.</p>
  
  <p>I'm not sure how I should interpret this.
  Any advice will be appreciated!</p>