Avoid this React State Mistake | React Previous State Explained

[@DaveGrayTeachesCode]

Previous state is a powerful tool for working with React. And as with any tool, you need to understand when and how to use it for the best results. Updating state like the example setCount(count + 1) is not wrong and is even displayed in the React JS docs more than once. That said, it does not work in all situations, and it is easy to see why the preferred way for many is to always use a previous state function. If you are just getting started with React, I recommend my full 9 hour React course tutorial found here: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@siddhartha0s01]

Thanks for the video Dave. I was playing around with this code and found that the counter works fine even if I use setCount(count => count+1) in a for loop or multiple times. Here I didnt use prev.

[@DaveGrayTeachesCode]

@@siddhartha0s01 you can name the parameter of the function whatever you want, prev, count, number, or any other word. It still represents the previous count. If you don't provide the function and just provide the setCount(count + 1) where count is your state, you cannot use it multiple times in the same function. I hope that helps explain.

[@siddhartha0s01]

@@DaveGrayTeachesCode thanks for the clarification.

[@DaveGrayTeachesCode]

@@siddhartha0s01 you're welcome! 🙏

[@carsugarmodels]

The key phrase that explained everything "React updates state in batches". One another fantastic explanation from Dave. Thanks again!

[@DaveGrayTeachesCode]

You're welcome!

[@sfp2290]

I completely agree. That line alone made me understand the rest (at least I assume I did).

[@chrisstucker1813]

Yeah it’s also worth knowing that “prev” is accessing the state directly from React’s internals which is updated every time you use setCount() - even if they’re hasn’t been a re-render. So in other words, doing setCount(count + 1) twice is indeed setting React’s internal state array to 2; however you need “prev” to access this internal state because the outer state identifier “count” is outdated.

[@tankashing]

wow, i'm all the way from Malaysia, watched this video and thought to myself "finally, something i always was confused about, explained to me easily". Thank you soso much :)

[@DaveGrayTeachesCode]

Glad I could help and thank you for the kind words! 🙏💯

[@ahmad-murery]

Updating the state using previous value did tricked me for a moment as I wasn't aware of it, it's hard to forget what was learned from a mistake (my life story 🤦‍♂️) Thanks for the update Dave,

[@DaveGrayTeachesCode]

Good to hear from you, Ahmad, and I agree! Mistakes are a valuable teacher, and I have learned a lot from them.

[@ahmad-murery]

@@DaveGrayTeachesCode it's been a really tough days for me lately, but even so I enjoyed watching and liking your 2 previous videos, unfortunately I couldn't comment on them with an empty mind.

[@DaveGrayTeachesCode]

@@ahmad-murery I understand my friend. Hang in there. I appreciate the support!

[@mostinho7]

Done thanks Always use the version of state setter that takes the previous value because just setting the state without taking previous value doesn’t behave properly

[@caffeinated-pixels]

Nice explanation Dave, this is definitely one of those state pitfalls that tend to confuse beginners.

[@DaveGrayTeachesCode]

Thanks! 🙏

[@GabrielMartinez-ez9ue]

exactly the lecture i needed. incredible! i saw the exact same docs in reacts website and still could not understand when to use the previous state.

[@DaveGrayTeachesCode]

Glad I could help, Gabriel!

[@funnyway683]

Thank you Dave ! you helped me having a better understanding of states in React

[@DaveGrayTeachesCode]

You're welcome!

[@stillsmart]

That helped clarify a few important notions. Thank you!

[@annemieknieboer8221]

Thank you so much for this clear explanation, you are a hero! Needed previous state for adding items to an array and got it working immediately after watching your tutorial 👏🥳

[@DaveGrayTeachesCode]

Great to hear! 💯

[@jackiefranken590]

Dave you just saved my demo. God bless

[@DaveGrayTeachesCode]

Happy to help!

[@matinsasan]

Thanks for clarifying how state update works, Dave.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@sameembanu2077]

As usual,dave is great.

[@houseofcoding101]

thank you soo much dave. Great Explanation!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@jamshidtashkent1976]

Good lesson. Thank you. I'm trying to understand the lessons from the first lesson. Sometimes it is hard to get it but the next lessons seem very easy.

[@DaveGrayTeachesCode]

You've got this! And thank you!

[@avidambassador6665]

Great video, helped clear misconceptions with state. Cheers.

[@DaveGrayTeachesCode]

Glad to hear it!

[@muratalpersarisoy9104]

Great, finally understood :) Thanks

[@DaveGrayTeachesCode]

Glad it helped!

[@ohmygoodness6773]

Thank you that was very detailed and helpful

[@ibrahimacanada]

Great course very clear !!

[@DaveGrayTeachesCode]

Thank you! 🙏

[@umeshpalsingh9391]

Thank you so much, Know I understand how prevState works

[@DaveGrayTeachesCode]

You're welcome! 💯

[@vivarantx]

great video my boy, thanks for helping a brother out

[@DaveGrayTeachesCode]

You're welcome!

[@0x0abb]

Thank you Dave for your awareness 🤩

[@DaveGrayTeachesCode]

You're welcome! 💯

[@lugh5188]

Great video and explanation.

[@mohinderlamba]

In the example where you update the object’s lastname property, if you update the firstname right after updating lastname without using previous value you will probably not get the lastname updated

[@DaveGrayTeachesCode]

You are correct. This part of the video is at 10:04. You would need to pass the previous value function so you would have the lastname value you just updated before. However, if you were going to update both the first and last values in the example given, there would be no need for the previous state. If other properties existed, you would need the previous state.

