Learn React Hooks: useCallback - Simply Explained!

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!

[@cosdensolutions]

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

[@heybran_]

Best react educator found on youtube! Agreed everyone?

[@arunkaiser]

I agree

[@anabiatahir3772]

Agreed

[@alidbouk4335]

Absolutely !

[@amalc7814]

explains every thing in detail, crisp and clear

[@prajwalpandeshwar9967]

Absolutely

[@ahmadbenchakhtir5787]

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]

زيك ي حبيب اخوك والله ❤✌️

[@ahmadbenchakhtir5787]

@@amrhesham3135 🤣🤣🤣🤣🤣🤣♥ مرحبا مرحبا

[@ahmadbenchakhtir5787]

@@amrhesham3135 🤣🤣🤣🤣🤣♥

[@lexsemenenko7044]

Clean and clear explanation with examples on what and why for us to clarify the ideas behind the hook. Again, nailed! Appreciated.

[@JakeLuden]

Genuinely the best useCallback tutorial I’ve seen, probably the best video I’ve seen regarding hooks in general. Incredible explanation and demonstrations!

[@cosdensolutions]

damn, thanks for saying that! Really means a lot 🤙

[@atomvandermerwe3613]

I 100% agree with @Jakezaruba, this video explained it perfectly.

[@SWE507]

This is the cleanest and clearest explanation of useCallback ever!!!

[@lagekutsa]

you explain useCallback so simple man, really appreciate.

[@whiterabbitdev]

cheers dude, none of that "learn this in 3 minutes bs" you explain everything nice and clearly!

[@CalltheWei1020]

Love how you explain the whys and what really happens behind the scenes. Thanks and much appreciated

[@noahmilliken4259]

Props to Cosden for not bombarding us with some 15 second intro branding. Down to business, love it.

[@chengxiaoxia8046]

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.

[@learner8084]

I didn't know about the memo either ! Thanks very much.

[@gmjitendra]

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

[@smokinjoe3000]

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

[@rajeshmaydev]

the words you picked "freeze in time". Really helped me wrap the idea of it after many months of doubt

[@tingwen1713]

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!

[@user-be3ri8gf1p]

Best hooks tutorial I've encountered so far! Thanks 🔥

[@uquantum]

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!

[@cosdensolutions]

makes me happy to hear!

[@__shubhamtiwari]

Bhai sahab matalab ekdam gajab padhaya yaar, dil jeet liya dost ❤

[@shamimhossain551]

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 ❤

[@shubham.verma-dev]

Nicely explained. I tried to understand from other videos as well, but this is really good. Now I am done with my doubts.

[@cosdensolutions]

Happy to hear! 🤙

[@oscardasilva971]

The last example was very clever. Thank you sir.

[@RaGa_BABA]

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

[@ProfessionalClickers]

Finally I understood useCallback ❤️ Thanks a lot!

[@catalincatalin4101]

We really needed someone make this hooks simple. Thanks

[@vivekkumar-pc1xy]

Great video, well explained. Everything is now crystal clear

[@Gangbuster74]

By far this is rhe best explanation have watched many many tutorials, but you explained it in very simple terms 🎉ty

[@cosdensolutions]

Glad to hear it! 🤙

[@manojmrpd]

You are really a great educator. The best react tutorials found on KZbin! Very Appreciated @Cosden Solutions

[@coolme7437]

Thanks, this really is my last useCallback tutorial.

[@antimrevapati8992]

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!

[@cosdensolutions]

Thank you for the kind words ☺️

[@kisuhara7844]

literally the best react tutor thank you for your videos

[@peirama2]

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!

[@cosdensolutions]

Thank you for the kind words!

[@peirama2]

@@cosdensolutions thank you for the many “aha” moments

[@radhiarahmani9523]

Very well explained! Thank you so much

[@viliuxsas]

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.

[@cosdensolutions]

glad to hear it!!!

[@vesa95]

Awesome explanation, man! very, very clever!

[@fhkodama]

Oh, finally a good explanation about this hook! You got a subscriber with this video! Thanks!

[@Za-xh9tj]

Expected to learn useCallback, instead I learned how react rerender, memo, and usecallback works. Amazing.😄

[@VijayVibhuteFlautist]

Love it! Appreciate the way you explained everything. ❤

[@PradeepManek]

Thank you brother you explain this topic very well.

[@attouyassine1056]

Appreciate the way you explained it, thanks

[@borameupai1792]

Your explain saved my life. U just got a new subscriber. Thanks.

[@ahmetzeren6878]

great explanation thank you. no blank spaces left

[@aleksandrgolyk3787]

Great explanation 🎉🎉🎉 i was so struggling with understanding this topic. Thank you🎉🎉🎉

