10 React Hooks Explained // Plus Build your own from Scratch

Ғылым және технология

React hooks provide a highly-efficient was to tap into framework features and organize reactive logic. Learn how use every built-in React hook fireship.io/courses/react-nex...
00:00 Why React Hooks?
02:20 useState
03:50 useEffect
05:55 useContext
06:58 useRef
07:58 useReducer
09:27 useMemo
10:12 useCallback
10:40 useImperativeHandle
11:18 useLayoutEffect
11:43 useDebugValue & Custom Hooks
#webdev #js #react
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

Пікірлер: 844

  • @albirtarsha5370
    @albirtarsha53703 жыл бұрын

    The React documentation should link to this video.

  • @day2dayja110

    @day2dayja110

    3 жыл бұрын

    That google listening to your thoughts and the algo working in the background lol

  • @TheSaintsVEVO

    @TheSaintsVEVO

    3 жыл бұрын

    This channel's videos aren't beginner friendly.. It only helps people who are already familiar with this stuff.

  • @rafadydkiemmacha7543

    @rafadydkiemmacha7543

    3 жыл бұрын

    @@TheSaintsVEVO not in this case. This video is just a copy of the official (poor) docs.

  • @roy1299

    @roy1299

    3 жыл бұрын

    @@TheSaintsVEVO not really. This video is much better. The docs is.. shall I say confusing

  • @jasonlough6640

    @jasonlough6640

    3 жыл бұрын

    @@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.

  • @RohitSharma-vq2gn
    @RohitSharma-vq2gn3 жыл бұрын

    Hours of react knowledge distilled in 10 mins. Felt like stealing. Thanks man, great work!

  • @key2010

    @key2010

    2 жыл бұрын

    ever noticed stolen things taste better than bought? ... except bricks... those taste the same

  • @astrophilo2000

    @astrophilo2000

    2 жыл бұрын

    facts, time is money bro that's the reason and we are lazy asf

  • @kimdev11

    @kimdev11

    Жыл бұрын

    i really thought i would be learning react hooks in 1hr but this guy did in 10 mins, superb!

  • @WellActualllyyy

    @WellActualllyyy

    3 ай бұрын

    nice man i still don’t get it

  • @jeremey2072

    @jeremey2072

    23 күн бұрын

    @@WellActualllyyy it will make sense eventually, just keep coding

  • @CodeSketched
    @CodeSketched3 жыл бұрын

    Learned more about hooks in this single video than all my attempts to learn about them over the past several years!

  • @rafadydkiemmacha7543

    @rafadydkiemmacha7543

    3 жыл бұрын

    Interesting, because this video doesn't say anything more than the official guide.

  • @CodeSketched

    @CodeSketched

    3 жыл бұрын

    @@rafadydkiemmacha7543 you're right, but the official documentation never felt welcoming enough to read through all the hooks.

  • @rafadydkiemmacha7543

    @rafadydkiemmacha7543

    3 жыл бұрын

    @@CodeSketched I completely agree and in my opinion, this video is not welcoming neither. One of the worst ones so far.

  • @shashikanthp3145

    @shashikanthp3145

    3 жыл бұрын

    @@rafadydkiemmacha7543 MOVE ON Hater

  • @rafadydkiemmacha7543

    @rafadydkiemmacha7543

    3 жыл бұрын

    @@shashikanthp3145 so it's not allowed to express opinions anymore, sheep?

  • @ImVengeance
    @ImVengeance3 жыл бұрын

    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

  • @souvikchakraborty9900

    @souvikchakraborty9900

    8 ай бұрын

    wow i knew that we should use prevcount but never truly knew what could go wrong if i didn't. Thank you man.

  • @KhiemKimDoPkmn

    @KhiemKimDoPkmn

    2 ай бұрын

    aaaaaAaAaa​@@souvikchakraborty9900

  • @usmanmir5663
    @usmanmir56633 жыл бұрын

    You have me *”hook”* ed to this channel.

  • @Onserio.

    @Onserio.

    3 жыл бұрын

    Boooooooooooo!

  • @everythingisfine9988

    @everythingisfine9988

    3 жыл бұрын

    Yeeeessssssssss!

  • @jessejamison128

    @jessejamison128

    3 жыл бұрын

    go ahead and clock out for me

  • @natman882001

    @natman882001

    3 жыл бұрын

    now thats how you useContext()

  • @69bruh

    @69bruh

    3 жыл бұрын

    HAHAHA bye.

  • @codinginflow
    @codinginflow2 жыл бұрын

    now I'm happy that I started learning React in 2022 too lol. I just skipped this whole class thing.

  • @thelonercoder5816

    @thelonercoder5816

    Жыл бұрын

    same lol. Class components are so confusing to me but hooks makes it sooo much easier to understand lol.

  • @cycla

    @cycla

    Жыл бұрын

    @@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

  • @Surya-np1bb
    @Surya-np1bb Жыл бұрын

    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.

  • @AjeyChandhan
    @AjeyChandhan2 жыл бұрын

    You explained the whole feature set of the major change React has had in years in 13 minutes! That's just unbelievably awesome! ❤️

  • @devsauce
    @devsauce3 жыл бұрын

    - 1:34 - Ben Awad has entered the chat

  • @djvanschaik
    @djvanschaik2 жыл бұрын

    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!

  • @SportzMobile
    @SportzMobile8 ай бұрын

    Dude, u rock. If there a medal for crash course (just before an interview), this is it !!! I have an interview tomorrow and I just can't thank you enough for the revision material. Rock on !!

  • @alexandergeorgesquire220

    @alexandergeorgesquire220

    3 ай бұрын

    How did the interview go?

  • @zackyang123
    @zackyang1233 жыл бұрын

    This is flawless, clear, concise, and thorough. You are an exceptional natural teacher.

  • @Jorschm
    @Jorschm Жыл бұрын

    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.

  • @EduardKaresli
    @EduardKaresli3 жыл бұрын

    For non-native English speakers, I'd recommend watching the video at 0.75 speed. Pretty dense (yet high quality) information.

  • @mokroargra7277
    @mokroargra72773 жыл бұрын

    Been working with react over 9 months now, learn something new everytime I watch one of your react videos. 🤯

  • @vikas7769

    @vikas7769

    2 жыл бұрын

    Bro I need some help

  • @snansahmarov1524
    @snansahmarov15243 жыл бұрын

    I watched hours video for understanding React Hooks. This video did unbelievable, so easy, just 13 minutes. Thank you from Azerbaijan.

  • @AryanLokar
    @AryanLokar3 жыл бұрын

    The amount of information your videos consist is unbelievable, really appreciate your efforts

  • @muhammadahmedjaved7691
    @muhammadahmedjaved76913 жыл бұрын

    never ever have I seen someone explaining complex things in simple and short words like you do you are a professional at explaining things

  • @sathkur9
    @sathkur93 жыл бұрын

    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.

  • @reda_el
    @reda_el3 жыл бұрын

    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.

  • @himalayagupta7744
    @himalayagupta77442 жыл бұрын

    Well done man , I didn't expect this much clarity in just 13 minutes, but you explained everything perfectly. Thanks

  • @usmanmir5663
    @usmanmir56633 жыл бұрын

    A video about React Native! And Compare it with Flutter.

  • @monfernape

    @monfernape

    3 жыл бұрын

    He actually has one created.

  • @HugoSanchez-kd7qz
    @HugoSanchez-kd7qzКүн бұрын

    Thank you for this! Used this a refresher and absolutely loved it. Wish we had a few more examples of each hook.

  • @crimsoncad3230
    @crimsoncad32303 жыл бұрын

    Angular bois finally got some love.

  • @pharmokan

    @pharmokan

    2 жыл бұрын

    Dozens of us are so happy. DOZENS!

  • @juniordev4190

    @juniordev4190

    2 жыл бұрын

    @フルブライトケネス what r u talking about? V12 has just launched.

  • @ali-celebi
    @ali-celebi3 жыл бұрын

    1:34 (best framework ever) - I just can't agree more :)

  • @pradeepsaravanan4348

    @pradeepsaravanan4348

    2 жыл бұрын

    LOL

  • @s4lmon134
    @s4lmon1342 жыл бұрын

    this is the most amazing, concise, digestible video i've ever watch. Huge props!

  • @kawsar.130
    @kawsar.130 Жыл бұрын

    One of the best explanations of React Hooks. Thank you for good stuffs 👌

  • @fithamlakfikrie4657
    @fithamlakfikrie4657 Жыл бұрын

    The great ability of high-level explanations about general and wide concepts in only 13 minutes. thank you!

  • @Technoholicplus
    @Technoholicplus3 жыл бұрын

    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.

  • @ffelaar
    @ffelaar2 жыл бұрын

    you are ridiculously good at explaining things succinctly in a short amount of time - thank you for this great content.

  • @CodingAfterThirty
    @CodingAfterThirty3 жыл бұрын

    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.

  • @sebastiancordoba437
    @sebastiancordoba4373 жыл бұрын

    Omg, today i was thinking of reviewing react hooks and this video show up, thanks!

  • @edwardarinin9678

    @edwardarinin9678

    3 жыл бұрын

    same tho...

  • @irfanshaik1302

    @irfanshaik1302

    3 жыл бұрын

    Lol.... same!!!

  • @wiz7903
    @wiz79033 жыл бұрын

    You always manage to put out a video that i just need in that exact moment. Simply amazing. Keep up the good work

  • @snghnishant
    @snghnishant3 жыл бұрын

    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!

  • @devmeta1478
    @devmeta14782 жыл бұрын

    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!

  • @williamboshi1855
    @williamboshi18553 жыл бұрын

    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

  • @yuliavasylenko8603
    @yuliavasylenko86032 жыл бұрын

    So simple and useful! Thanks a lot for explaining these things in the most understandable manner.

  • @_romeopeter
    @_romeopeter2 жыл бұрын

    This is awesome 🔥 I've been preparing myself for upcoming interviews I'm going to have and this has explained reacts hooks quite for me, it'll come in handy when asked.

  • @n0ame1u1
    @n0ame1u12 жыл бұрын

    I just took an entire college course focused on React, and I learned way more from this video

  • @elhaambasheerch7058
    @elhaambasheerch7058 Жыл бұрын

    Easily the perfect mix of most informative and fun coding channel on the web.

  • @quachhengtony7651
    @quachhengtony76513 жыл бұрын

    1:35 @BenAwad

  • @alperalkan2000

    @alperalkan2000

    3 жыл бұрын

    was about to say that too

  • @lucass5852

    @lucass5852

    3 жыл бұрын

    Glad I wasn't the only one who thought about this, what would he say about it lol

  • @albertrisenielsen1405

    @albertrisenielsen1405

    3 жыл бұрын

    Yeah watching both of these seem like heresy on some level

  • @kocraft137
    @kocraft1373 жыл бұрын

    Love the pace you have in your videos. And the visuals is just stunnig

  • @rain-techstudio2567
    @rain-techstudio25672 жыл бұрын

    This is amazingly easy to understand with just 10 minutes!! Thanks a lot great man!

  • @felipecabreira4321
    @felipecabreira4321 Жыл бұрын

    I always come back to this video to a fast/clean explanation of react hooks ! Thanks for the content my man ! Amazing :)

  • @mattshnoop
    @mattshnoop3 жыл бұрын

    I have never used React before, and this video has made me that much more comfortable sticking with Vue 😅

  • @degitgitagitya9473

    @degitgitagitya9473

    3 жыл бұрын

    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.

  • @nukemonk
    @nukemonk3 жыл бұрын

    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.

  • @steelwolf180
    @steelwolf1802 жыл бұрын

    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.

  • @kemuelcraig
    @kemuelcraig3 жыл бұрын

    Literally researching react hooks today only for you to release this, fireship with the clutch content lol

  • @vikram87in
    @vikram87in2 жыл бұрын

    It's so amazing how this guy can pack so much data into such a small video.. respect. Great video 😍😍

  • @nikosroom1913
    @nikosroom1913 Жыл бұрын

    This is literally the best youtube channel I have every found. THANK YOU!

  • @zarghamaijaz5933
    @zarghamaijaz59333 жыл бұрын

    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

  • @Fireship

    @Fireship

    3 жыл бұрын

    Glad it helped!

  • @manibarathi08
    @manibarathi083 жыл бұрын

    Even thought I know about hooks...It's amazing that you are able to give so much value and information in such a short video...Enjoyed ever bit of it...💙

  • @ryanmamboudjemtchemeu4289
    @ryanmamboudjemtchemeu42892 жыл бұрын

    The best React Hooks video I've seen so far. Thank you for providing a such compelling video.

  • @akashthoriya
    @akashthoriya2 жыл бұрын

    Saved my hours to prepare for interview. Amazed by this video. Thanks a lot

  • @shivanigaddagimath6105

    @shivanigaddagimath6105

    2 жыл бұрын

    Hi Akash! Are you still looking for job opportunities currently ? Would you be interested in exploring a job opportunity in web development?

  • @McMurchie
    @McMurchie2 жыл бұрын

    This was amazing, it took me over an hour to write down the notes so much knowledge

  • @Alex-bc3xe
    @Alex-bc3xe Жыл бұрын

    most clear, concise and simple explanation on hooks.

  • @MrRAHUL7777777
    @MrRAHUL77777773 ай бұрын

    You completed the 3 months topic in few minutes . Great work 👏

  • @anth0ni33
    @anth0ni332 жыл бұрын

    Wonderful information in just 10mins. You're a national treasure!!!

  • @wardenpataski2882
    @wardenpataski28823 жыл бұрын

    I kinda struggled to understand how to create a custom hooks before, but now I understand it after watching your explanation thank you :)

  • @caiooliveira6918
    @caiooliveira69183 жыл бұрын

    Awesome guide! You explained well, and took your time showing it! I like this video format better

  • @chektek_
    @chektek_3 жыл бұрын

    Awesome content! Would love to see a full Angular life-cycle hook video!

  • @pathumjayasuriya5902
    @pathumjayasuriya59023 жыл бұрын

    Thanks for quick but clear intro on react hooks.

  • @ombhagwani7407
    @ombhagwani74077 ай бұрын

    i was here to revise my concepts and you got it all covered in 13mins , thanks a lot .!!

  • @Chrisknot94
    @Chrisknot943 жыл бұрын

    Niiice another concise hook video in plain english. This is why this is my favourite dev channel 👍🏻👌🏻

  • @AbhigyanGautam
    @AbhigyanGautam3 жыл бұрын

    I am learning React and this is the video I needed

  • @athreyamurali1439
    @athreyamurali14393 жыл бұрын

    Fantastic video! This makes React so approachable. Love it

  • @huseynfy
    @huseynfy2 жыл бұрын

    Very easy to understand and very valuable video for beginners! Thanks man!

  • @FaruhPaerhati
    @FaruhPaerhati3 жыл бұрын

    My god, you explained the concepts and more in much better fashion than toiling over the docs for a week

  • @xenon4602
    @xenon46023 жыл бұрын

    1:33, yes! Angular the best framework ever ❤❤❤❤❤❤❤❤❤

  • @orlandogarcia4403

    @orlandogarcia4403

    3 жыл бұрын

    Yeaaah

  • @tarunkr5352
    @tarunkr5352 Жыл бұрын

    short and simple explaination that's what devs want. this is just that.

  • @filipjnc
    @filipjnc3 жыл бұрын

    To avoid bugs in your case you should rather use setCount(prev => prev + 1) instead of setCount(count + 1).

  • @codeaperture

    @codeaperture

    3 жыл бұрын

    True👍

  • @arpansaha5638

    @arpansaha5638

    10 ай бұрын

    Can you elaborate on how this method results helps avoid bugs compared to the other method?

  • @EpicKeyz

    @EpicKeyz

    9 ай бұрын

    @@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

  • @gerhard_adler

    @gerhard_adler

    7 ай бұрын

    @@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.

  • @ejthecollector
    @ejthecollector11 ай бұрын

    Great/quick explanations of each hook, super helpful thanks

  • @programmingpython584
    @programmingpython584 Жыл бұрын

    You youtube channel is simply dream come true for a developer. Short videos, great explanations, etc. It is just awesome

  • @TangoIndiaMike144
    @TangoIndiaMike1443 жыл бұрын

    Steve Carell is always appreciated.

  • @Fireship

    @Fireship

    3 жыл бұрын

    He deserves a lifetime achievement award for his gif reactions

  • @yt-sh

    @yt-sh

    2 жыл бұрын

    @@Fireship you save so much time for so many developers with concise info, great job

  • @jojacvonkekebau3686
    @jojacvonkekebau36863 жыл бұрын

    The timing on this video... Thank you!

  • @ozchinesefriendship4316
    @ozchinesefriendship43162 жыл бұрын

    Super clear and easy to follow. Thanks mate

  • @slimzztv9963
    @slimzztv99632 жыл бұрын

    I have watched this like 17 times and I’m learning each time again lol thank you

  • @brittmcginnis4001
    @brittmcginnis40013 жыл бұрын

    Great tutorial! Super clean and concise.

  • @hobbiesandmore5633
    @hobbiesandmore56332 жыл бұрын

    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!

  • @gautampatadiya6096
    @gautampatadiya60962 жыл бұрын

    Many videos I saw but this one is simple specific and easy to understand… thanks

  • @harikrishnanmidhun1644
    @harikrishnanmidhun16446 ай бұрын

    Thanks ! This is so comprehensive and entertaining.

  • @Skalexsong
    @Skalexsong3 жыл бұрын

    This is really makes the reactive feature looks very easy, thanks :)

  • @aakashjadhav327
    @aakashjadhav3272 жыл бұрын

    I am watching this before my interview and it is helping me with my anxiety... I am feeling calm...

  • @mfranciscoarrigoni
    @mfranciscoarrigoni3 жыл бұрын

    Excellent video! I appreciate very much for the commitment to share such useful information 🙌

  • @ByteBuf
    @ByteBuf8 ай бұрын

    Amazing work, learned more here than I have in years!

  • @gracewood6768
    @gracewood67683 жыл бұрын

    best of the best. I never understood each of them but now I got a grasp about it.!

  • @hroman_codes
    @hroman_codes2 жыл бұрын

    This was amazing and to the point. Thank you 🙏🏻

  • @rpf23543
    @rpf235439 ай бұрын

    Awesome content!!!! Please more of this kind! Thank you so much!

  • @amarmohammed5644
    @amarmohammed5644 Жыл бұрын

    brilliant to watch just before a interview :)

  • @dannyman2200
    @dannyman22003 жыл бұрын

    Love the videos dude, especially how they have a certain flow to them, it would be super interesting if you could make a video on you making one of your normal tutorials??

  • @saqlainalvi5485
    @saqlainalvi54852 жыл бұрын

    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.

  • @Chaaos2
    @Chaaos23 жыл бұрын

    Sick video! Looking forward to the next js with firebase guide.

  • @3mro_coding
    @3mro_coding2 жыл бұрын

    Maan! I love taking tour in your channel you deliver clean and conscious contents.

  • @remofischer4969
    @remofischer49693 жыл бұрын

    Thanks for the Video. I know now that i will stay with Svelte.

  • @punio4
    @punio43 жыл бұрын

    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.

  • @glowiever

    @glowiever

    3 жыл бұрын

    really? wouldn't that be non performant

  • @josephuwagwu3069
    @josephuwagwu30693 жыл бұрын

    Excellent content, thank you for sharing your knowledge .

  • @shaheenumar4926
    @shaheenumar49263 жыл бұрын

    Every second is worth watching this channel.❤️

  • @pjalex98
    @pjalex983 жыл бұрын

    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.

  • @Euquila
    @Euquila3 жыл бұрын

    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!

  • @michaelraring9473

    @michaelraring9473

    Жыл бұрын

    Yeah, but only if you include all functions/variables in your dependency array, like EsLint/TS wants you to do..

  • @zacktaylor1143
    @zacktaylor11432 жыл бұрын

    Your UseEffect explanation was brilliant.

Келесі