Learn React Hooks: useCallback - Simply Explained!
Vložit
- čas přidán 13. 05. 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
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 🤣🤣🤣🤣🤣♥
Clean and clear explanation with examples on what and why for us to clarify the ideas behind the hook. Again, nailed! Appreciated.
This is the cleanest and clearest explanation of useCallback ever!!!
Love how you explain the whys and what really happens behind the scenes. Thanks and much 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.
you explain useCallback so simple man, really appreciate.
cheers dude, none of that "learn this in 3 minutes bs" you explain everything nice and clearly!
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!
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
Best hooks tutorial I've encountered so far! Thanks 🔥
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
the words you picked "freeze in time". Really helped me wrap the idea of it after many months of doubt
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.
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 ❤
You are really a great educator. The best react tutorials found on CZcams! Very Appreciated @Cosden Solutions
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
Props to Cosden for not bombarding us with some 15 second intro branding. Down to business, love it.
Bhai sahab matalab ekdam gajab padhaya yaar, dil jeet liya dost ❤
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! 🤙
Great video, well explained. Everything is now crystal clear
The last example was very clever. Thank you sir.
Oh, finally a good explanation about this hook! You got a subscriber with this video! Thanks!
Finally I understood useCallback ❤️ Thanks a lot!
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!
We really needed someone make this hooks simple. Thanks
literally the best react tutor thank you for your videos
Awesome explanation, man! very, very clever!
Very well explained! Thank you so much
Your explain saved my life. U just got a new subscriber. Thanks.
Thanks, this really is my last useCallback tutorial.
Love it! Appreciate the way you explained everything. ❤
Great explanation 🎉🎉🎉 i was so struggling with understanding this topic. Thank you🎉🎉🎉
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! 🤙
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!!!
Excellent explanation, 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 ☺️
great explanation thank you. no blank spaces left
Awesome explanation. Thanks!
You deserve atleast 1 million subscribers. Please keep making such videos
Excellent clear explanation thank you.
Thank you brother you explain this topic very well.
Very clear explanation!
Appreciate the way you explained it, thanks
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
Thank you for your clear explanation ❤
Expected to learn useCallback, instead I learned how react rerender, memo, and usecallback works. Amazing.😄
Underrated channel! subscribed
Helped me understand callbacks it was tough earlier
omggg Great explanation. Thank you bro
I'm shocked how he explained it very well than anyone could. Automatic subs!
Much appreciated! ☺️
Great video, thank you!
Dude, your channel is the bomb. Thanks for the vids ^-^
Good job explaining!
awesome explaination, pls continue this series
Will do!
Perfectly explained!
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 😀
Really a big help. Thanks
you earned a sub :) great explanation
so clear. thank you ♥
Amazing explanation on hooks ❤❤❤❤
glad you liked it!
Great explanation 👍
Awesome man! thanks a bunch!
thanks alot, very happy to know your channel🌹
you got a new subscriber
thanks man
Thanks. It really helped.
Great explanation
Enjoyed very much
Amazing tutorial
Great to see you here I followed you on tiktok. So great work keep going forward
Nice! Thanks! Will do ☺️
clean and clear 👍
you earned a new subscriber
love you man ! thank you so much
best teacher ever
awesome tutorial
Excellent!
Amazing! thanks
Thank you for this
Done thanks clear explanation
Great explanations sir the only concern is I watched 5 ads each containing 2 ads(which I can't skip) 😂😂😂
Good explaination. Now i know it
glad to hear it!
Thanks buddy 😊😊
Thanks ❤
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.
brilliant
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
To understand, with this particular example we did actually undo all the purpose of useCallvack since users will be different when shuffled, right?
Thank you for the clear explanation, Darius. Can you maybe share the shuffle function with us? It's not in the source code. :D
Awesome
You're awesome
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.
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
thanks
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.
I appreciate the effort you put to make this kind of understanding.❤👏
But i am confused at the last point when you added a dependency users to useCallback function which solves the search problem but won't this disturb the shuffle function also coz this is also updating the same users right?
Which eventually created the probelm what we have seen at the first
If am i wrong please correct me
yes, but the goal is not to prevent re-renders, but rather to control them. If you add users, then you have to re-calculate everytime it changes. That's ok. However, if you add a new state variable and change that instead, then the useMemo will not run again. That's what we want, control
Should we include event object in dependency array when we memoize event handlers? As it changes each time and we are using it in funciton body?
nope, only what is created in a component and is used in the body needs to go there. Event objects are not created in any component.Also, even if you wanted to, you couldn't. You don't have access to the event object to put it there :D
@@cosdensolutions thank you
I've watched a few useCallback vids now and started to understand it more and this has also helped a lot, thanks. However I was concerned near the end, because you put the dependency [users] on the call back the search was rendering all the time, yet the search doesn't care about the users, but if that search was an expensive component, why would you want it rendering all the time again?
I understand the vid was mainly about the useCallback, but how would you now fix the end result to not update the search component every time... Sounds like a catch 22 situation. fix one thing, break another so to speak.
This is an excellent point, I am also interested in finding a solution that solves this problem.
Please do a useReducer tutorial 👏👏👏👏🙌🙌🙌🙌🙏🙏🙏🙏
Oh absolutely, very soon!
But there will be still an issue at the last i.e. onClick shuffle, It will still re-render the Search Component again because the user state will be updated. But all over, I really appreciate it because you're teaching with core concepts.
The goal with this is not to prevent a re-render, but control when it happens. I mention it in the video. If user is a dependency, there's no way around it. The goal is to not have anything else cause a re-render through useCallback, which we did!
@@cosdensolutions Understand, But I really like your video, one of the best tutorials I have ever seen...