Learn React Hooks: useCallback - Simply Explained!
HTML-код
- Опубликовано: 13 май 2023
- Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useCallback. This powerful React hook will allow you to fix your performance problems by memoizing a function and only re-computing it when necessary. You will learn how to identify performance problems from functions causing sub-components to re-render, how to memoize the functions using React's useCallback hook, and how to use the dependency array to control exactly when and how your function updates.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useCallback React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!
Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react
Best react educator found on youtube! Agreed everyone?
I agree
Agreed
Absolutely !
explains every thing in detail, crisp and clear
Absolutely
Clean and clear explanation with examples on what and why for us to clarify the ideas behind the hook. Again, nailed! Appreciated.
Genuinely the best useCallback tutorial I’ve seen, probably the best video I’ve seen regarding hooks in general. Incredible explanation and demonstrations!
damn, thanks for saying that! Really means a lot 🤙
I 100% agree with @Jakezaruba, this video explained it perfectly.
This is the cleanest and clearest explanation of useCallback ever!!!
Best hooks tutorial I've encountered so far! Thanks 🔥
you explain useCallback so simple man, really appreciate.
You are really a great educator. The best react tutorials found on RUclips! Very Appreciated @Cosden Solutions
Love how you explain the whys and what really happens behind the scenes. Thanks and much appreciated
The truth is: i watched two tutorials about UseCallback from great people talking my native language -Arabic-, but i didn't get the whole idea properly. now i do. Thank u.
زيك ي حبيب اخوك والله ❤✌️
@@amrhesham3135 🤣🤣🤣🤣🤣🤣♥ مرحبا مرحبا
@@amrhesham3135 🤣🤣🤣🤣🤣♥
You are a serious teacher. You tested your code truly before publishing this video, I think. I've read many articles about useCallback and their code did not work correctly coz they did not use 'memo'. Thanks so much. Your video brings us true value.
I didn't know about the memo either ! Thanks very much.
Props to Cosden for not bombarding us with some 15 second intro branding. Down to business, love it.
Great video for React devs at any level. I'd forgotten that a React component that takes in a function from its parent will re-render even if the variables in that function haven't changed. Not obvious until you explained it so well. You also made it super simple and clear that useCallback memoizes a function like useMemo memoizes a variable, and that helps us minimize unnecessary re-renders.Thanks!
makes me happy to hear!
you are very clear concept wise. No need to follow any other videos on react hooks. really liked all your videos. Thanks and much appreciated
cheers dude, none of that "learn this in 3 minutes bs" you explain everything nice and clearly!
Just discovered these today - and they're so well presented! These are things I use at work every day and you've done such a great job in explaining the benefits and pitfalls of each of these react hooks! Definitely pointing any new engineer over to your channel to learn/understand them
Hey! Just wanted to say that I've been going through your Learn React Hooks playlist and it's been so helpful. Thank you for making this content. You're a great educator!
the words you picked "freeze in time". Really helped me wrap the idea of it after many months of doubt
Bhai sahab matalab ekdam gajab padhaya yaar, dil jeet liya dost ❤
Great video, well explained. Everything is now crystal clear
Just a small add @2:30, its not that in react functions are different, its that they are referenced type in js, very well explained, really helpful thankyou
The last example was very clever. Thank you sir.
Ahh! you make my day. Was in a maze whole day about the using of useCallback. You've just come up with a propper salvation. Thanks ❤
Nicely explained. I tried to understand from other videos as well, but this is really good. Now I am done with my doubts.
Happy to hear! 🤙
We really needed someone make this hooks simple. Thanks
Oh, finally a good explanation about this hook! You got a subscriber with this video! Thanks!
Very well explained! Thank you so much
Finally I understood useCallback ❤️ Thanks a lot!
Thank you brother you explain this topic very well.
Your explain saved my life. U just got a new subscriber. Thanks.
By far this is rhe best explanation have watched many many tutorials, but you explained it in very simple terms 🎉ty
Glad to hear it! 🤙
Awesome explanation, man! very, very clever!
Excellent explanation, thank you 😇
literally the best react tutor thank you for your videos
I am happy that I found this channel! Thank you for very clearly explanation about React hooks and because of you I improved my knowledge.
glad to hear it!!!
Thanks, this really is my last useCallback tutorial.
Great explanation 🎉🎉🎉 i was so struggling with understanding this topic. Thank you🎉🎉🎉
Appreciate the way you explained it, thanks
Love it! Appreciate the way you explained everything. ❤
Very clear explanation!
Excellent clear explanation thank you.
Thank you for your clear explanation ❤
Helped me understand callbacks it was tough earlier
Underrated channel! subscribed
great explanation thank you. no blank spaces left
Awesome explanation. Thanks!
You deserve atleast 1 million subscribers. Please keep making such videos
omggg Great explanation. Thank you bro
Great video, thank you!
Thank you so much for making these easy to understand videos. The most important thing you did was first intruduce the problem and then explain what the topic is and how can we solve this issue using this topic, this is a wonderful strategy to follow. Thanks again!
Thank you for the kind words ☺️
Perfectly explained!
Expected to learn useCallback, instead I learned how react rerender, memo, and usecallback works. Amazing.😄
Man, i follow and watch the videos of many tech youtubers and i have seen a ton of tutorials from many of them. This single video is the best tutorial of any concept i have ever seen. Tons of respect!
Thank you for the kind words!
@@cosdensolutions thank you for the many “aha” moments
Dude, your channel is the bomb. Thanks for the vids ^-^
Good job explaining!
you earned a sub :) great explanation
Really a big help. Thanks
Enjoyed very much
so clear. thank you ♥
Great explanation 👍
awesome explaination, pls continue this series
Will do!
I'm shocked how he explained it very well than anyone could. Automatic subs!
Much appreciated! ☺️
you got a new subscriber
thanks man
Awesome man! thanks a bunch!
thanks alot, very happy to know your channel🌹
Great explanation
Thanks. It really helped.
Amazing explanation on hooks ❤❤❤❤
glad you liked it!
Amazing tutorial
best teacher ever
clean and clear 👍
you earned a new subscriber
Great to see you here I followed you on tiktok. So great work keep going forward
Nice! Thanks! Will do ☺️
love you man ! thank you so much
Amazing! thanks
Excellent!
Thank you for this
Done thanks clear explanation
awesome tutorial
15:32 When u put 'users' in arr dep i really thought them why we need use Callback if we started from where our problem starts. And you began explain 😀
Thanks ❤
Thanks buddy 😊😊
Good explaination. Now i know it
glad to hear it!
Great explanations sir the only concern is I watched 5 ads each containing 2 ads(which I can't skip) 😂😂😂
brilliant
thanks
Awesome
perfect
Thank you for the clear explanation, Darius. Can you maybe share the shuffle function with us? It's not in the source code. :D
You're awesome
To understand, with this particular example we did actually undo all the purpose of useCallvack since users will be different when shuffled, right?
nice
When you say, onChange prop is different from the previous do you mean like actual props of the searchProps or values of the existing props?
the `onChange` function, although it's the same function that does the same code (values don't really matter here), it'll be considered different because it'll be a different instance of the function. Different instance means it's just a copy of the function, but it's not the same one in memory. So even though it looks the same and does the same thing, it is a separate entity, thus it will cause the props to evaluate as not equal
Thanks for this clear explanation. As a React beginner, I feel like the DX is pretty terrible. You have to litter your code with all these hooks and remember what's changing and where. I worked with Bacon.js before and the mental model is much better, in my opinion, for handling state changes over time. React feels like spaghetti to me.
Please do a useReducer tutorial 👏👏👏👏🙌🙌🙌🙌🙏🙏🙏🙏
Oh absolutely, very soon!
EPic
If we add another state and update it still will get memoized component to rerender. This is because arrays are reference types in JS and in every component render it gets a new reference so you will get new reference for callback function as well
One of the things I noticed at 15:05 is that 'alex' shows but If you typed "james" the console log users[0] would have still been alex and that's because before our input changed alex was the first person in that list.
Thanks Cosden. One question. What's the difference example onChange={handleSearch} and onChange={()=>handleSearch()} ?
they're the same, but the second way you'll have to pass all of the arguments manually, if you have some. If you pass it like the first way, they'll get automatically passed
After you add 'users' as a dependency to the useCallback, if you press shuffle, would the search component still not rerender?
Yes it does, but that is what you want. You don't want to prevent a render, you just want to control when it happens. So if there was another piece of state that would change, then it wouldn't re-render. You only want to re-render when what it depends on changes, and nothing else!
@@cosdensolutions cheers. great video as always btw.