DEV Community

Cover image for How not to update states in React!!
Nehal Mahida
Nehal Mahida

Posted on • Updated on

How not to update states in React!!

How do you guys update your state if it depends on the previous value?

Simple!!

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter( counter + 1 );
}

...
Enter fullscreen mode Exit fullscreen mode

If you are doing the same as above, You are doing it wrong!! 😮

But my code works perfectly with the above syntax!! 😟

Yes, sometimes it works, sometimes it does NOT.

WHY?? 🤔

Because react schedules state updates asynchronously, It does not perform them instantly. So if your code has multiple state updates you might be depending on some outdated or incorrect values.

Here is an official statement from React team about this issue

this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Hmm, So what is the solution?

Here we go...

To handle this situation, react allows us to pass a function in setState, which will give us the previous value of a state.

Here react guarantees us that the value is always updated correctly. 🤩

...

const [counter, setCounter] = useState(0);

const updateCounter = () => {
  setCounter((prevState) => {
    // some logic 
    return prevState + 1; 
  });
}

...
Enter fullscreen mode Exit fullscreen mode

Tell me in a comment have you ever faced a problem because of state updates??

I would like to hear your feedback.

If you like this article like, share and mark 🔖 this article!

🏃‍♂️ Let's Connect 👇

🕊 Twitter : https://twitter.com/nehal_mahida (See you on Twitter 😃)

👨‍💻 Github: https://github.com/NehalMahida

Support 🤗

If you are enjoying my articles, consider supporting me with a coffee.☕

Top comments (15)

Collapse
 
andresausecha profile image
Andres Ausecha Mosquera

Usually the first one works fine, but sometimes when you have a state that updates very frequently the second one is the correct. Good post

Collapse
 
nehal_mahida profile image
Nehal Mahida

Thanks, glad you like it. 🤗
It means a lot 🙏🏻

Collapse
 
rehanpia profile image
Rehan Zaheer Zaheer ahmed

I want to connect web3 with react. Can u provide me a better guide to interect from react to a solidity smart contract through web3. Thank u

Collapse
 
nehal_mahida profile image
Nehal Mahida

For web3, I may not be the right person to ask but I can connect you with people who are good at it.

@vittostack @oliverjumpertz are the best to ask for 😃

Collapse
 
rehanpia profile image
Rehan Zaheer Zaheer ahmed

Thank you

Collapse
 
itscasey profile image
Casey 💎

Check out buildspace.so - they have cohort projects AND open source material, so you can skip the wait and just review their info in their repos

Collapse
 
nehal_mahida profile image
Nehal Mahida

Thanks for sharing, I hope it helps @rehanpia

Collapse
 
nehal_mahida profile image
Nehal Mahida

Thanks, man, You put great points 🙏🏻

Trust me it adds value to my post.

Regarding the title, Yes the first approach works most of the time.
But don't you think if programmers follow the second approach from starting itself, they don't need to worry about state updates ( asynchronous or synchronous) at the end?

As the world moves towards pair or group programming it is a good habit to make a RIGHT approach a default one. 🤗

Happy Coding!!

 
nehal_mahida profile image
Nehal Mahida

You are right. My article is all about when you need the previous value of the state then and then you need to use the callback function in setState otherwise it's fine.

Collapse
 
jafb321 profile image
Jose Antonio Felix

Thank you for the info Man! I didnt know this useState Hook situation

Collapse
 
nehal_mahida profile image
Nehal Mahida

I'm glad you like it 🤗

Let's spread the knowlege. 🚀

Happy Coding!!

Collapse
 
gustavovinife profile image
Gustavo Vinicius

Thanks for the post! Sometimes we forgot this small things in our code, then we got a big unperformed and not stable codebase.

Collapse
 
nehal_mahida profile image
Nehal Mahida

Purpose served 🙏🏻

Collapse
 
belidenikhil profile image
NikhilBelide

Great article buddy

Collapse
 
nehal_mahida profile image
Nehal Mahida

Glad you like it! 🤗