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

[@albirtarsha5370]

The React documentation should link to this video.

[@day2dayja110]

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

[@TheSaintsVEVO]

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

[@rafadydkiemmacha7543]

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

[@roy1299]

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

[@jasonlough6640]

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

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

[@key2010]

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

[@astrophilo2000]

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

[@kimdev11]

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

[@WellActualllyyy]

nice man i still don’t get it

[@jeremey2072]

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

[@CodeSketched]

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

[@rafadydkiemmacha7543]

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

[@CodeSketched]

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

[@rafadydkiemmacha7543]

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

[@shashikanthp3145]

@@rafadydkiemmacha7543 MOVE ON Hater

[@rafadydkiemmacha7543]

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

[@ImVengeance]

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]

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

[@KhiemKimDoPkmn]

aaaaaAaAaa​@@souvikchakraborty9900

[@usmanmir5663]

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

[@Onserio.]

Boooooooooooo!

[@everythingisfine9988]

Yeeeessssssssss!

[@jessejamison128]

go ahead and clock out for me

[@natman882001]

now thats how you useContext()

[@69bruh]

HAHAHA bye.

[@AjeyChandhan]

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

[@djvanschaik]

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!

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

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

[@codinginflow]

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

[@thelonercoder5816]

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

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

[@CST1992]

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.

[@zackyang123]

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

[@sathkur9]

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.

[@AryanLokar]

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

[@kawsar.130]

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

[@mokroargra7277]

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

[@vikas7769]

Bro I need some help

[@CodingAfterThirty]

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.

[@himalayagupta7744]

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

[@snghnishant]

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]

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!

[@reda_el]

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.

[@Technoholicplus]

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.

[@s4lmon134]

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

[@muhammadahmedjaved7691]

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

[@snansahmarov1524]

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

[@HugoSanchez-kd7qz]

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

[@fithamlakfikrie4657]

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

[@_romeopeter]

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.

[@wiz7903]

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

[@steelwolf180]

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.

[@williamboshi1855]

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

[@SportzMobile]

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]

How did the interview go?

[@ffelaar]

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

[@elhaambasheerch7058]

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

[@yuliavasylenko8603]

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

[@crimsoncad3230]

Angular bois finally got some love.

[@pharmokan]

Dozens of us are so happy. DOZENS!

[@juniordev4190]

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

[@ryanmamboudjemtchemeu4289]

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

[@devsauce]

- 1:34 - Ben Awad has entered the chat

[@rain-techstudio2567]

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

[@kocraft137]

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

[@Alex-bc3xe]

most clear, concise and simple explanation on hooks.

[@programmingpython584]

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

[@manibarathi08]

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

[@felipecabreira4321]

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

[@ombhagwani7407]

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

[@zarghamaijaz5933]

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]

Glad it helped!

[@MrRAHUL7777777]

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

[@Chrisknot94]

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

[@McMurchie]

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

[@anth0ni33]

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

[@gracewood6768]

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

[@nikosroom1913]

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

[@vikram87in]

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

[@harikrishnanmidhun1644]

Thanks ! This is so comprehensive and entertaining.

[@athreyamurali1439]

Fantastic video! This makes React so approachable. Love it

[@n0ame1u1]

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

[@caiooliveira6918]

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

[@gautampatadiya6096]

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

[@slimzztv9963]

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

[@hobbiesandmore5633]

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!

[@huseynfy]

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

[@akashthoriya]

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

[@shivanigaddagimath6105]

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

[@FaruhPaerhati]

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

[@pathumjayasuriya5902]

Thanks for quick but clear intro on react hooks.

[@wardenpataski2882]

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

[@kemuelcraig]

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

[@ejthecollector]

Great/quick explanations of each hook, super helpful thanks

[@sebastiancordoba437]

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

[@edwardarinin9678]

same tho...

[@irfanshaik1302]

Lol.... same!!!

[@amarmohammed5644]

brilliant to watch just before a interview :)

[@Skalexsong]

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

[@AbhigyanGautam]

I am learning React and this is the video I needed

[@rjborba]

Very very good way to explain something. Congratulations

[@ozchinesefriendship4316]

Super clear and easy to follow. Thanks mate

[@elabro71]

easy to understand，good hook summary for begginers !

[@chektek_]

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

[@mfranciscoarrigoni]

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

[@shaheenumar4926]

Every second is worth watching this channel.❤️

[@brittmcginnis4001]

Great tutorial! Super clean and concise.

[@remofischer4969]

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

[@3mro_coding]

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

[@hroman_codes]

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

[@saqlainalvi5485]

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.

[@nomtijorti]

Saw Angular Logo with caption (best framework ever).. that's why I'm subscribed. lol

[@pcastillov]

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!

[@emstudios14]

Excellent video on React Hooks.

[@jojacvonkekebau3686]

The timing on this video... Thank you!

[@vishmapdas7898]

I have a feeling that you will add much value to my life. Liked and Subbed.

[@dannyman2200]

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

[@kurtthorsten4463]

srsly your content is insane man. thank you thank you thank you

[@johnnygotti1568]

I never figured out useContext until now... thank you so much man

[@zacktaylor1143]

Your UseEffect explanation was brilliant.

[@tarunkr5352]

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

[@ByteBuf]

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

[@EduardKaresli]

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

[@javadmh7827]

Short & Helpful, I like it

[@chilakalajakeer9957]

Thanks , that was quick & helpful

[@usmanmir5663]

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

[@monfernape]

He actually has one created.

[@day2dayja110]

Where was this video a year ago!!!!!! EXCELLENT!!!!!! 10000/10

[@ujjwalchetan4907]

Very crisp and precise as always 👌👌

[@rpf23543]

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

[@DEVDerr]

Even tho Hooks are extremely amazing and made my code sooooooooo much cleaner, I cannot go through the fact that a lot of them are horribly named. Glad that I can always rename them (in my private project ofc - in company where people collaborate, everything should remain originally named to not make unnecessary confusion in shared workspace). If I would be honest - only your video does cover them very well. Amazing job as always 👍❤️