Why React Hooks?

[@IPIgorPieruccini]

I was paying attention to every single detail until Rafiki "throw-away" Simba, then I totally lost my track. Although I manage to watch the entire video and is explained incredibly well. Excellent!

[@andyengle]

Haha same here. I rewinded, closed my eyes and listened. A little more clear doing it that way, I found.

[@rauldeandrade]

@@andyengle same here

[@compedium]

same, gifs distract sometimes.

[@leeopperman1783]

I was going to come here to say the exact same thing, that part really distracted me. I eventually just closed my eyes.

[@byjackli]

and the crowd goes wild !!!

[@roberthinckley7508]

I love the way that you explain things. Most tutorials I've seen just show how to implement the code step by step (for total beginners), but your tutorials explain the reasoning behind it. Way more concise and valuable. Sad there's not more free content shared on KZbin though....

[@compedium]

agreed, this is amazing. It gives the context,history, and 'why' before just diving into code. I got more out of these 15 minutes than I have in any other tutorial.

[@mattLake1455]

This video is explained incredibly well

[@uidotdev]

Thank you Matteo!

[@Lambdaphile]

I don't think I've seen anyone else in the JS community explaining things in this level of clarity :)

[@uidotdev]

Thank you!

[@smithcodes1243]

This guy is so good at explaining things, one of the best teachers hands down! I will enroll in your course now!

[@arnulfoloredo1079]

Nice. I tried to learn React almost 3 years ago, and now 2 weeks ago I started again; in these weeks I've been doing a project, and came across these two paradigms and didn't understand the difference between them. Plus I barely remembered the createClass paradigm. This video explains very well what is a Class component and a function component. But now I have a project with some Class components and some function components. At least now I know what I have to refactor. Thanks for this cool video.

[@spongechameleon6940]

Bruh thank god for this video. This primer along with Ben Awad's technical hooks walkthrough has a young man feeling educated AF out here.

[@SBDavin]

I can't wait until they change how to create components and relearn React (again).

[@ruxaa2224]

Could be worse if Angular.

[@johnm8358]

Hey same with vue

[@tedigrizli]

Excellent introduction. I'm studying React but I never really got a clear understanding of what's so special about Hooks (being someone that never had to deal with classes and the problems that you mentioned in your video). So I started looking around for specific examples / comparisons of how a React hook improves the current code, and this is the only video I found that focuses on this exact topic. Thanks for clearing it up for me!

[@caoimghgin]

I simply could not wrap my head around this. Now, I 'get it'. Thanks for doing this. A life saver!

[@cli23]

Love this - especially the first chunk that explains the "why?". I never really felt the need to start using hooks until now :)

[@uidotdev]

Glad you enjoyed it!

[@Andrei-xb1pz]

Many people know react hooks but to find people know how to explain it is a bit harder. Congrats!

[@Deepakkumar431]

This is the first video I see which explains the real benefits of hooks instead of just saying "we can use states inside a functional component."

[@uidotdev]

Glad you enjoyed it!

[@yebot]

For real. For months I’ve been trying to find a reason, a real world problem that React Hooks solves and this video is the first example I’ve come across.

[@simonswiss]

Teaching a workshop tomorrow, and this is such a powerful refresher on the history or how React components have been written over time. Awesome stuff Tyler!

[@uidotdev]

You're welcome! Good luck with the workshop!

[@melvinlijiabraham4165]

This video made me change my mind about functional components. I guess I will stick to functional components from now on. Thanks for such a great explanation

[@EvilTim1911]

I'm returning to the React world after working with Angular for a while and hooks were an unfamiliar topic for me because class-based components, lifecycle methods and setState() were the norm when I was still using React. This video was just what I needed to get up and running again because I'm exactly the type of guy who asks "but why do I need this though?". Great stuff

[@uidotdev]

Glad it was helpful! Welcome back to React land.

[@bojanadrangova7189]

This is one of the well rounded explanation on hooks (and why are they great) I've seen. It was so short but so well put together. Bravo. Getting a subscriber.

[@uidotdev]

Thank you!

[@carlosreis9775]

Thank you so much!! The history of where these changes come from is very important, and one of the best videos so far in react.

[@johnm8358]

As someone trying to understand the progressive changes to react this is an excellent vid

[@TeParamount]

Thank you so much, I've been thinking about this all day and this has answered all my questions.

