Javascript – Why is setState in reactjs Async instead of Sync

asynchronousjavascriptmultithreadingreactjs

I have just found that in react this.setState() function in any component is asynchronous or is called after the completion of the function that it was called in.

Now I searched and found this blog (setState() State Mutation Operation May Be Synchronous In ReactJS)

Here he found that setState is async(called when stack is empty) or sync(called as soon as called) depending on how the change of state was triggered.

Now these two things are hard to digest

  1. In the blog the setState function is called inside a function updateState, but what triggered the updateState function is not something that a called function would know about.
  2. Why would they make setState async as JS is single threaded language and this setState is not a WebAPI or server call so has to be done on JS's thread only. Are they doing this so that Re-Rendering does not stop all the event listeners and stuff, or there is some other design issue.

Best Answer

You can call a function after the state value has updated:

this.setState({foo: 'bar'}, () => { 
    // Do something here. 
});

Also, if you have lots of states to update at once, group them all within the same setState:

Instead of:

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});
});

Just do this:

this.setState({
    foo: "one",
    bar: "two"
});
Related Topic