React Hooks Tutorial - 3 - useState with previous state

📱 Follow Codevolution

useState with previous state in React

[simple]

for those who are confused about why to use previous state I will just suggest
write setCount(count+1) again write setCount(count+1)
so running this it will not increment by 2, infact it will incremented by 1 even I have called twice the setCoun(), so conclusion is our previous state is not stored,
now write like this, again write it so, this time it will be increment by 2 on clicking the buttong and then 4 and so on, so by using previous state we store the initial state just before the last rendering, hope this help

[md.imrulhasan]

for those who is confused with setCount function with prevCount variable.
We can pass an arrow function inside this setCount() function. And this arrow function will take an arg which is the prevState value and can be called with any name. It will recognize it as prevCount because setCount function had been destructured with count variable itself.

[IamAgrocerybag]

I'm here because another intructor didn't explain this at all while teaching, thanks for doing so. And well explained with clear simple example code.

[IvanFedulov]

thanks a lot! you are the first one who put things clear. many other tutorials are pretty superficial

[knightviper]

For those who are confused with prevCount

Just like when we need to update state using setState, we either passed an object or a function to setState. The function takes prevState and prevProps as parameters. Since setState is async, it is always advisable to update state passing a function rather an object.


Likewise setCount takes a function.

Remember useState returns 1. the initial state value 2. a function to update the state

[YoussefZidan]

I love your way of teaching, Thanks mate.

[zup]

I love the way you teach, and I love the time and effort you put into these videos. Saying that, there's a bug at 05:25 that it seems everyone's overlooked. You hit the Increment 5 button but the counter decreases, only on the next click of a button the number increments by 5

[mostinho]

Done thanks
When updating state based on previous value, always use the setState(…) function that takes a lambda that takes the previous state value. Don’t use setState(oldStateVar + 1) and especially don’t call it in a loop. That’s why just always use the version that takes function that takes previous state

[carsugarmodels]

Good explanations as always! Subscribed and looking at the rest of the videos. THanks

[prashanthk]

Good explanation. Thank you, this tut helping me lot

[andreademartino]

now is all clear! Really thx man. You make all simple <3

[jamezjaz]

Amazing content..
Thank you very much

[MinChanSike]

Thanks for grade React Hooks tutorial playlist.
How to get callback from state change like React class component or
how to get immediately state change value on the next line of code.
Example:
_const [count, setCount] = useState(0);_
_setCount(prevState => prevState + 1);_
_console.log("Count" + count);_

[RahulMaurya-tcwi]

if you do not want to decrement the value of count in negatives add conditional rendering like this:
<button onClick={count ? () => setcount((prevCount) => prevCount - 1) : initialCount}>

[mbs]

S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[abhinavkant]

Why the for loop didn't work?

You should've explained.

[vigneshgvs]

big note: whenever gonna change value using the old value, need to use prevStateVar
in hooks: (prevStateVar) => prevStateVar +5
in class: (prevState) => { return {var: prevState.var + 5} }

[vivianzhu]

The essential of the setCount in the loop is not working is due to it will only take the last setCount to update the state when there's a batch setCount. Only the last one will work. The solution is to use functional method to update that.

[jaysaxena]

This method(tutorial) and (basic button SetCount(count+5) method) gives the same output and works in the same way visibly. Can anyone help in deciding which one is better and why? There is no difference in output btw. Please clear this confusion.

[getme]

But how did setcount in jsx took the previous state value?