@@TheSaintsVEVO If you find something you dont know, research it and come back. This applies no matter what level youre at. Id say a beginner would get more out of this video than an expert.
One thing alot of people miss is that on useState in the setter you can actually pass a function to get the prev state value you for say updating a counter which is the correct way. For example setCount(prevCount => prevCount + 1). if you where to call setCount and try modify the value based on the current count value the state would be modified based on the value at that render time. If you call setCount(count + 1) twice it would only infact increase the value by one as both calls would get the prev rendered value and overwrite each other. Hope this helps
You want to know them, just in case you need them. I've been using React since 2019 and I have started with class components. They are, you can say, just a more explicit way of doing the same thing you are doing with hooks. For me it's backwards: instead of getting to use a separate function componentWillUnmount(), I have to remember that the function returned from useEffect() does the same thing.
This video is must of every react developer. He made everything so simple and easy to understand and that to about so much of react features in just 13 minutes.
This is is the only video that not only cleared my hooks concept, but also shows the shortcut method to write eventhandling and state change in one line i.e. ( setNum(num+1)}>plus ) Thank you so much.
Wow, It was actually easy to understand the core concept of the hooks in just 10min, I have seen 40min that could not explain a hook as good as this video. Great work.
This is the only video i have found helpful. it's been a week and i have been struggling with react hooks. I am used to writing classes. Hooks feel very intimidating to me but after watching this video, i feel confident in using hooks instead of writing classes. Thank you for such an easy explanation
In addition to the *useImperativeHandle* hook: you can use this if you have both a *forwardRef* and a *useRef* in your component that you want both to be assign to the same element. You can use the *useImperativeHandle* hook to assign the regular *useRef* ref to the *forwardRef* ref. This is because you can't assign two refs to the same element.
Really easy to understand and helps to point me in the right direction. For a problem, I was stuck on solving a UI component not updating by itself till I click on another component.
It's definitely a tough chunk to digest but it's really interesting to have a peak at what react is since I always looked the other way toward angular and vue
This is really helpful for me. I started learning React without understanding component life cycle completely and was struggling a bit. Now I can useRef() of this video. Thanks!
Dude I'm in love with this channel, speed is perfect, finally someone who is not wasting 5 mins begging for subscribe, or speaking about his life or unrelated topics... And someone who is not writing code, testing and debugging in front of us... this is just perfect srsly... Keep up the perfect work!
Hooks are beautiful. I have projects using both react and vue, both are awesome. I'm a react guy and i think it's easy to learn Vue if you already on intermediate level in React. But I don't know the learning curve if you learn Vue first.
I wish I had seen this video when I began learning hooks. Took me months of study and practice to understand them fully. This would have been a good entry point. Most tutorials fall short.
I have survived just with useState, useEffect and useReduce hooks, and now I can try to understand the others to implement in my projects by watched this video.
Another awesome video. I love React hooks. I just recently started diving into writing custom hooks. It has been an excellent way to create reusable functionality as well as not stuffing all the logic in one file. Thanks for this video.
I'm not a native speaker, so it's sometimes hard to understand for me. But I'm surprised how clearly you explained hooks. It was realy useful. Thank you..
I stumbled on this video but I’m glad I did! I was looking for ways to implement hooks in my program but had no idea what to do with them. When I watched this video I had a “Oh, THAT’S what it does” moment occur multiple times. Thanks for making this!
Done thanks React hooks can be used only at the top level inside the functional component function definition. Hooks: useState useEffect make sure to provide dependencies array, if no dependencies then pass empty array useEffect can have a cleanup function by returning a function from the useEffect callback, will be called when component un mounts useContext lets you share state from a parent component to child components without having to pass props down useRef use when you want to grab a reference to an html elements and programmatically. useContext lets I access the context from the context provider up the tree useReducer is a better alternative to useState as it allows you to dispatch events or actions from ui elements then handle these events in the reducer function. useReducer takes the reducer function which takes the state and the dispatched action so you can do a switch case in the reducer and handle them useMemo to cache computationally expensive values so that they aren’t recalculated on every render. Takes a dependency array like useEffect to decide when to recalculate the value useCallback is like useMemo but it caches an entire function definition. When you define a function in your component, that function gets redefined after every render. useMemo causes the return value to be cached, so the function isn’t run on every rerender but with useCallback the function isn’t redefined on every render. This is useful when ui elements have a reference to that function like if it’s an onclick handler. When that function is redefined the component that has reference to it will get rerendered and useCallback prevents this, it is useful when many ui elements have reference to that function useImperativeHandle
@@arpansaha5638if you need to set state based on previous state, you should use a callback function that receives a previous state as the first argument
@@arpansaha5638 Beacause if you run setCount(count + 1) twice very close to each other, count won't be updated for the second call. Meaning count will be added 1, instead of the expected 2. Meanwhile, if you use prev, React ensures the count is updated before the next call.
1. useState 2. useEffect 3. useContext 4. useMemo 5. useCallback 6. useRef 7. useReducer 8. useImperativeHandler 9. useLayout 10. useDebugValue not in order of the video.. tho. lol Very informative video. Thanks!!! Even 8 and 9 is described as rare, I actually use these very often when building more complicated UI/UX.
One thing to note about `useCallback` is that it isn't _just_ needed to improve performance. Sometimes, we need it because a useEffect depends on the function which can cause infinite loop scenarios. So basically, useCallback can save us from these infinite-loops!
would really want to see a video that would compare react and angular. so far, react with functional components seems so easy and straightforward while angular confuses the hell out of me. Edit: Now that I have watched some beginner videos about angular, I have reached a conclusion that angular is nice and comfortable, but the only thing that annoys me is the template-based html.
This video was exactly what I was looking for. I have been struggling two days to implement a feature and all I needed was the useLayoutEffect() and I didn’t know it existed.
Even if these videos don't explain stuff in detail, they sure give an overview of the topics......which is a huge deal to IT students like me whose textbooks don't even cover Git or ES6!!!!
A correction for the useEffect cleanup function: It won't only run when the component is unmounted, but every time before the useEffect hook is called. In that way, it's not the same as componentDidUnmount, but more of a way to prevent stale data bugs to give the useEffect a blank slate on every run.
Wow, I had a really hard time figuring out precisely how hooks were working until I found this video. It's so clear and explaining the fundamentals (the key). I'm literally looking for a way to join any newsletter you have because I love the way you communicate complex principles.
Really good and informative video which probably should get updated once in a while. One note: 10:39 -- unfortunately this video didn't manage to make it less confusing.
![BOWKYLION - วิงวอน (ex-change) [Official MV]](http://i.ytimg.com/vi/cLdnZWDaO-w/mqdefault.jpg)
The React documentation should link to this video.
That google listening to your thoughts and the algo working in the background lol
This channel's videos aren't beginner friendly.. It only helps people who are already familiar with this stuff.
@@TheSaintsVEVO not in this case. This video is just a copy of the official (poor) docs.
@@TheSaintsVEVO not really.
This video is much better. The docs is.. shall I say confusing
@@TheSaintsVEVO If you find something you dont know, research it and come back. This applies no matter what level youre at. Id say a beginner would get more out of this video than an expert.
Hours of react knowledge distilled in 10 mins. Felt like stealing. Thanks man, great work!
ever noticed stolen things taste better than bought? ... except bricks... those taste the same
facts, time is money bro that's the reason and we are lazy asf
i really thought i would be learning react hooks in 1hr but this guy did in 10 mins, superb!
nice man i still don’t get it
@@WellActualllyyy it will make sense eventually, just keep coding
One thing alot of people miss is that on useState in the setter you can actually pass a function to get the prev state value you for say updating a counter which is the correct way. For example setCount(prevCount => prevCount + 1). if you where to call setCount and try modify the value based on the current count value the state would be modified based on the value at that render time. If you call setCount(count + 1) twice it would only infact increase the value by one as both calls would get the prev rendered value and overwrite each other. Hope this helps
wow i knew that we should use prevcount but never truly knew what could go wrong if i didn't. Thank you man.
aaaaaAaAaa@@souvikchakraborty9900
Learned more about hooks in this single video than all my attempts to learn about them over the past several years!
Interesting, because this video doesn't say anything more than the official guide.
@@rafadydkiemmacha7543 you're right, but the official documentation never felt welcoming enough to read through all the hooks.
@@CodeSketched I completely agree and in my opinion, this video is not welcoming neither. One of the worst ones so far.
@@rafadydkiemmacha7543 MOVE ON Hater
@@shashikanthp3145 so it's not allowed to express opinions anymore, sheep?
When I wanna know about a topic and fireship has already made a video about it is the best feeling. This guy can concisely teach any topic.
now I'm happy that I started learning React in 2022 too lol. I just skipped this whole class thing.
same lol. Class components are so confusing to me but hooks makes it sooo much easier to understand lol.
@@thelonercoder5816 haha yeah! felt good we can just skip what was a major pain in the butt for a lot of devs in the past
You want to know them, just in case you need them. I've been using React since 2019 and I have started with class components. They are, you can say, just a more explicit way of doing the same thing you are doing with hooks. For me it's backwards: instead of getting to use a separate function componentWillUnmount(), I have to remember that the function returned from useEffect() does the same thing.
This video is must of every react developer. He made everything so simple and easy to understand and that to about so much of react features in just 13 minutes.
You explained the whole feature set of the major change React has had in years in 13 minutes! That's just unbelievably awesome! ❤️
Been working with react over 9 months now, learn something new everytime I watch one of your react videos. 🤯
Bro I need some help
This is is the only video that not only cleared my hooks concept, but also shows the shortcut method to write eventhandling and state change in one line i.e. ( setNum(num+1)}>plus ) Thank you so much.
It is insane how well you explained all these hooks in not a lot of time without it seeming rushed/barely brushed over. Thank you!
Wow, It was actually easy to understand the core concept of the hooks in just 10min, I have seen 40min that could not explain a hook as good as this video. Great work.
This is flawless, clear, concise, and thorough. You are an exceptional natural teacher.
For non-native English speakers, I'd recommend watching the video at 0.75 speed.
Pretty dense (yet high quality) information.
short and simple explaination that's what devs want. this is just that.
The amount of information your videos consist is unbelievable, really appreciate your efforts
The great ability of high-level explanations about general and wide concepts in only 13 minutes. thank you!
This is the only video i have found helpful. it's been a week and i have been struggling with react hooks. I am used to writing classes. Hooks feel very intimidating to me but after watching this video, i feel confident in using hooks instead of writing classes. Thank you for such an easy explanation
Glad it helped!
I watched hours video for understanding React Hooks. This video did unbelievable, so easy, just 13 minutes. Thank you from Azerbaijan.
🇦🇲🇦🇲🇦🇲
In addition to the *useImperativeHandle* hook: you can use this if you have both a *forwardRef* and a *useRef* in your component that you want both to be assign to the same element. You can use the *useImperativeHandle* hook to assign the regular *useRef* ref to the *forwardRef* ref. This is because you can't assign two refs to the same element.
never ever have I seen someone explaining complex things in simple and short words like you do
you are a professional at explaining things
I just took an entire college course focused on React, and I learned way more from this video
You youtube channel is simply dream come true for a developer. Short videos, great explanations, etc. It is just awesome
Really easy to understand and helps to point me in the right direction. For a problem, I was stuck on solving a UI component not updating by itself till I click on another component.
Easily the perfect mix of most informative and fun coding channel on the web.
One of the best explanations of React Hooks. Thank you for good stuffs 👌
It's definitely a tough chunk to digest but it's really interesting to have a peak at what react is since I always looked the other way toward angular and vue
Saved my hours to prepare for interview.
Amazed by this video.
Thanks a lot
Hi Akash! Are you still looking for job opportunities currently ? Would you be interested in exploring a job opportunity in web development?
This is really helpful for me. I started learning React without understanding component life cycle completely and was struggling a bit. Now I can useRef() of this video. Thanks!
Many videos I saw but this one is simple specific and easy to understand… thanks
You completed the 3 months topic in few minutes . Great work 👏
Dude I'm in love with this channel, speed is perfect, finally someone who is not wasting 5 mins begging for subscribe, or speaking about his life or unrelated topics... And someone who is not writing code, testing and debugging in front of us... this is just perfect srsly... Keep up the perfect work!
My god, you explained the concepts and more in much better fashion than toiling over the docs for a week
I kinda struggled to understand how to create a custom hooks before, but now I understand it after watching your explanation thank you :)
This is literally the best youtube channel I have every found. THANK YOU!
I am watching this before my interview and it is helping me with my anxiety...
I am feeling calm...
I have never used React before, and this video has made me that much more comfortable sticking with Vue 😅
Hooks are beautiful. I have projects using both react and vue, both are awesome. I'm a react guy and i think it's easy to learn Vue if you already on intermediate level in React. But I don't know the learning curve if you learn Vue first.
After last working with React in 2016, coming back to it again is super confusing. But this video got me up to speed real quickly!
i was here to revise my concepts and you got it all covered in 13mins , thanks a lot .!!
Thank you very much Fireship.. So much to learn from single video.
I have watched this like 17 times and I’m learning each time again lol thank you
I wish I had seen this video when I began learning hooks. Took me months of study and practice to understand them fully. This would have been a good entry point. Most tutorials fall short.
Thank you for this video - as a boomer coming from the old class-based ways, I wasn't up to speed on all of the built-in hooks.
Thank you for this! Used this a refresher and absolutely loved it. Wish we had a few more examples of each hook.
The best React Hooks video I've seen so far.
Thank you for providing a such compelling video.
Niiice another concise hook video in plain english. This is why this is my favourite dev channel 👍🏻👌🏻
You have me *”hook”* ed to this channel.
Boooooooooooo!
Yeeeessssssssss!
go ahead and clock out for me
now thats how you useContext()
HAHAHA bye.
Wonderful information in just 10mins. You're a national treasure!!!
I have survived just with useState, useEffect and useReduce hooks, and now I can try to understand the others to implement in my projects by watched this video.
this is the most amazing, concise, digestible video i've ever watch. Huge props!
Where was this video a year ago!!!!!! EXCELLENT!!!!!! 10000/10
Another awesome video. I love React hooks. I just recently started diving into writing custom hooks.
It has been an excellent way to create reusable functionality as well as not stuffing all the logic in one file.
Thanks for this video.
I'm not a native speaker, so it's sometimes hard to understand for me. But I'm surprised how clearly you explained hooks. It was realy useful. Thank you..
I stumbled on this video but I’m glad I did!
I was looking for ways to implement hooks in my program but had no idea what to do with them. When I watched this video I had a “Oh, THAT’S what it does” moment occur multiple times.
Thanks for making this!
So simple and useful! Thanks a lot for explaining these things in the most understandable manner.
1:34 (best framework ever) - I just can't agree more :)
LOL
Done thanks
React hooks can be used only at the top level inside the functional component function definition.
Hooks:
useState
useEffect make sure to provide dependencies array, if no dependencies then pass empty array
useEffect can have a cleanup function by returning a function from the useEffect callback, will be called when component un mounts
useContext lets you share state from a parent component to child components without having to pass props down
useRef use when you want to grab a reference to an html elements and programmatically. useContext lets I access the context from the context provider up the tree
useReducer is a better alternative to useState as it allows you to dispatch events or actions from ui elements then handle these events in the reducer function. useReducer takes the reducer function which takes the state and the dispatched action so you can do a switch case in the reducer and handle them
useMemo to cache computationally expensive values so that they aren’t recalculated on every render. Takes a dependency array like useEffect to decide when to recalculate the value
useCallback is like useMemo but it caches an entire function definition. When you define a function in your component, that function gets redefined after every render. useMemo causes the return value to be cached, so the function isn’t run on every rerender but with useCallback the function isn’t redefined on every render. This is useful when ui elements have a reference to that function like if it’s an onclick handler. When that function is redefined the component that has reference to it will get rerendered and useCallback prevents this, it is useful when many ui elements have reference to that function
useImperativeHandle
I learned that "if/else if" computes 3 times faster if you use the "===".
So I make use of that instead of the switch inside a reducer function!
By experience or do you have a link to an official resource?
To avoid bugs in your case you should rather use setCount(prev => prev + 1) instead of setCount(count + 1).
True👍
Can you elaborate on how this method results helps avoid bugs compared to the other method?
@@arpansaha5638if you need to set state based on previous state, you should use a callback function that receives a previous state as the first argument
@@arpansaha5638 Beacause if you run setCount(count + 1) twice very close to each other, count won't be updated for the second call. Meaning count will be added 1, instead of the expected 2. Meanwhile, if you use prev, React ensures the count is updated before the next call.
Thanks for quick but clear intro on react hooks.
Omg, today i was thinking of reviewing react hooks and this video show up, thanks!
same tho...
Lol.... same!!!
1. useState
2. useEffect
3. useContext
4. useMemo
5. useCallback
6. useRef
7. useReducer
8. useImperativeHandler
9. useLayout
10. useDebugValue
not in order of the video.. tho. lol
Very informative video. Thanks!!!
Even 8 and 9 is described as rare, I actually use these very often when building more complicated UI/UX.
Well done man , I didn't expect this much clarity in just 13 minutes, but you explained everything perfectly. Thanks
This was amazing, it took me over an hour to write down the notes so much knowledge
- 1:34
- Ben Awad has entered the chat
One thing to note about `useCallback` is that it isn't _just_ needed to improve performance. Sometimes, we need it because a useEffect depends on the function which can cause infinite loop scenarios. So basically, useCallback can save us from these infinite-loops!
Yeah, but only if you include all functions/variables in your dependency array, like EsLint/TS wants you to do..
This video really helped me a lot, Im doing the Meta certification but they guy explaining this on the course sounds like an NPC.
Thank you Jeff!
I don't need to spend more time to get understand hook concept in react.
Many thanks for awesome video.
Your UseEffect explanation was brilliant.
easy to understand，good hook summary for begginers !
I am learning React and this is the video I needed
best of the best. I never understood each of them but now I got a grasp about it.!
I always come back to this video to a fast/clean explanation of react hooks ! Thanks for the content my man ! Amazing :)
you are ridiculously good at explaining things succinctly in a short amount of time - thank you for this great content.
Fast, Quick and Simple... Definitions
Saw Angular Logo with caption (best framework ever)..
that's why I'm subscribed. lol
Thanks for showing the differences between functional components and class-based components
would really want to see a video that would compare react and angular.
so far, react with functional components seems so easy and straightforward while angular confuses the hell out of me.
Edit: Now that I have watched some beginner videos about angular, I have reached a conclusion that angular is nice and comfortable, but the only thing that annoys me is the template-based html.
I never figured out useContext until now... thank you so much man
This video was exactly what I was looking for. I have been struggling two days to implement a feature and all I needed was the useLayoutEffect() and I didn’t know it existed.
Even if these videos don't explain stuff in detail, they sure give an overview of the topics......which is a huge deal to IT students like me whose textbooks don't even cover Git or ES6!!!!
Most useful video I’ve watched on hooks
I just posted a video on a similar topic (in 2023) - maybe this could be interesting for you as well. 😉
No nonsense to the point thanks for the tutorial
brilliant to watch just before a interview :)
Very very good way to explain something. Congratulations
This channel is the fresh breath of air for devs♥️
Maan! I love taking tour in your channel you deliver clean and conscious contents.
Every second is worth watching this channel.❤️
A correction for the useEffect cleanup function:
It won't only run when the component is unmounted, but every time before the useEffect hook is called.
In that way, it's not the same as componentDidUnmount, but more of a way to prevent stale data bugs to give the useEffect a blank slate on every run.
really? wouldn't that be non performant
Wow, I had a really hard time figuring out precisely how hooks were working until I found this video. It's so clear and explaining the fundamentals (the key). I'm literally looking for a way to join any newsletter you have because I love the way you communicate complex principles.
You have no idea how much I need this
Angular bois finally got some love.
Dozens of us are so happy. DOZENS!
@フルブライトケネス what r u talking about? V12 has just launched.
Really good and informative video which probably should get updated once in a while.
One note: 10:39 -- unfortunately this video didn't manage to make it less confusing.
Thanks ! This is so comprehensive and entertaining.
Love the pace you have in your videos. And the visuals is just stunnig
This is amazingly easy to understand with just 10 minutes!! Thanks a lot great man!
For anyone wondering, the double question mark on minute 12:50 returns the right hand value only if the left value is null or undefined.
Is it available on javascript? I knew that from dart/flutter and was looking for the javascript equivalent.
@@Hendika yes, this works Javascript not just react.
Cool, its very handy
Great/quick explanations of each hook, super helpful thanks
Yea... I understood absolutely NOTHING, but I loved it!!
Steve Carell is always appreciated.
He deserves a lifetime achievement award for his gif reactions
@@Fireship you save so much time for so many developers with concise info, great job