[@cuberos7430]

How the same,This simple awesome explanation .Gray You are Great !!

[@mici2567]

Super video thanks !

[@DaveGrayTeachesCode]

You're welcome!

[@oussemabouyahia474]

perfect content , thank you a lot for sharing knowledges

[@DaveGrayTeachesCode]

You're very welcome!

[@bewildstudio]

Very clear... thank you)

[@DaveGrayTeachesCode]

You're welcome! 💯

[@onlyhasbi]

Thanks Dave 👍

[@DaveGrayTeachesCode]

You're welcome! 💯

[@nos44-]

nice explanation ... but i was looking for the answer to WHY .. WHY and HOW prev state does what it does and WHY the currvalue doesnt work

[@DaveGrayTeachesCode]

I thought I did explain that. When looking at WHY, it helps to understand closures. Whatever value the state has when the component renders is the value it will have no matter how many times you put setCount(count + 1) in your component - count will always have the same value. However, if you use the optional function parameter of setState like setCount(prev => prev + 1) the prev parameter is not assigned a value when the component renders - and that means it can update accurately each time you call it within the component. And you can call the prev parameter of the function curr or currVal or whatever you want to name it - it will still work the same.

[@nos44-]

@@DaveGrayTeachesCode wow thanks for the quick response sir... Much appreciated .. Sorry if I missed the part .. m very new to react .. m just exploring random videos on YT ..but surely you explained it just the way I wanted it... Only reason I commented ... Thanks for everything

[@RD-jr8nv]

Yo, totally different subject. Just a thought, by rearranging the open and close bracket of your logo, you could form the letter types D G. I.e. the closing one first, and the open second.

[@DaveGrayTeachesCode]

Interesting thought!

[@behruz_developer]

What if you use "+2" instead of "+1"?

[@hassanmib6769]

which terminal are you using in this video?

[@DaveGrayTeachesCode]

I always use git bash.

[@umairali2360]

I have a Data from api using redux toolkit and I m getting data on desired page using console. But my state is not updating. I think all code run before updating my state. Please guide

[@DaveGrayTeachesCode]

I can only suggest to follow my examples. I can only guess about what needs changed in your code from here.

[@MichaelStephenLau]

If the function is only inverting the state of a boolean, does it matter to use prev? i.e. setBooleanState(!booleanState)

[@DaveGrayTeachesCode]

Same as count + 1 ..it works - but I recommend always considering previous state. It's a good habit.

[@MichaelStephenLau]

@@DaveGrayTeachesCode Thanks for the clarification. It ensures asynchronous updates occur correctly.

[@jackiefranken590]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support, Jeff! 💯

[@Bskater952]

Hey, first I just saw your playlists and they look great. I plan to watch all the videos available, but I was wondering, after learning react what's the point of using vanilla JS in projects instead of react?

[@DaveGrayTeachesCode]

Good question! You can use whichever you like best. JavaScript powers all of the libraries and frameworks like React, Vue, Svelte, and much more. The more you learn about Vanilla JS, the easier all of the concepts become. 💯

[@adventurer2395]

You say "React updates state in batches." By the that, do you mean React updates state asynchronously?

[@DaveGrayTeachesCode]

Not exactly the same thing. React updates in batches - instead of step by step - to prevent needless component re-renders. More here: blog.saeloun.com/2021/07/22/react-automatic-batching.html

[@webpro607]

Great explanation!... I suggest you create an Udemy courses about React and JS... Subscribed to your channel 👏

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@nested9301]

Hey why u use class instead of className thanks!

[@DaveGrayTeachesCode]

Possibly a mistake. Timestamp?

[@lavdev]

Hi sir, please help me. i try to send a cookie using postman to server and show cookie in console window but it's show undefined variable, how can i fix that sir

[@DaveGrayTeachesCode]

It is difficult for me to troubleshoot individual problems from afar, but I know you need to manually add the cookie in postman. There is an "Add Cookie" link or button in there.

[@Skw384]

How do you when you want to update a string?

[@DaveGrayTeachesCode]

const [stringy, setStringy] = useState('initialStringValue') And then when you want to change it, use the setStringy() function like this: setStringy('newStringValue') Please understand the variable name stringy can be anything you want such as name, setName, word, setWord, etc.

[@Skw384]

@@DaveGrayTeachesCode right, thanks a million, but do you know if there's such a thing as "prevState" when using string. types as the state?

[@suprabhatkumar5478]

great video

[@cradleofkaschenko2057]

As always!

[@DaveGrayTeachesCode]

Glad you enjoyed it! 💯

[@TheNamesJT]

You should make a video where you teach how to deploy a front and back end to Heroku on the same app not separate apps. either use a simple mern app you have already as a way to teach how to do this or even make a whole 2 hour video were we build a simple mern app and then deplay the client and server to heroku. I can't seem to find any information on how to do this online that is current 2021.

[@DaveGrayTeachesCode]

Great suggestion! ...and it is coming after I finish the backend Node/Express/Mongo series. Combined with the React series, I'll be able to reference the full MERN stack as we build a project. 🚀🚀

[@FrostDrive]

I don't understand how just writing prevState makes the program go figure out what the previous value was.

[@DaveGrayTeachesCode]

It's not a specific word. Instead, it is an anonymous function that receives a default argument value of the previous state. You could call it Dave 😂 but prev or prevState describes it more accurately.

[@pawanbhatt3847]

Great is it

[@DaveGrayTeachesCode]

Thank you! 🙏

[@ms77grz]

👍👍

[@stavroskefaleas6320]

Great explanation!