[@j1ooz3]

Thanks for the video! I really liked how you first explained *why* instead of directly starting with "what". That made it way easier to understand the concepts.

[@uidotdev]

Glad you enjoyed it. Thanks for the kind words.

[@RyanBriscall]

As most here have already said, you explained this well, covering the history, showing code samples + before and after, and the reasoning, but most importantly in a short amount of time (the primary reason I clicked this video (I will click videos that are 5min, 10min, and 15min being the max)). You also speak calmly from a neutral stance; I could not sense any frustration or whining in your tone of voice. Keep it up!

[@uidotdev]

Thanks so much Ryan! Glad you found it useful.

[@Equilibrier]

On of the best tutorial I've ever viewed. Thanks, these were complicated things for me, but you lighted up the dark ! :)

[@diegovillafane6313]

Dude, it's so so so important to give perspective, thank you! This was elinghtening.

[@OurPastSecrets]

A great detail of the reasoning and history, thanks Tyler

[@edcoronado]

This is awesome. Thanks for sharing but I think you also missed talking about the beautiful combination of Context and the “useContext” hook. I think these together make using something like redux or mobx unnecessary in most cases. It’s extremely intuitive and less cluttered. Thanks for your content! Really liked how you explained the history of the “why”

[@jasonwelsh417]

This is my new favorite channel. I will be subscribing to your courses. Thanks for explaining things so well.

[@uidotdev]

Thanks Jason!

[@commanderchbib]

Anyone else here cause they didn't wanna watch the 1h35m video from the React Conf? :-)

[@uidotdev]

Welcome! :)

[@adeshas83]

like seriously all the videos are over an hour ......so annoying

[@devolee8302]

I watched it but amazingly this one actually covers the history and reasonings better.

[@arihasan3423]

hahah!!

[@ajeetworking]

haha...exaclty

[@bahaaaddinbalashoni9123]

Just loved the way you introduced the design pattern of the hooks, and what problems it solves. I'm actually now very intrigued to go and read the hooks part in React's source code, to know how they implemented the reactivity there. Thanks. Keep going with what you do.

[@uidotdev]

Thank you!

[@codewithguillaume]

Thank you so much for this quick course, it was impressive! Very well explained, in just 15 min I could put words on something I experienced since years ! Subscribing now :)

[@kristianlonergan2920]

Very clear and concise points!

[@adeshas83]

This is prob the best new react video out there...gosh...the history lesson was exceptional to watch

[@uidotdev]

Thank you! Means a lot.

[@alex_chugaev]

Angular: makes a single evolutional change, gets loads of hate React: changes every 2 years, everybody's happy. How?!

[@u4yk]

Because Facebook.

[@martapfahl940]

I dont know Angular yet but maybe the change in Angular was tremendous and the changes in React are simple but extremly improving everything? Don't know but there is a reason for everything

[@rakeshchary4235]

Why did I miss this channel when I started learning react

[@marceli-wac]

Excellent explanation! Awesome job in conveying the whole concept in bare 14 minutes!

[@uidotdev]

Thank you!

[@lietuvisdarius]

Very useful video, absolutely nailed it, but problem is , actually very little one (not only this video), when you editing video/audio please make spaces/gaps a bit longer between end and start new sentence , even for few more milliseconds, for not english speaking people is hard to understand , to quick information goes through . But that’s happens in 80% new videos, it's kind of very popular these days :) Apart of that this is the best video ever about hooks! Good job Tyler.

[@uidotdev]

That's great feedback. Thank you!

[@geekybrains]

The best intro that I have seen till date. Thanks for the video Tyler. By the way, I follow your blog posts which are of the same high quality.

[@uidotdev]

❤️

[@travezripley]

Thanks for making some of the best informational videos about Javascript and sharing your knowledge with us!

[@uidotdev]

Thanks for the kind words!

[@travezripley]

@@uidotdev Thanks for Killing it!

[@nom__sain2239]

This is a really good explanation, thank you

[@AnthonyInSanDiego]

I'm really impressed with the quality of explanations here. I hope this channel grows fast!! THANK YOU

[@uidotdev]

Me too! Thank you!

[@Ctrl_Alt_Elite]

This video is so insightful for people that have started learning React in the more recent years, amazing job! 💪💯

[@uidotdev]

Thank you!

