useState Hook - React In Depth

[@aliajellu]

The visual are the BEST part of your explanation. More visual please....

[@crisi6754]

This video was a perfect balance of theory and application. I've been using React for 2 years professionally, and this video was awesome to watch. Well done Mr. Nader!

[@TechWithNader]

Thank you! It's awesome to hear that even with a bunch of React experience under your belt, you can still get some good takeaways 😊🚀 Excited to see how you do on the exercises as I'll try to make some trickier ones in there 🤓

[@AdoptingCode]

Love the depth, wish more creators took the time

[@Abulkhair1995]

What a Brillant Lesson

[@praveenkanwar953]

this lecture was awesome, cleared so many doubts I had

[@arfatkazi-h8q]

best video best playlist good work brother😍😍😍😍

[@dualasus12]

I've used React and useState quite a bit, and knew about the majority of the trip ups you mentions (passing different references to setStateVariable() for re-renders, as well as the issue with State not updating inside the function body after setState() calls but was never explained exactly why. Which really does make all the difference as opposed to getting hand waved with a "because thats just how it works", and as someone whose dealt with their fare share of bugs due to these 2 things in particular i feel this video would've saved me a lot of time and headaches.

[@TechWithNader]

Thanks for the kind words! I'm glad all this comes across as these are exactly what I felt as I learned CS and these concepts, haha! I'm glad the extra details and depth clears things up 😊

[@DeepLook1]

Ur awsome Nader gr8 tutorial the way u teaching I will never forget. ❤❤

[@sunnyarora3557]

Happy to see you are working on react series

[@raphaelokenyi2138]

Loving this React playlist. Thank you

[@shadmanzaman435]

Hey Nader! Had a question, how is the count being updated when console.log is called even though we are constantly re initializing count to 0 whenever the button is clicked, (shouldn`t the console display -> 1, 1, 1, 1, 1 ... ) does this have something to do with closures or something? Other than that the video was very helpful.

[@TechWithNader]

Great question! Yup, that's pretty much the main point of using useState. Its goal is to set the initial value (in this case 0), then we provide the function to update it later. The initialization part happens only once, but the update function is what gets called whenever we need to change it. React will keep track of the fact we want it to start at 0, but not reset it each render with useState(0). And indeed you can thing of it like a closure (imagine you have a global map of all the states for each component, their initial values and their updater functions). Hope that helps! 😊

[@shadmanzaman435]

@@TechWithNader so if i am not wrong -> as soon as App() is called, inner add function gets attached to onclick event, so even if the App function is run once, the closure function still has access to count and updates it on every click, but the DOM wont be re-rendered as App() already returned its value (button element) and wont rerun, so to resolve this we use useState right?

[@TechWithNader]

@shadmanzaman435 yup, exactly! We could simulate this by creating a global for it or putting it outside App, but that’s exactly what useState does internally for us with some optimizations too 😃 The main thing to remember is the component function always gets re-run to re render so anything inside that function gets created anew unless we use things like globals or closure 🤓

[@LuisMateoAriasCaicedo]

Thanks!

[@susmithaajob1598]

awesome ....

[@maha33612]

Thanks alot Its helpful and understandable please make node js and express series also

[@TechWithNader]

Thanks! I'm planning a REST API course for sure 🥳

[@mnnw148]

you are amazing🤩

[@4399lol]

nice video

[@alinanerlich7236]

What if you make count a global variable?

[@TechWithNader]

Good idea! You could, but generally: - globals are generally a bad pattern (lots of bugs and pollutes the namespace) - you would have to create a separate one for each component and track them somehow - lots of other small issues in production... That said, there are globals that exist that are useful, but they usually make sense to be global (eg: console)

[@extrabitfree]

WOW

[@BabaloMbulawa]

Thank you so much this is so useful 💯SIYABONGA

[@shehanmaduwantha4795]

Added :)