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
andthis.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.☕
Top comments (15)
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
Thanks, glad you like it. 🤗
It means a lot 🙏🏻
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
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 😃
Thank you
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
Thanks for sharing, I hope it helps @rehanpia
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!!
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.
Thank you for the info Man! I didnt know this useState Hook situation
I'm glad you like it 🤗
Let's spread the knowlege. 🚀
Happy Coding!!
Thanks for the post! Sometimes we forgot this small things in our code, then we got a big unperformed and not stable codebase.
Purpose served 🙏🏻
Great article buddy
Glad you like it! 🤗