[@joebrady9829]

Awesome video, super well explained! I was kind of confused by "repos" though as I was thinking it was implementing the repository pattern, it might have been more clear loading "todos" or some other data that doesn't have double meaning in software.

[@uidotdev]

TBH, I've never even heard of the repositories pattern. I'll check it out.

[@Naveenkashyap243]

3:15 if you don't want to bind the method in constructor use arrow function when you declare your function instead of regular function

[@yevhenkozlov286]

4:05

[@ikarosouza9505]

this is just amazing, plain and simple

[@mehdiwadoud8098]

I found this video very helpful as I am new to React coming from the Angular world, Thank you so much.

[@uidotdev]

Glad you enjoyed it!

[@ekkamailax]

These problem were solved decades ago with a pattern called MVC. React is a view library, it’s not designed to handle the complexities of a large scale application. Defining models and controllers as separate entities, then using react just for view rendering solves most (if not all) frustrations with react.

[@uidotdev]

OK boomer.

[@joejoe-lb6bw]

Excellent overview of hooks and, most importantly, why hooks were needed.

[@bariscan9267]

This is the most precise and useful video I have ever watched so far.

[@AbhishekSharma_1504]

This is so cool, so well explained, keep it up, will watch more of your channel

[@uidotdev]

Thank you!

[@dhruvduttjadhav9837]

Incredible and thorough. 🚀

[@yevhenkozlov286]

To me, one of the biggest advantages of Hook concept - is automatic cleanup in `useEffect`. That allows us to avoid race conditions relatively easily(but it's missed in sample 11:49).

[@ImanAkrami]

what the... your skill in explaining stuff is incredible. I know hooks an i still was "hooked" on you video. :D

[@uidotdev]

Glad you enjoyed it!

[@ShyamSundar055]

Now i understand why hooks are simple to use. Thanks

[@BobbyBundlez]

is this video implying that arrow function were basically designed due to problems with "this" and react development? people still dont understand "this" and i hear a lot of noobie developers say they just use arrow functions to avoid that problem lol.... but it does seem like arrow functions were made to help assist react with binding lol.. perhaps im wrong tho?.... its crazy how much power facebook/react has had on the entire ecosystem. i just started learning React, luckily i started with some legacy code and im a patient learner ( i feel like wayyyy too many people don't bother watching videos like this) and its awesome to see such an in depth historic breakdown. you are so right.... understanding WHY we use something helps so much. often i learn something before asking this question and never even end up using the skill later lol

[@natedawgg77]

Thank you for making this video. I think you did a great job of explaining "why" hooks exist and what problems they are attempting to fix. I still think hooks miss the target on their goal of making React better. It feels like you are just trading one set of problems for another with 2 apis you have to learn.

[@Mr-Multiplayer]

Now that solved most of my questions and mistakes i was making in react. Thank you😍

[@sourishdutta9600]

Hi Tyler your explanation is awesome,thanks. Can you please make a video on es6 symbols like what are the real time use cases in our web application, where should we use in our app. Please it will be very helpful.Thank you.

[@maxiequa567]

Supreme explanation, looking forward to this course greatly! Hopefully you'll use async/await/error boundaries when suitable :)

[@AshishRawat-zl6te]

Really amazing video. Covered the evolution of react since it's inception, a really great way of narrating the things.

[@JayRGabz]

just wow.... great explanation

[@exokristian]

Holy divine wisdom injected. Thank you!

[@feralking3000]

thanks this helped me a lot, specially looking into it from the dates perspective

[@gkumartube]

Beautifully explained 🙏

[@welcometochristown]

Great video, best explanation I have heard yet.

[@idontwhy3132]

I've also heard of composition mentioned in terms of composing functionality into classes. Is it generally speaking referring to allowance for customization? [ie. custom hooks]

[@marcosrdz89]

Fantastic and clean explanation

[@spicystrike5088]

This is very informative, thank you.

[@uidotdev]

You're welcome. Thanks for the kind words!

[@MurphyIsMyLastName]

Wow, this video is great. Thanks for the really in-depth explanation.

[@uidotdev]

You're welcome. Thanks for the kind words!

[@sunguru981]

Actually I saw this at your instagram live .. but it wasnt clear.. Thanks alot for reposting this sir :)

[@YeetYeetYe]

DUDE you have a gift. Holy shit. Beautifully explained. 11/10.

[@xoscarreyes]

This video is just beautiful and gets exactly to the point! thanks for making it

[@uidotdev]

Thanks for appreciating it!

[@DirtySocrates]

Thank YOU!!!! I finally understand what I've been looking at for a couple weeks.

[@uidotdev]

Glad it helped!

[@johngill5175]

Thanks so much for this, soo good!

[@nerdiloo9863]

I dig the pacing /explanation of this. You might be on to something Tyler Mchelob - cheers 🍺

[@uidotdev]

Thank you!

[@razmans]

Great explanation. So its like async await and promises?

[@dean6046]

Thank you Tyler!

[@uidotdev]

❤️

[@brianlee9898]

Instantly hooked. Great video.

[@paxaeterna3709]

That image throwing the baby lion is very distracting. LOL.

[@AbdelhameedG]

Thanks Tyler! Now I Love Hooks!

[@Loppy2345]

I tried using hooks, was a pain in the ass especially with typescript, so went back to classes. Being pragmatic is often the best choice.

[@blasedefou]

Thank you so much

[@iamkiko5046]

This is a great overview, thank you.

[@abhisheksaxena6413]

great starting animated view (dog) ... so creative...

[@spcs999]

Super informative!!

[@narendrasinghrathore1012]

Best explanation for hooks !!!

[@maxart2007]

Thank you very much, so briefly explained everything, saved me a lot of time)

