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

...

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

...

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.☕

Comments

[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

[Nehal Mahida]

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

[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

[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 😃

[Rehan Zaheer Zaheer ahmed]

Thank you

[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

[Nehal Mahida]

Thanks for sharing, I hope it helps @rehanpia

[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]

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.

[Jose Antonio Felix]

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

[Nehal Mahida]

I'm glad you like it 🤗

Let's spread the knowlege. 🚀

Happy Coding!!

[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.

[Nehal Mahida]

Purpose served 🙏🏻

[NikhilBelide]

Great article buddy

[Nehal Mahida]

Glad you like it! 🤗