Just wanted to say I'm a 39 yo man who currently enrolled into a school for software engineering. I often refer to your videos, and they have helped me maintain a perfect score so far in school. Thank you so much for these!!!!
@@dangeorge3826 not yet, currently finishing up my portfolio now. Hope to have it done this week. But, I was able to help my friend who I met in this class to land a job. He had no prior coding knowledge. It's very possible. Super excited for him.
@@briandev8 lol, congrats to him and good luck to you, man. I am 26, i am coding frontend for about 6 months and I am afraid that I will not get a job this year 😂
How is it possible for you to explain something in 15 minutes that I didn't understand from hours of watching other videos? You've seriously got a gift for teaching, and I feel like I have a much better comprehension of useState now. Thank you!
:))) imagine being called "edgy" for telling them that they can do it faster by reading. Im 100% sure no beginner was thinking: "This anonymous guy from RUclips with a stupid Icon made me feel ashamed that I watch videos"
SMAL NOTE: 10:53 if you call function by reference, so "useState(countInitial)", so WITHOUT BRACKETS, the function will be called only once. Greate tutorial, great explanations, great teacher! Keep going!
You've got a phenomenal teaching style, Kyle. I can tell you always put in the time for proper preparation for your videos by how structured and easy to comprehend they are. As always, another excellent video, thanks!
Today was one of those days where I needed to learn something new, and instead of searching for hours... First search, first click, and 15 minutes later - learning accomplished. Thank you very much. Great tutorial!
Finally somebody actually explained what the hell the "const [thing, otherthing] = stuff" syntax actually does, instead of saying "it's just some ES6 magic syntax".
@@emgodas My description of it being described as "just some es6 magic syntax" stemmed from the frustration of countless other tutorials going "just write this, you don't need to understand what this syntax means, just write it like this and it'll work" and not explaining it.
I've been using react for over 4 years and off course am very comfortable with class components. Am currently adding to an existing application and decided to see what all the fuss was with functional components and hooks. Your 15 minutes on the nuance of basic concepts behind setState has been very helpful. Good video.
just discovered you by this video (searching for react usestate) - I know nothing about react and little to no js. I'm 5 minutes love your presentation style, narration and examples - I understood everything easily. Thank you
This was amazing, getting into react for last part of our boot camp and it goes so fast they don't always go in depth, this made sense, and has helped me a LOT, thank you so much!!
10:57 highlight for running vs referencing any initial function is so nice. Also appreciating the attention to variable de-structuring syntax, way beyond notation purposes, as noticed below.
Thank goodness there's actually someone who takes time to explain wtf is going on in code. So many tutorials are just people flying through examples and not explaining or showing how things work at all.
hey im very amazed by your teaching skills, got interested about your income and searched google and got none, thought of asking to you itself , so I can take it as a career too
This was such a good tutorial. It actually explained everything methodically and using simple examples, without treating the viewer like an idiot. I love this channel.
This is absolutely the best explanation of React Hooks {useState}. I was struggling a lot not getting the correct understanding of this es6 style syntactic sugar.
Bro this video is made in Heaven, we needed this. Hooks are kinda confusing e.g. every time a component renders, it happens twice ( console.logs at 10:07 and 10:59). But hooks like useRef, useEffect and useCallback are the one's that confuse me the most
the double console.log happens with class components as well the reason is when u use create-react-app it by default uses strictmode which runs your code twice to debug it to remove go to index.js file and remove react.stricmode enclosing the app component
Nicely done sir. Taking complex subjects and simplifying them so that a child could understand them is no easy feat. Seriously, people that can do that are the ones that lower barriers and allow new people into areas they might otherwise not venture. They demystify. You truly do have a gift and I very thankful for people like you.
I couldn't understand this thing for weeks...you did the magic in 15 mins... Man !!! Some people are born to be good teachers ❤️ teaching someone or passing your knowledge to others , is one of the most noble thing to do ❤️
And I thought spending 15+ mins on just useState was an overkill. It was SOO WORTH IT!! loved the way you explained it all with appropriate examples. Thanks a lot Kyle. ✌️😎👏👏🌹
at 10:50 , you can pass the function literal into setState and it will have the same behavior as the anonymous function.. So do UseState(countInitial) instead of UseState(countInitial()).
@@exodion4173 yes you do not have to call it .. when we pass a function to useState like this => useState(() => {}) .. you can see we are only passing a function to useState not calling it
The way you built up the examples to show how to use hooks for scalar value, functions and objects and when we should use them - absolute gem!! Subscribed
Ah! I thought about it some more. When he destructured the useState hook and passed it the value 4, it was assigned as the current state and also passed to the setter function. I think that’s how it works
I think the second function that useState returns, such as setCount, setState etc. can take in a function and apply that function to the current value of the "state" (eg count) that it is bound with. So when saying prevCount => prevCount + 1 , you're just creating an anonymous function inline that takes an argument (prevCount) and increments it. The argument prevCount (or whatever else you rename it) is always passed in the current value of the state it is bound to in the useState call.. try renaming prevCount to xyz and reexecute
I had a hard time to understand this too. Still don't get it fully but I found that setState() is asynchronous and React may batch multiple setState() calls into a single update for performance(src: Reactjs.org). So, prevCount is just a function parameter received and it is the initial state on the first call. setcount(function(prevCount) { return prevCount - 1; }); Without using a function call inside setCount, you actually update the state directly, but with the function call you use a variable(function parameter) which is the returned value minus one and this value(variable) is used inside setCount() to set the state. I was experimenting with the following code and it give the same result. const [count, setCount] = useState(4); const x = count; function decrementCount() { setCount(function(x) { return x - 1; }); setCount(function(x) { return x - 1; }); }
Note to everyone: if you were updating the state using `setTimeOut`, remember closures in JS and know that it will get the state that you pass in at the time of you calling set timeout, as oppose to the current state of the useState hook. If you'd like setTimeout to use the newer state, you can wrap your state in a `useRef` container and it's `.current` property will hold the latest state.
ive been going through tutorial hell for a while now. Ive watched a ton of teachers on youtube. I think you are by far the best and most intelligent coder ive come across. Im a 40 year old man and learning this stuff is not easy, but you definitely make it easier. Thank you Kyle.
4 is our initial state that we added 3 rows above by saying useState(4)... so our counter starts with an initial value of 4. Every time you increment or decrement the counter, this component gets re-rendered and prevCount just takes the current count value and increments or decrements it... I don't know if this answer was very helpful... but I just posted a video about the same topic, check it out and maybe this will help you to understand it... 😉
Amazing! I find it strange that half this stuff isn't in the ReactJS docs, or is just really hard to spot, I tried to reference it and can't even find it... Amazing videos, as always!
Kyle your teaching style is SUPERB and the way how you take us through every bits and gotchas and explain in the easiest way is remarkable. Love from India.
Not everyone can explain something effectively, but u do it well. Good work. I just started learning React and it is very complex , but ur video helps.
I was sitting and coding and I just thought *DAMN can someone just explain useState to me!?* and so now 15 min later, I have a much better understanding. You'r great!!
Man, I'm really impressed by the way you explain the topic! I came to your tutorial from udemy where the guy explained the very same topic but in a cumbersome way! Thanks a lot!
beat my head against the wall all day for trying to learn this hook. this summed everything up in such a concise way! so grateful, keep up the amazing work.
Very very clear. I have searched so much content on this but I still didn't have a very clear understanding on how to use it. You really helped me a lot thanks.
Thanks so much for this very clear and understandable video, I've been playing with React lately and your video made me understand useState more perfectly.
I'm new to web development, just shifted from working in design to development. This video was really helpful, you really simplified it. Excellent teaching style, subscribed.
You are such an amazing teacher, so clear and so thorough! Wished my teacher was this clear, but I have to ask him so many questions to actually understand what he is explaining. Instead of explaining, he just shows what is done, explaining very little. For example he never explained that const [count, setCount] inside const [count, setCount] = ustState(0) is a destructured array. He also never demonstrated why we use prevState. So when I saw that for the first time I was very confused because I didn't see why that was needed.
Thank you Todo: Take note of weird usestate behaviour when using previous value of state to set new value. Just use the callback that takes the previous value always. Breaking down objects into different usestate variables instead of having them in one object
Just wanted to say I'm a 39 yo man who currently enrolled into a school for software engineering. I often refer to your videos, and they have helped me maintain a perfect score so far in school. Thank you so much for these!!!!
How is it going, man? Have you found a job?
@@dangeorge3826 not yet, currently finishing up my portfolio now. Hope to have it done this week. But, I was able to help my friend who I met in this class to land a job. He had no prior coding knowledge. It's very possible. Super excited for him.
@@briandev8 and how old is him?
@@dangeorge3826 he is 37
@@briandev8 lol, congrats to him and good luck to you, man. I am 26, i am coding frontend for about 6 months and I am afraid that I will not get a job this year 😂
How is it possible for you to explain something in 15 minutes that I didn't understand from hours of watching other videos? You've seriously got a gift for teaching, and I feel like I have a much better comprehension of useState now. Thank you!
Sure.
148k people needs a 15min video for a 5 min documentation read?
look at the documentation on www.Reactjs.org and make same things
@@george527 How edgy shaming beginners for understanding something better from this video. So cool and edgy wow.
:))) imagine being called "edgy" for telling them that they can do it faster by reading.
Im 100% sure no beginner was thinking: "This anonymous guy from RUclips with a stupid Icon made me feel ashamed that I watch videos"
my name is kyle and my job is to simplify the web for you so that u can start building your dream projects sooner
.....I love this sentence
SMAL NOTE: 10:53 if you call function by reference, so "useState(countInitial)", so WITHOUT BRACKETS, the function will be called only once. Greate tutorial, great explanations, great teacher! Keep going!
Thanks for the explanation, it's very easy to follow this way. I must admit I laughed at the typo at 5:57 but you recovered nicely
I came here to say this. He kept his poker face. Good job, Kyle!
Hey, who does not want to decrement a c*nt ?
As soon as I saw that, I minimized the video to scroll down and read the comments.
I decremented the screen to look for this comment as soon as I saw the typo..
it happened to me once in a CCNA course when I typed no shit instead of no shut in front of my professor...
You've got a phenomenal teaching style, Kyle. I can tell you always put in the time for proper preparation for your videos by how structured and easy to comprehend they are. As always, another excellent video, thanks!
Thank you! I actually wrote an entire blog article for this video first before recording to help make sure I has covered everything I needed to.
@Jimmy Kristian where is your second account which will confirm it worked?
@@WebDevSimplified sir I like your good keep going but please make vedio on all 10 react hooks
ruclips.net/user/shortsluwxDqy6NC0
0% nonsense.
100% useful information.
Awesome explanation!
Your explanation is very intuitive, thanks for this video
Today was one of those days where I needed to learn something new, and instead of searching for hours... First search, first click, and 15 minutes later - learning accomplished.
Thank you very much.
Great tutorial!
Finally somebody actually explained what the hell the "const [thing, otherthing] = stuff" syntax actually does, instead of saying "it's just some ES6 magic syntax".
Who say's it's just some es6 magic syntax? I've never hear it from anyone here on RUclips
@@emgodas My description of it being described as "just some es6 magic syntax" stemmed from the frustration of countless other tutorials going "just write this, you don't need to understand what this syntax means, just write it like this and it'll work" and not explaining it.
what a video previously i have watched 2 hour video which confused me even more but ur video was so good man. thanks alot
I've been using react for over 4 years and off course am very comfortable with class components. Am currently adding to an existing application and decided to see what all the fuss was with functional components and hooks. Your 15 minutes on the nuance of basic concepts behind setState has been very helpful. Good video.
just discovered you by this video (searching for react usestate) - I know nothing about react and little to no js. I'm 5 minutes love your presentation style, narration and examples - I understood everything easily. Thank you
.... I've just noticed everyone else's comments already pretty much said the same thing before me.
This was amazing, getting into react for last part of our boot camp and it goes so fast they don't always go in depth, this made sense, and has helped me a LOT, thank you so much!!
that was 15 min worth a whole week searching and watching multiple videos on the subjsct. thanks a lot and keep on the road simplifiying stuff...
10:57 highlight for running vs referencing any initial function is so nice. Also appreciating the attention to variable de-structuring syntax, way beyond notation purposes, as noticed below.
Helped me understand immensely versus the Meta course I am learning from! Thank you!
Havn't seen a guy who explains useState better than you. Subscribed.
Thank goodness there's actually someone who takes time to explain wtf is going on in code. So many tutorials are just people flying through examples and not explaining or showing how things work at all.
hey im very amazed by your teaching skills, got interested about your income and searched google and got none, thought of asking to you itself , so I can take it as a career too
KYLE IS THE MAN!
Comprehensive explanation with intuition developed around hooks
I appreciate the explanation of the overlooked things that are usually.. 'Just done this way'
This is the clearest, most concise explanation of the useState hook that I have found, HANDS DOWN. Thank you!
This was such a good tutorial. It actually explained everything methodically and using simple examples, without treating the viewer like an idiot. I love this channel.
This is absolutely the best explanation of React Hooks {useState}. I was struggling a lot not getting the correct understanding of this es6 style syntactic sugar.
Bro this video is made in Heaven, we needed this. Hooks are kinda confusing e.g. every time a component renders, it happens twice ( console.logs at 10:07 and 10:59). But hooks like useRef, useEffect and useCallback are the one's that confuse me the most
the double console.log happens with class components as well the reason is when u use create-react-app it by default uses strictmode which runs your code twice to debug it to remove go to index.js file and remove react.stricmode enclosing the app component
@@kiyotaka721 some new I learned, thanks.
thanks, brother you really got me it's 2023 two years after this video was released but it's still helpful thanks kyle 🙏
Nicely done sir. Taking complex subjects and simplifying them so that a child could understand them is no easy feat. Seriously, people that can do that are the ones that lower barriers and allow new people into areas they might otherwise not venture. They demystify. You truly do have a gift and I very thankful for people like you.
I couldn't understand this thing for weeks...you did the magic in 15 mins... Man !!!
Some people are born to be good teachers ❤️ teaching someone or passing your knowledge to others , is one of the most noble thing to do ❤️
And I thought spending 15+ mins on just useState was an overkill. It was SOO WORTH IT!! loved the way you explained it all with appropriate examples. Thanks a lot Kyle. ✌️😎👏👏🌹
I’m in a coding bootcamp right now and you are a godsend! Thank you for your videos. They help so much!
Oh, man, of all the typos you could have made, you made that one =D Great vid; well presented as always.
Haha i bet his heart dropped after typing that by accident XD
Timestamp?
@@farhanaditya2647 5:57
The tip you gave on function initialization for use state is phenomenal. I boosted performance drastically in my application 😯
This was awesome. I never knew about passing a function to useState to optimize the performance.
I wonder why though. Function in JS is higher-order function, can be used as variable. Why here is different?
your way of teaching is amazing 🙂🙂
that missed "o" though. Rough buddy. But an amazing video that helped me a lot! Thank you!
Thank you a lot bro, you did it much clearer then others. One thing you didn't explain double log
at 10:50 , you can pass the function literal into setState and it will have the same behavior as the anonymous function.. So do UseState(countInitial) instead of UseState(countInitial()).
Can u explain or refer to the concept on how this work ? Dont we have to call the function to run it ?
@@exodion4173 yes you do not have to call it .. when we pass a function to useState like this => useState(() => {}) .. you can see we are only passing a function to useState not calling it
The way you built up the examples to show how to use hooks for scalar value, functions and objects and when we should use them - absolute gem!! Subscribed
Hi Vinodh! Are you a fresher or a working professional? Are you open to job opportunities in web development currently?
That was a brilliant explanation, the only thing I don't understand is how does prevState gets the current state values :/
Yes! I am wondering the same thing!
Ah! I thought about it some more. When he destructured the useState hook and passed it the value 4, it was assigned as the current state and also passed to the setter function. I think that’s how it works
I think the second function that useState returns, such as setCount, setState etc. can take in a function and apply that function to the current value of the "state" (eg count) that it is bound with. So when saying prevCount => prevCount + 1 , you're just creating an anonymous function inline that takes an argument (prevCount) and increments it. The argument prevCount (or whatever else you rename it) is always passed in the current value of the state it is bound to in the useState call.. try renaming prevCount to xyz and reexecute
I had a hard time to understand this too. Still don't get it fully but I found that setState() is asynchronous and React may batch multiple setState() calls into a single update for performance(src: Reactjs.org). So, prevCount is just a function parameter received and it is the initial state on the first call.
setcount(function(prevCount) {
return prevCount - 1;
});
Without using a function call inside setCount, you actually update the state directly, but with the function call you use a variable(function parameter) which is the returned value minus one and this value(variable) is used inside setCount() to set the state. I was experimenting with the following code and it give the same result.
const [count, setCount] = useState(4);
const x = count;
function decrementCount() {
setCount(function(x) {
return x - 1;
});
setCount(function(x) {
return x - 1;
});
}
This is actually the best video to understand useState Hook. Everything is crystal clear! Thank you so much!
Note to everyone: if you were updating the state using `setTimeOut`, remember closures in JS and know that it will get the state that you pass in at the time of you calling set timeout, as oppose to the current state of the useState hook.
If you'd like setTimeout to use the newer state, you can wrap your state in a `useRef` container and it's `.current` property will hold the latest state.
Great. Can you elaborate?
Could i Ask for help regarding something in react?
Wonderful explanation thank you.
😍 nice!
Please do one on the context API
Thanks! That will be coming for sure.
the most full explanation
Can we have a video about custom hooks? thank you for the effort
Man ! you are so gifted you explained it very well.....thanks alot and keep doing the good work.....................God bless you
5:56 lol
Great video by the way, thanks a lot!
ive been going through tutorial hell for a while now. Ive watched a ton of teachers on youtube. I think you are by far the best and most intelligent coder ive come across. Im a 40 year old man and learning this stuff is not easy, but you definitely make it easier. Thank you Kyle.
All the best for your journey. My videos should be pretty helpful for you as well... 😉
You are such a good teacher Kyle. Thank you!
You’re also so handsome 😊
Fantastic tutorial you the man Kyle
You know its been well explained, if I commented.
I commented.
I love how clearly you explain everything, it really reflects your knowledge on the topic! TYSM!
@ 7:45 can somebody educate me on the setCount (prevCount => prevCount - 1) ?
its unclear to me how prevCount was assigned value of 4.
4 is our initial state that we added 3 rows above by saying useState(4)... so our counter starts with an initial value of 4.
Every time you increment or decrement the counter, this component gets re-rendered and prevCount just takes the current count value and increments or decrements it...
I don't know if this answer was very helpful... but I just posted a video about the same topic, check it out and maybe this will help you to understand it... 😉
i like your expplication your are the best in web
everytime you say gotchu, i wanna say bless you lol.
This is so clear! I had trouble understanding the useState concept from other medias!
5:55 there are no accidents
freudian slip
your are videos are clear and detailed , thanks a lot
💯
Amazing! I find it strange that half this stuff isn't in the ReactJS docs, or is just really hard to spot, I tried to reference it and can't even find it... Amazing videos, as always!
You made the useState hook so simple to understand you are really a good teacher. Please keep making more videos, thanks so much, I do appreciate it.
decrement what?
I was once stuck at diff btw props and state, you solved it. Now i am stuck at hooks you did it again. Kudos!!
Hi Sourabh! Are you a student or working currently? Would you be interested to explore job opportunities in web development?
Before watching this video, I thought I understood the react hooks..
Hi Arjun! Are you a student or working currently? Would you be interested to explore job opportunities in web development?
@@shivanigaddagimath6105 No, thank you.
Kyle your teaching style is SUPERB and the way how you take us through every bits and gotchas and explain in the easiest way is remarkable. Love from India.
Hey Sagar! Are you a student or working currently? Would you be interested in exploring job opportunities in web development?
Wow! This is explanation is both thorough and simple.
Amazing! Simple, yet comprehensive explanation!
Not everyone can explain something effectively, but u do it well. Good work. I just started learning React and it is very complex , but ur video helps.
Wow. I was a little confused when I was reading a textbook on useState. But now it's so clear. Thank you so much!
I was sitting and coding and I just thought *DAMN can someone just explain useState to me!?* and so now 15 min later, I have a much better understanding. You'r great!!
Kyle. Thank you so much for your content, you have taught me so much.
I also just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉
Everytime i need to learn something i always check several chanels to find "the guy" but this kid is what he promises. He simplifies the web for us
just love your teaching style, easy to understand , relaxed, focus on what we need.
God
You’re the best bro
I’m literally grinding my way up to programming with your videos for the past 7 months
I love the style of delivery and the direct way to hitting the topic and time....thanks
Man, I'm really impressed by the way you explain the topic! I came to your tutorial from udemy where the guy explained the very same topic but in a cumbersome way! Thanks a lot!
Best useState() video.
You are one of the absolute *best* dev tutorial channels out there. Please never change!
Man, I don’t think there’s anyone who can explain concepts as simple and eloquent as you. Absolutely love your work!
beat my head against the wall all day for trying to learn this hook. this summed everything up in such a concise way! so grateful, keep up the amazing work.
Very very clear. I have searched so much content on this but I still didn't have a very clear understanding on how to use it. You really helped me a lot thanks.
Thanks so much for this very clear and understandable video, I've been playing with React lately and your video made me understand useState more perfectly.
Your clarity in explaining things is second to none....Great one
Hey man....u r my fav Reactjs tutor! Now I got to know y we write "...prevState" in setState method. Thanks!
The coolest teaching style that i have EVER seen!!
TY your English is so easy to understand when I listen to you I feel bilingual :)
I've seen many videos trying to explain state() hook and for me and that is the only video I could really understand properly! Thank you very much!!
Thanks for your video.I was having a hard time learning this and you make it so easy to understand.I appreciate it 💖
I'm new to web development, just shifted from working in design to development. This video was really helpful, you really simplified it. Excellent teaching style, subscribed.
Teacher, lots of love from Nepal! There's no words for you.
You are such an amazing teacher, so clear and so thorough! Wished my teacher was this clear, but I have to ask him so many questions to actually understand what he is explaining. Instead of explaining, he just shows what is done, explaining very little. For example he never explained that const [count, setCount] inside const [count, setCount] = ustState(0) is a destructured array. He also never demonstrated why we use prevState. So when I saw that for the first time I was very confused because I didn't see why that was needed.
Was sooooo confused until I saw this video. 1000/10 thank you!
this video helps me alot man... not about this video but before react i learn css also with yours videos... great man
I was trying for a long time to understand how these hooks work, thank you soo much, great video, great explanation.
As a veteran JS user for YEARS, I needed a crash course in React; your videos have been INCREDIBLY helpful! Thanks for doing this :D
One of the greatest tutorials I have ever seen! Thank you.
so easy explanation and in in-depth, i think. kudos.
This video is brilliant! Detailed useState explanation in a simplified manner with examples.
Thank you
Todo:
Take note of weird usestate behaviour when using previous value of state to set new value. Just use the callback that takes the previous value always.
Breaking down objects into different usestate variables instead of having them in one object