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.

score 2 · Accepted Answer · answered Nov 16 '16 at 05:02

2

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)
}

answered Nov 16 '16 at 05:02

Ved

11,837
5
42
60

This is only correct depending on what part of the component lifecycle is currently active. See my answer. – probablyup Feb 22 '17 at 06:46

score 1 · Answer 2 · answered Nov 16 '16 at 05:02

1

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.

answered Nov 16 '16 at 05:02

StateLess

5,344
3
20
29

This is incorrect if `setState()` is called inside an event handler. – probablyup Aug 08 '17 at 06:17
@probablyup can you elaborate? – StateLess Aug 08 '17 at 08:34
Look at my answer – probablyup Aug 08 '17 at 17:49

score 0 · Answer 3 · answered Nov 16 '16 at 05:05

0

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.

answered Nov 16 '16 at 05:05

probablyup

7,636
1
27
40

check out this https://stackoverflow.com/questions/36085726/setstate-in-reactjs-is-async-or-sync – StateLess Aug 09 '17 at 05:25

Will react setState immedietly set the state?

3 Answers3