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: ruclips.net/video/EfAl9bwzVZk/видео.html
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!
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.
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.
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.
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?
In handleClick function, the update of 'count' is asynchronous. That's why console.log(count) doesn't display updated 'count'. Is it right explanation?
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: ruclips.net/video/yvTGXH7uybA/видео.html
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: ruclips.net/video/EfAl9bwzVZk/видео.html
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!
Thank you so much! 🙏💯
This is the best explanation of useState I could find. Nice one!
Thanks Sean! 🙏💯
Been using react for a while now and going through these videos really helped me understand certain things on a deeper level!
Im learning react now and I am so glad I came across this channell
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.
amazing video learned things in a new way still eager to finish this laylist
Tese tutorials are awesome !! Keep going 🎉
Thank you, Dave
i ended this tutorial! everyday 2 lessons i am learning :).
Excellent content as always!
Thank you! 🙏
I think that count part should have been explained with reloading the page
Great job explaining Dave thank you!
Glad it was helpful! 💯
thankYOU
Was looking for some better tutorial for React, Came across this "The Best Tutorial For React".
Thank you.
You're the best
Dave you are great
Can you please explain the difference between these two?
setValue( value + 1)
VS
setValue((prevValue) => prevValue + 1)
Yes, you want this video on that topic: ruclips.net/video/yvTGXH7uybA/видео.html
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.
Really helped
I didn't got any job so far. If i got any my first job is to support you .
Keep going! And thank you!
your awesome dude
Thank you!
avoiding mistakes part is working in my computer I've got 1 and after that added one more count+1 I've got 2
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.
I think this deeper dive will help answer your question: ruclips.net/video/yvTGXH7uybA/видео.html
@@DaveGrayTeachesCode Thanks for the link to the video. I'll check it out.
Is this tutorial. When using setCount(count + 1), if you wanted to access the update count in the same function is that possible?
Good question! I explain the answer to this exact question in this follow up tutorial: ruclips.net/video/yvTGXH7uybA/видео.html
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?
Good questions and the answer has to do with rendering and batch updates. Explained in greater detail here: ruclips.net/video/yvTGXH7uybA/видео.html
In handleClick function, the update of 'count' is asynchronous. That's why console.log(count) doesn't display updated 'count'. Is it right explanation?
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: ruclips.net/video/yvTGXH7uybA/видео.html
Top
good
count state is getting changed for me
code download link ?
There is not one for this specific lesson, but all download links for this series are found here: github.com/gitdagray/react_resources