React useState Hook | Learn ReactJS

[@DaveGrayTeachesCode]

Learning the React useState hook is your first step towards learning about and managing state in React. Working with state requires you to think in a React-ful way which is different than Vanilla JS. That said, you should be familiar with Vanilla Javascript before learning the differences provided by React. If you are new to Javascript, I suggest beginning with my 8 hour full Javascript tutorial here: kzbin.info/www/bejne/e5eknWyYrN-JkM0

[@toonice555]

Been using react for a while now and going through these videos really helped me understand certain things on a deeper level!

[@BrainNotUsed]

Cannot wait to catch up! I have yet to start your React series as till now I was progressing my Vanilla JavaScript knowledge. You are an amazing tutor!

[@DaveGrayTeachesCode]

Thank you so much! 🙏💯

[@Sean-hd1bp]

This is the best explanation of useState I could find. Nice one!

[@DaveGrayTeachesCode]

Thanks Sean! 🙏💯

[@yardleyfrausto7612]

Im learning react now and I am so glad I came across this channell

[@quasi_verum]

4 years ago, I have really struggle to understand state concept. apart from class component concept, there aren't many creators who make content like you, Dave. It took me 2 week to figure out all about this.state, this.setState()(and all form of state mutation, and callback parameter), this.handleEvent.bind(this). Haven't hit componentDidUpdate yet. Thank you dave, at least there are a lot people that not struggle to understand hook useState.

[@daman823]

Tese tutorials are awesome !! Keep going 🎉

[@zakariachajia1199]

amazing video learned things in a new way still eager to finish this laylist

[@immortalaigs4203]

i ended this tutorial! everyday 2 lessons i am learning :).

[@dror-krief]

Thank you, Dave

[@aman7555]

Excellent content as always!

[@DaveGrayTeachesCode]

Thank you! 🙏

[@ruebenhales8558]

Great job explaining Dave thank you!

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@mubirujamesbenjamin3440]

Thank you. You're the best

[@faisalejaz3893]

Dave you are great

[@ahmedalsayeh5837]

thankYOU

[@jizzervirusreptikonski8756]

I think that count part should have been explained with reloading the page

[@amulsharma564]

Was looking for some better tutorial for React, Came across this "The Best Tutorial For React".

[@pranjalruhela1103]

the handlickick logs 0 because of the asynchronous nature of the setstate function. THe thing is that the code on the next lines are batched and kept aside while the program keeps on going and on the rerender the new state reflects but by that time console has logged the old value.

[@samiullahsheikh5015]

Can you please explain the difference between these two? setValue( value + 1) VS setValue((prevValue) => prevValue + 1)

[@DaveGrayTeachesCode]

Yes, you want this video on that topic: kzbin.info/www/bejne/r6e3eIt-bNqsmKM

[@jamshidtashkent1976]

Really helped

[@utkarshp1108]

avoiding mistakes part is working in my computer I've got 1 and after that added one more count+1 I've got 2

[@harag9]

The gotcha for the adding of +1 and +1 to the count I can see getting loads of people. me included, it just doesn't make sense when you are reading line by line. IF you wanted to use the NEW updated count after adding the +1 to it at line 14, how do you do that? Can you do that? Would have been nice if you answered that question. Though it's good to know about the gotcha.

[@DaveGrayTeachesCode]

I think this deeper dive will help answer your question: kzbin.info/www/bejne/r6e3eIt-bNqsmKM

[@harag9]

@@DaveGrayTeachesCode Thanks for the link to the video. I'll check it out.

[@psyferinc.3573]

your awesome dude

[@DaveGrayTeachesCode]

Thank you!

[@aya2222]

In handleClick function, the update of 'count' is asynchronous. That's why console.log(count) doesn't display updated 'count'. Is it right explanation?

[@DaveGrayTeachesCode]

React does batch updates of state. The state variable retains the same value from when the component loads each time. Instead you must use a function in setState to pull in the previous state. It's a bit complicated to explain, but I provide another tutorial on it where the examples should do so nicely here: kzbin.info/www/bejne/r6e3eIt-bNqsmKM

[@ghostpieces2362]

Is this tutorial. When using setCount(count + 1), if you wanted to access the update count in the same function is that possible?

[@DaveGrayTeachesCode]

Good question! I explain the answer to this exact question in this follow up tutorial: kzbin.info/www/bejne/r6e3eIt-bNqsmKM

[@CAPS_AMERICA]

I got lost in setCount(count + 1). If count variable is a constant and setCount is the setter, isn't the same as passing setCount(0+ 1) which would set getter variable to 1 (count), the console.log(count) will be 1? Not sure I'm getting the logic here. You're calling setCount function first, console.log function comes next, why would the state of count unchanged when you've already set it to count + 1? Is there some kind of lazy loading where variable values are loaded even BEFORE calling a function in React?

[@DaveGrayTeachesCode]

Good questions and the answer has to do with rendering and batch updates. Explained in greater detail here: kzbin.info/www/bejne/r6e3eIt-bNqsmKM

[@skillkrio]

I didn't got any job so far. If i got any my first job is to support you .

[@DaveGrayTeachesCode]

Keep going! And thank you!

[@DawinderSinghGhanauri]

code download link ?

[@DaveGrayTeachesCode]

There is not one for this specific lesson, but all download links for this series are found here: github.com/gitdagray/react_resources

[@smithasilviadsouza]

count state is getting changed for me

[@trieudien1990]

good

[@TravinskiyVladislav]

Top