Will react setState immedietly set the state?

Question

I am trying to store a value using setState, however I am setting the state and in next line I am trying to console.log it, I am not able to see the value in the console.

 getInitialState: function(){ return{ myCountry: "" } } var country = event.target.value; this.setState({"myCountry": country}); console.log(this.state.myCountry); //prints nothing console.log(event.target.value); 

When I surfed for this I saw that setState is asynchronous, but I am not able to understand.

Answer 1

You will not get the updated value of state just after calling setState(). This is because as soon as setState() is called view is re-rendered. So it is better to check the updated value inside render or add callback function to setState.
Example:

this.setState({"myCountry": country},function(){console.log(this.state.myCountry)});

Or,

render: function() {
    console.log(this.state.myCountry)
}

Answer 2

NO

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.

IF you want to check the updated state you can try logging it in render method as react will anyhow re-render once the state is changed.

Answer 3

The answer is it depends on when it is called. setState() is executed immediately when called inside an event handler. I believe it might also be synchronous before the component has mounted.

Basically every other time it will be called asynchronously.