React setState Asynchronous Behaviour

mrusman

Mr-Usman

Posted on October 24, 2020

React setState Asynchronous Behaviour

Most of the time, developers write code and it doesn't work as expected because their mental model works WRT to code they see or write but they actually don't know how Javascript V8 compiles or runs their code under the hood so they ended up in frustration or starting to blame the language in some odd way, anyways let's get started with setState how it really works!

here, I am assuming u know the basic understanding of how we can update the component State in React, or the same thing goes for the React Native.

1.Use setState with the object Approach

what happens if we try to use setState multiple times in a single function call and all of setState updating the same value?

Here the concept of Reconciliation comes into play so at run time React knows the state was being tried to update with for the same key from the state object so you will be surprised by seeing the updated value resulted from the only last setState function call and above ones have no any effect on the final result.

Example: https://codesandbox.io/s/infallible-aryabhata-752b5?file=/src/App.js

2.Use setState with the functional Approach

Vice versa from the case study point 1. when we pass(use) the function in the setState for the state updating the javascript engine or specifically in React will show the result of every setState call rather than only last call as seen in the above scenario.

Example: https://codesandbox.io/s/frosty-sound-vrp6n?file=/src/App.js

πŸ’– πŸ’ͺ πŸ™… 🚩
mrusman
Mr-Usman

Posted on October 24, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related