Why Is setState() Asynchronous In React?

Or Is It Synchronous?

Harsha Vardhan
Nov 20, 2020 · 3 min read
Image for post
Image for post
Photo by bruce mars on Unsplash

The Problem

There is no guarantee of synchronous operation on setState() and calls may be batched for performance gains. It is easy to forget that the setState() is asynchronous, making it tricky for us to debug issues in your code. The setState() also does not return a Promise. Using async/await or anything similar will not work. There is also another case, where we tend to use multiple setState() functions within the same block, and there are times where the state isn’t properly updated.

Possible solution

Let’s have a look at an example of the problem:

...
state = {value: 5}
...
...
// --WRONG WAY-- //this.setState({value: this.state.value + 1})
console.log(this.state.value) // Prints 5 and not 6

The solution to write a better setState function is:

// --RIGHT WAY-- //this.setState((prevState) => ({
value: prevState.value +1}), () => {
console.log(this.state.value)});
// Provide a callback to setState as second argument

The right way to update the state and access the updated value is given above. We pass a callback function as a second argument to the setState() function which gets invoked after the state has been updated. It should also be noted that using a function as a first parameter to return an object is a very good way of writing React code, as you can get access to the current value of the state (prevState). It is also a good practice to use one setState() function in a block to avoid problems when the state is updated.

Why does this happen?

So, what’s actually sync or async are the effects of calling setState() in React — the reconciliation algorithm does the virtual DOM comparisons and calls render to update the real DOM.

React batches updates and flushes it out once per frame for performance reasons. However, in some cases React has no control over the batching, hence updates are made synchronously available, for example in AJAX, setTimeOut(), etc.

Conclusion

I hope you learned something new from this! Thanks for reading!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Harsha Vardhan

Written by

Engineer, Photographer, Tech Blogger. Builds products and writes for developers. I love to code and love to help others code :)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store