[@belkocik]

Very clear explanation!

[@briandacallos4234]

I'm shocked how he explained it very well than anyone could. Automatic subs!

[@cosdensolutions]

Much appreciated! ☺️

[@HenryBabbage]

Awesome explanation. Thanks!

[@WaseemAhmad-mf3wh]

Thank you for your clear explanation ❤

[@dilshadazam880]

You deserve atleast 1 million subscribers. Please keep making such videos

[@Jam....]

Excellent clear explanation thank you.

[@ASOCMARCTKD]

Excellent explanation, thank you 😇

[@diggerdog001]

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 😀

[@2029leandro]

Perfectly explained!

[@dylcodes]

Great video, thank you!

[@MudassirKhan-sx9jy]

so clear. thank you ♥

[@pythonbrothersandfamily]

omggg Great explanation. Thank you bro

[@SPribyt]

Good job explaining!

[@rgchroniclestv]

Really a big help. Thanks

[@cat_demon4405]

Underrated channel! subscribed

[@legend_749]

awesome explaination, pls continue this series

[@cosdensolutions]

Will do!

[@alangraton2000]

Dude, your channel is the bomb. Thanks for the vids ^-^

[@tigranharutyunyan7674]

Enjoyed very much

[@abhinavdhama3014]

Amazing explanation on hooks ❤❤❤❤

[@cosdensolutions]

glad you liked it!

[@aliksayfullin3278]

Great explanation 👍

[@OXIDE777-is6gs]

Awesome man! thanks a bunch!

[@badishammadache2922]

Great explanation

[@umairiqbal1483]

Thanks. It really helped.

[@shabeeeb6400]

you earned a sub :) great explanation

[@maryannegichohi7063]

Amazing tutorial

[@zul.overflow]

clean and clear 👍

[@samahgad241]

thanks alot, very happy to know your channel🌹

[@atakan8570]

best teacher ever

[@sidkan9251]

you got a new subscriber thanks man

[@haiderjaafer8164]

Great to see you here I followed you on tiktok. So great work keep going forward

[@cosdensolutions]

Nice! Thanks! Will do ☺️

[@TheMakeupmonika]

love you man ! thank you so much

[@madehayoussof]

Amazing! thanks

[@SahilKashyap64]

Thank you for this

[@remix_me]

you earned a new subscriber

[@mostinho7]

Done thanks clear explanation

[@user-dq1to7hg2n]

Excellent!

[@mralextacy]

awesome tutorial

[@raymondmichael4987]

Thanks buddy 😊😊

[@mobinhamidi4161]

Thanks ❤

[@nyomansunima]

Good explaination. Now i know it

[@cosdensolutions]

glad to hear it!

[@nayandey5010]

Great explanations sir the only concern is I watched 5 ads each containing 2 ads(which I can't skip) 😂😂😂

[@INetreba]

brilliant

[@anonim1468]

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

[@smchap9474]

To understand, with this particular example we did actually undo all the purpose of useCallvack since users will be different when shuffled, right?

[@Akhillbj]

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?

[@cosdensolutions]

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

[@giannizamora7247]

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.

[@iamparmjeetmishra]

thanks

[@VishalSharma-rn7mt]

Awesome

[@joshikroshan5584]

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?

[@cosdensolutions]

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

[@joshikroshan5584]

@@cosdensolutions thank you

[@cordial]

After you add 'users' as a dependency to the useCallback, if you press shuffle, would the search component still not rerender?

[@cosdensolutions]

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!

[@cordial]

@@cosdensolutions cheers. great video as always btw.

[@djravelaw]

If the user will click on shuffle , will the Search component re-render ? as we have passed users in dependency array of useCallback

[@cosdensolutions]

Yes it will

[@satyamkumar6469]

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

[@cosdensolutions]

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

[@harag9]

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.

[@ThepaytimeHD]

This is an excellent point, I am also interested in finding a solution that solves this problem.

[@snivels]

Does the old 'handleSearch' function get garbage collected when you click shuffle and it renders the Demo() component again? Like it's not just storing function after function in memory each re-render, is it?

[@cosdensolutions]

It does, I wouldn't worry about the inner workings of React too much, it's already heavily optimized

[@nitinmali7430]

Thanks Cosden. One question. What's the difference example onChange={handleSearch} and onChange={()=>handleSearch()} ?

[@cosdensolutions]

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

[@ahallock]

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.

[@reactdev2838]

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.

[@cosdensolutions]

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!

[@reactdev2838]

@@cosdensolutions Understand, But I really like your video, one of the best tutorials I have ever seen...

[@darkshadowgks]

may I know where can i get the shuffle function? it's not in your github