[@uidotdev]

Glad I could help!

[@devilfriend]

Great video. Sadly I think they made React less readable, and it sucks but it was really easy to understand prior to this change.

[@lardosian]

Very clear explanation, subbed!

[@uidotdev]

Thank you!

[@thomasbrown8680]

This was so good! Thank you.

[@jeantimex]

Awesome explanation! Thank you!

[@oscardasilva971]

Good explanation, thank you.

[@SiddharthPant]

You sir are a legend!

[@__greg__]

Very helpful, thanks!

[@harshapatil9766]

very well explained the evolution of React, awesome :)

[@GeordyJames]

Excellent explanation. Thanks....

[@elmirmahmudov6215]

just loved the explanation!

[@girlsincode9255]

simple and clear !

[@Matt36788]

Nice work, great intro. Looking forward to the course!

[@uidotdev]

Enjoy!

[@FrankDecker3]

In my opinion... This new way seems so yuckie. Seems like just another way... framework... with literally 100% changes. It looks quite messy and even more work than a React class. Yes, I agree that states need to be kept and that it is annoying having to use componentDidMount, then setState inside, and have to keep track of if a component has data yet before loading... and that classes should be not be required to be visual... huuuu... but that is easily overcome and then it is coding as usual. What Facebook has now done is give us yet another way of doing coding and alot of new introduction to API methods. It seems like this framework is going to be more coupled to React framework specifically. Before React was less intrusive but these new changes are making react more intrusive, meaning there is so much more to dependencies, and also we to remember, learn, understand, and implement yet another implementation of React. The more advanced you go into a framework or the more you expect a framework to do for you, the more you are coupling code to a specific way of coding. Solving problems with issues that were created by depending on such a large frameworks, that do things that one could do themselves with a deeper understanding of JavaScript, is not really solving problems but removing a specific set of problems and presenting a new set of problems. Using JavaScript alone, to solve web development issues will in return bring in more issues to solve and create a new web of issues from that. Why all the new API functions? Because if you want to solve problems using functional programming, (like Facebook changing to functional) you then need to write methods that can still provide you previous functionalities that was handled using Class inheritance. It will get messy. I am all for change and innovation... re-inventing solutions that we have already have is redundant. Do we really need hundreds of solutions by frameworks, just to get our work done? I feel that functional programming is the new trend. I am guessing that is why Facebook, at least in part, has decided to solve it's past issues by using a functional approach.

[@trisimix]

Frank Decker what are you talking about, react is a library

[@trisimix]

And as cool as functional solutions like elixir are, you cannot create identical front end experiences with them

[@compedium]

Well put, it feels like I've learned React 5 times in the last couple of years...

[@rubayatislam4804]

This video could have been a lot better if you would have also run the code and discuss what the "this" was doing at the first part of the video. it really helps when you run a code and see the result. I dont know about others, but it would have helped me if you could show errors and what this was referring to in different parts of the code.