This content originally appeared on DEV Community and was authored by Nehal Mahida
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.propsandthis.statemay 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
This content originally appeared on DEV Community and was authored by Nehal Mahida
Nehal Mahida | Sciencx (2021-10-23T03:50:19+00:00) How not to update states in React!!. Retrieved from https://www.scien.cx/2021/10/23/how-not-to-update-states-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.