I must add that the way we use the setter function setState() in the code above works, but its not advisable as there is a safer way of approaching it. I'll talk about it soonest.
The above statement was from my first article where i wrote about using the useStatehook() in React JS ⚛. You can read my first article here. So i want you to see this article as more of a sequel because i will be building on what i have done my first article.
Without further ado, lets dive straight into it 🐬
Let me start by defining prevState...
prevState is a name that you have given to the argument passed to setState callback function. What it holds is the value of state before the setState was triggered by React; Since setState does batching, its sometimes important to know what the previous state was when you want to update the new state based on the previous state value.
I know you're probably thinking of what you just read above... it's okay if you didn't get it.. Here's a more simpler definition
prevState is a way of updating the state component in setter function based on the value of the old state of the component
setState(prevState => prevstate) // prevState here contains the value of the old state
So I will be working with the counter app we built in my first article and we are only going to be concerned with the setter Functions which are the increaseCount and decreaseCount functions.
You can get the styling for the app on GitHub
import React from 'react';
function App() {
const [count, setCount] = useState(0); // here we are setting initial value of count to ZERO(0)
const increaseCount = () => {
setCount(count + 1);
}
const decreaseCount = () => {
setCount(count - 1);
}
const resetCount = () => {
setCount(0)
}
return (
<div className="container">
<h1>{count}</h1>
<div className="buttons">
<button className="decrement button" onClick={decreaseCount}>-</button>
<button className="reset button" onClick={resetCount}>R</button>
<button className="increment button" onClick={increaseCount}>+</button>
</div>
</div>
);
}
export default App;
The above snippet of code is a simple counter application, with a count variable and 3 buttons to update the value of the count variable(state in react)
How to use the prevState in the setter functions in the code snipped above.
In the code snippet above we are going to be editing the increaseCount and decreaseCount functions
const increaseCount = () => {
setCount(prevCount => prevCount + 1);
}
// prevCount above is increased by 1 when the function is called
const decreaseCount = () => {
setCount(prevCount => prevCount - 1);
}
//prevCount above is decreased by 1 when the function is called
So what's happening in the increaseCount & decreaseCount function is that the setCount setter function is taking in the prevCount as an argument(prevCount here is the count state) and then the prevCount is used to perform operations on the state of the application...
Now the main question is, why is the prevState method setCount(prevCount => prevCount +1 ) preferred to just using the normal way of updating the state setCount(count + 1)
I will give a scenario where the setCount(prevCount => prevCount + 1) is more safer than just using the setCount(count + 1)
// code A
const increaseCount = () => {
setCount(count + 1);
setCount(count + 1);
}
// code B
const increaseCount = () => {
setCount(prevCount => prevCount+ 1);
setCount(prevCount => prevCount + 1);
}
In Code A, the increaseCount function increaseCount() increases the count state by only one, so if the count was 4 initially, the increaseCount function makes it 5..
In Code B, the increaseCount() increases the count state by 2. This is because the setCount() uses the prevCount which takes into account the value of the previous count values on calling of the function twice. That's why the state increases by 2.
Thank you for Reading 😊!
I appreciate you for making out time to read my article. Please like and share my article. Alternatively you can connect with me on Twitter.
I would also love it if you can refer or connect me to Frontend developer roles.
Cheers!
