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 🤣🤣🤣🤣🤣♥

[@manojmrpd]

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

[@SWE507]

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

[@lexsemenenko7044]

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

[@lagekutsa]

you explain useCallback so simple man, really appreciate.

[@CalltheWei1020]

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

[@whiterabbitdev]

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

[@user-be3ri8gf1p]

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

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

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

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

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

[@rajeshmaydev]

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

[@noahmilliken4259]

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

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

[@__shubhamtiwari]

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

[@oscardasilva971]

The last example was very clever. Thank you sir.

[@ProfessionalClickers]

Finally I understood useCallback ❤️ Thanks a lot!

[@vivekkumar-pc1xy]

Great video, well explained. Everything is now crystal clear

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

[@catalincatalin4101]

We really needed someone make this hooks simple. Thanks

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

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

[@kisuhara7844]

literally the best react tutor thank you for your videos

[@coolme7437]

Thanks, this really is my last useCallback tutorial.

[@vesa95]

Awesome explanation, man! very, very clever!

[@fhkodama]

Oh, finally a good explanation about this hook! You got a subscriber with this video! 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!

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

[@VijayVibhuteFlautist]

Love it! Appreciate the way you explained everything. ❤

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

[@belkocik]

Very clear explanation!

[@aleksandrgolyk3787]

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

[@radhiarahmani9523]

Very well explained! Thank you so much

[@ahmetzeren6878]

great explanation thank you. no blank spaces left

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

[@borameupai1792]

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

[@Jam....]

Excellent clear explanation thank you.

[@attouyassine1056]

Appreciate the way you explained it, thanks

[@HenryBabbage]

Awesome explanation. Thanks!

[@PradeepManek]

Thank you brother you explain this topic very well.

[@ASOCMARCTKD]

Excellent explanation, thank you 😇

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

[@WaseemAhmad-mf3wh]

Thank you for your clear explanation ❤

[@dilshadazam880]

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

[@Za-xh9tj]

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

[@aliksayfullin3278]

Great explanation 👍

[@cat_demon4405]

Underrated channel! subscribed

[@briandacallos4234]

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

[@cosdensolutions]

Much appreciated! ☺️

[@pythonbrothersandfamily]

omggg Great explanation. Thank you bro

[@SPribyt]

Good job explaining!

[@2029leandro]

Perfectly explained!

[@dylcodes]

Great video, thank you!

[@rgchroniclestv]

Really a big help. Thanks

[@MudassirKhan-sx9jy]

so clear. thank you ♥

[@alangraton2000]

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

[@legend_749]

awesome explaination, pls continue this series

[@cosdensolutions]

Will do!

[@sukritsaha5632]

Great explanation

[@shabeeeb6400]

you earned a sub :) great explanation

[@abhinavdhama3014]

Amazing explanation on hooks ❤❤❤❤

[@cosdensolutions]

glad you liked it!

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

[@maryannegichohi7063]

Amazing tutorial

[@umairiqbal1483]

Thanks. It really helped.

[@tigranharutyunyan7674]

Enjoyed very much

[@OXIDE777-is6gs]

Awesome man! thanks a bunch!

[@sidkan9251]

you got a new subscriber thanks man

[@samahgad241]

thanks alot, very happy to know your channel🌹

[@mralextacy]

awesome tutorial

[@remix_me]

you earned a new subscriber

[@atakan8570]

best teacher ever

[@zul.overflow]

clean and clear 👍

[@TheMakeupmonika]

love you man ! thank you so much

[@haiderjaafer8164]

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

[@cosdensolutions]

Nice! Thanks! Will do ☺️

[@madehayoussof]

Amazing! thanks

[@mostinho7]

Done thanks clear explanation

[@user-dq1to7hg2n]

Excellent!

[@raymondmichael4987]

Thanks buddy 😊😊

[@nyomansunima]

Good explaination. Now i know it

[@cosdensolutions]

glad to hear it!

[@mobinhamidi4161]

Thanks ❤

[@INetreba]

brilliant

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

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

[@nayandey5010]

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

[@VishalSharma-rn7mt]

Awesome

[@mephesh]

perfect

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

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

[@bismarckkaine2700]

You're awesome

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

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

[@capt_vj]

nice

[@AntNZ]

Please do a useReducer tutorial 👏👏👏👏🙌🙌🙌🙌🙏🙏🙏🙏

[@cosdensolutions]

Oh absolutely, very soon!

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

[@unhandledexception1948]

@3 min, you discuss wrapping the component with memo() to have react check if input props changed before a re-render. I had initially thought that react did already did that, and so am confused as to why this optimization is necesary What would cause react to re-render componentseven if the props they receive haven't changed.

[@unhandledexception1948]

Oops.... sorry asked too soon, you explain the problem at 5:00 min when discussing functions in react 🙂

[@harag9]

@@unhandledexception1948 Thanks for the question. I've never seen "memo" on a component before now so wasn't sure why, as I too thought react didn't re-render... So my followup question to be sure... should I only use memo on components as in the memo(Search) when I pass functions to the component ? Would passing in a state "setVariable(newval)" function count like the "onHandleX" functions. I've just created a Dummy component with a text property and passed hardcoded text to it then in the component console logged out "rendered". NOT used memo(dummy) -- Even through the property hasn't changed the component renders everytime the page renders. So I don't think react checks for none changing properties. So my next question even for a simple component should we use memo(Dummy) all the time to stop it from rerendering things like titles etc.