Why calling setState method doesn't mutate the state immediately?

Question

Ok, i'll try and make this quick because it SHOULD be an easy fix...

I've read a bunch of similar questions, and the answer seems to be quite obvious. Nothing I would ever have to look up in the first place! But... I am having an error that I cannot fathom how to fix or why its happening.

As follows:

class NightlifeTypes extends Component { constructor(props) {     super(props);      this.state = {         barClubLounge: false,         seeTheTown: true,         eventsEntertainment: true,         familyFriendlyOnly: false     }     this.handleOnChange = this.handleOnChange.bind(this); }  handleOnChange = (event) => {        if(event.target.className == "barClubLounge") {         this.setState({barClubLounge: event.target.checked});         console.log(event.target.checked)         console.log(this.state.barClubLounge)     } }  render() {     return (         <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>     ) } 

More code surrounds this but this is where my problem lies. Should work, right?

I've also tried this:

handleOnChange = (event) => {    if(event.target.className == "barClubLounge") {     this.setState({barClubLounge: !this.state.barClubLounge});     console.log(event.target.checked)     console.log(this.state.barClubLounge) } 

So I have those two console.log()'s, both should be the same. I'm literally setting the state to be the same as the event.target.checked in the line above it!

But it always returns the opposite of what it should.

Same goes for when I use !this.state.barClubLounge; If it starts false, on my first click it remains false, even though whether the checkbox is checked or not is based off of the state!!

It's a crazy paradox and I have no idea whats going on, please help!

Answer 1

Reason is setState is asynchronous, you can't expect the updated state value just after the setState, if you want to check the value use a callback method. Pass a method as callback that will be get executed after the setState complete its task.

Why setState is asynchronous ?

This is because setState alters the state and causes re rendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

From Doc:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

Using callback method with setState:

To check the updated state value just after the setState, use a callback method like this:

setState({ key: value }, () => {      console.log('updated state value', this.state.key) }) 

Check this:

class NightlifeTypes extends React.Component {     constructor(props) {        super(props);          this.state = {           barClubLounge: false,           seeTheTown: true,           eventsEntertainment: true,           familyFriendlyOnly: false        }     }       handleOnChange = (event) => {  // Arrow function binds `this`        let value = event.target.checked;          if(event.target.className == "barClubLounge") {             this.setState({ barClubLounge: value}, () => {  //here               console.log(value);               console.log(this.state.barClubLounge);               //both will print same value           });                  }     }       render() {        return (            <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>        )     }  }    ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>    <div id='app'/>