React Hooks Tutorial - 26 - useCallback Hook

[@lukemuga434]

The way you break down complex concepts into clear and concise explanations that are very easy to understand is just amazing. Keep up the good work

[@quanhglam]

“The question you might have is …” satisfies me every time. Very thoughtful videos.

[@classicaltv595]

Thanks! I really appreciate your work!

[@jsnjocsin]

I've been starting learning react just this week and this video helps me understand one of the fundamentals of React in a clear and understandable way. Kudos to the author of this tutorial, keep up the good work!

[@kaveenhyacinth]

I was seeking an extensive explanation for useCallBack hook. I found it today! You are amazing bro 💙

[@shawnlee5956]

the best version of explaining useMemo & useCallback Hook!

[@nickstaresinic9933]

All videos in this series are very well organized and presented. The explanation in *this* particular video is the clearest I've come across on using Memo & useCallback to prevent unnecessary re-renders. Thanks.

[@manishrana9078]

The way you explain the use cases and why and in which condition we must use certain things is just amazing. It's easy to learn concepts from you.

[@coder_monkey]

Dude, this one is super cool. The way you explain the stuff is far better. I wish you could have written the React docs.

[@Jason-uv5tm]

Honestly, though there is nothing wrong with react docs because if you are learning react correctly, you should know what a dependency list is (from useEffect), and if you know javascript, then you should know what callbacks are. Only my opinion though, you do you.

[@prakhar2806]

Have been having problem for a long time understanding the concept before this very video. The simplest explanation. thanks for the great video

[@craft99]

Breaking down that sentence was incredibly helpful. Thank you.

[@srinivas539]

Learned React easily with your concepts; you saved lot of hours to invest learning topics.

[@pannihto7588]

The best explanation I've seen so far. Thank you

[@dukewellington5222]

Concise and actionable. This here is an textbook example for how tech tutorials should be.

[@tabrezrahi]

its worth it to watch your videos after 3 yrs of uploaded concept are clear

[@haciendadad]

Thank you for making this hook easy to understand!! I don't know what, but I was having trouble understanding this one, but your simple, clear example was just perfect! I looked at like 6 other videos, and yet this one clicked with me. You just got a new subscriber!

[@singleren]

The best explaination on useCallback so far

[@poryanikmaram3444]

the best simplified content you can see for useCallback hook ! 👋

[@LuisPintado]

I have seen other videos that cover this topic, but it is in this one that I really understood how it works. Thank you!!

[@sarahwbs]

Great explanation of Memo and useCallback! Very thorough and clear.

[@najimali32]

This is the best video I have seen on useCallback. Thank you so much!!

[@hongcai4617]

I really appreciate your logic and hard work. I got stuck in my project and needed to come and understand why it was designed like that. Then your explanation enlightens me with easy examples. You should earn millions of subscriptions.

[@ritheeshthomas8441]

You are an amazing tutor. The way you explain the concepts are just amazing. Really helpful.

[@icecofffeee]

Great stuff! Its near impossible to find people who can explain complex topics with such clarity

[@yashthakur7419]

One of best explanation skills I have come across

[@ינוןאלבז-כ1ז]

Take a complex and scary subject and make it really simple You deserve to be appreciated

[@PriyankaSingh-vm4kv]

No words to describe how easily you explain this concept 👏👏👏

[@Mohamed-M-M]

Very informative & well explained in detail, Your way of teaching is amazing, thank you.

[@shshawon39]

What an Explanation brother! Keep it up. You have amazing talent. Appreciate it.

[@swingtradersindia]

This is the best explanation..I never comment on any youtube video but This video was really awesome.

[@balamca416]

excellent explanation, new function is created each rerender, and to solve that function should be memorized using a callback hook👏

[@HarshSingh-hk8fe]

this is the best explanation of this hooks , now i know how its working

[@onesome7713]

definitely the best lecture I've ever watched! Thx!

[@ramineghbaliankhob9685]

you are a real teacher, thank you for this tutorials

[@ionitaa]

Great videos. Please do a component test series after hooks!

[@TheSatheeshmca]

The way you are explaining is awesome thank you so much for sharing this video and your knowledge.

[@augustineonyekachiadmiora9015]

First time I understand useCallback thanks brother

[@pashapear-who]

Thank you! This was very informative and well explained.

[@hercules2170]

I love your content..You explain concepts in such an easy manner! Happy to have found your channel! :)

[@MrChubib0]

Easy to understand because of the good explanation! Thank you

[@saranyad1446]

Great. I became clear in this topic after viewing this video

[@antonetrinh8662]

This is how to explain useCallback. Just Perfect.

[@jorgericaldi6438]

omg, you explain like god. Really easy to understand you man. thanks so much :)

[@neerajyadav1522]

Really nice explanation of useCallback hook. I knew about other hooks, but this was alien to me, but you explained it really well. Subscribing for the explanation.

[@tiagocunhafernandes6607]

Very good example. I love see logs to check performance issues!!!

[@sankarrajendran]

Thanks for the video really explains the concepts well. I hope you are doing this way to convey the concepts. If you separate salary and age as a different component with its own state, there is no need of memo or callback. You should have mention these kind of tips at the end. Most of us watching the tutorials are beginners while explaining the concepts if you include best practices also would be really helpful. Thanks..!!

[@vishalupadhayay6391]

This was just an example! Think of a complex application with multiple child components.

[@nikoreva2078]

Really great video!!! I learned a lot in these 15 Minutes!

[@subhashgn1775]

Thank you, Vishwas. Really great explanation.👌👌👌👌👌

[@ashutoshtelang8621]

Totally got with the callback concept thank you

[@johnmcaulay4348]

Best explanation I’ve seen, thanks!

[@techycode2217]

Crystal Clear explanation ❤

[@andrewandrosow4797]

Hello! I have not understood - why we re-rendering the ? It is not changing when our script working.

[@pranjalsrivastava4260]

Can you be more specific :)

[@pranjalsrivastava4260]

or your strict mode is enabled in index.js

[@abhishekvishwakarma9045]

awesome Explanation and thanks for the blog 🔥

[@rajendra_K_]

Thank you very much explaining the concept in a easy way :)

[@shorty235z]

Not going to lie, this one may took me a few times to rewatch to get my head wrapped around.

[@zainuddin1205]

Such a good way of teaching!

[@7huannp]

Excellent. Only this video makes everything clear for me. Thanks

[@elmeroranchero]

I recommend reading the article he put in the description.

[@justinthareja5881]

Another place you might want to implement useCallback is to maintain referential equality to functions passed into the dependency array for useEffect, etc.

[@drewstifler1440]

You can optimize it more by passing the updater function as the dependency const incrementAge = useCallback(() => { setAge(age=> age + 1) }, [setAge]) Result: Rendering Age PS: it also work without dependency

[@abhijeetmaurya7355]

Can you point out to the source from where you read about it.

[@drewstifler1440]

@@abhijeetmaurya7355 react official docs usecallback.

[@asananddevsingh]

Even no need to pass "setAge" as a dependency, because it is not the argument of the inner callback function. const incrementAge = React.useCallback(() => { setAge((prevAge) => prevAge + 1); }, []);

[@drewstifler1440]

@@asananddevsingh i already said that

[@asananddevsingh]

@@drewstifler1440 Yeah, You are Right.

[@luizdanella4019]

What amazing video! This is great man!

[@sujithgoud3535]

The best explanation 💯💯

[@AMANKUMAR-jc2fz]

Great Man thanks 👍 really today I understand the way to use these 😁

[@Jason-uv5tm]

The dependencies list, according to codesandbox is not needed. If for example, I make the dependency list an empty array ([]), then only the salary is rendering, and everything is fine. Using age or salary inside the dependency list is bad because the button will still be redefined every single time. Why is this?

[@sachiechan]

Awesome explanation!! Thank you very much :)

[@mytech-youtube8436]

Amazing explanation!

[@emyboybeats4330]

Codevolution Your just the best

[@MajedDalain]

thank u for a great and well-explained video!

[@tarunrath4940]

Shouldnt the dependency array of useCallback be empty? No use in re-rendering the buttons

[@jain.sachin]

I am having one concern with this solution, why even my button component render? We can overcome with this issue by setState(state=> state+1) and no dependency So at the end only state will be updated value so value print component will render

[@DeViLTh0rn]

you already get the answer sir?

[@ahmedsbai3540]

Thank you for the video. why do you want to recreate the function when `age` is updated ? in other words why including `age` in the dependency array of the `useCallback` hook ?

[@riyanahmed6612]

The dependency array in which acts as componentDidUpdate() taking as props as argument so age is just a prop of useCallback hook and as similar the salary prop is passed in dependency array in useCallback hook

[@mr_pixlr]

so why buttons should re-render every time? couldn't implement code such that only Count component re-rendered when state changed?

[@thecosmetrohub2737]

The best content ever

[@sameersharma8248]

I have a question as you mention in the last that why we should not always use useCallback so there is is mentioned that it have to work twice like in this example: const dispense = candy => { setCandies(allCandies => allCandies.filter(c => c !== candy)) } + const dispenseCallback = React.useCallback(dispense, []) So why we do something like this yeah it looks clean but we can also do something like this const dispenseCallback = React.useCallback(candy => { setCandies(allCandies => allCandies.filter(c => c !== candy)) }, [candy]); so is this the same as above?? for cost expense or not

[@sushantgarudkar211]

why we need dependency at all, if variable name is same I mean cached function will be same as before and even if I increment increment function will be same so no need to return new function? can anybody help why we need dependency there

[@Asleep_Beat]

Yeah I too hava this doubt, can anyone explain?

[@growingisgood]

Amazing explanation.

[@AvinashRathod]

Very well explained , thank you.

[@agrajyadav9]

awesome as always

[@varchas-v8777]

If we do (prevAge => prevAge + 1) then we can pass empty array as dependency array. This will render only the count component, not the button. Isn't it the most optimized solution? Please explain me if I'm wrong..

[@TheGryphon14]

correct

[@mathearts9739]

explained clearly new subscriber here thank you very much

[@atikhashmee2009]

excellent explanations. thank you so much for your effort

[@abhisheksatyam4733]

I learned so much, thanks !

[@manishchahar9110]

Hi Codevolution, why do we need to re render respective button components each time the age/salary changes, because nothing is changing in button components

[@Ramesh-js]

Whenerver you click button of Salary or Age , it calls IncrementAge Fn which is taken as a Prop from Parent Comopnent, in the Process Button component of age and Parent Comp renders ! And Whenever ParentComp invoked ... there only salary state also defined ! Then it autmatically renderes the Salary . Here Whenver you click button comp salary/age gets incremented by 1!

[@MandaSukresh]

What if I am using arrow method to setAge? It is not allowing it

[@johnconnor9787]

Greatly explained

[@himanshushekhar3694]

Wow This is Awesome!! great explaination...

[@it-series-music]

Should we always use memo and callbackHook in case of state uplifting ?

[@vivekmesuriya6357]

But why render method called two times for every updation

[@kristijanlazarev]

Because when not in production, in your App.jsx/tsx/js/ts your App component is wrapped with and that renders everything 2 times to ensure that everything gets rendered correctly

[@Ramesh-js]

@@kristijanlazarev Exactly ! Its Because of

[@rupayanc]

what is the last vs code extension in your vs code sidebar?

[@xtynd]

Is it always suggested to use "export default React.memo(Component)" instead of "export default Component"?

[@tausifkovadiya1810]

Can we optimize it, if component & component is within ??

[@asananddevsingh]

This way will prevent the re-rendering of buttons too. const incrementAge = useCallback(() => { setAge((prevAge) => prevAge + 1); }, []);

[@harshalsingh2443]

How is this happening

[@asananddevsingh]

@@harshalsingh2443 This is because, I've removed the dependency of useCallback i.e age and using function while updating the state of age, it will automatically give me previous state of age. Remember here handler function is not dependent on age.

[@abdullahalfaysal8062]

Really quality stuff. I just have 1 update request. at 10.35 you compare incrementAge and incrementSalary function saying they are not the same which I believe everyone knows already. What I think you missed is that JS (not react) creates different instance/reference of both incrementAge and incrementSalary function at every render. Meaning, the same function declaration has 2 different references in 2 different renders. And that's where useCallback comes into play. Feel free to correct me if I am wrong.

[@rohil3023]

I love your videos!

[@rajashekhar433]

Still button component re renders so can we move the functions out of the function and use inside

[@thangphan6047]

Thank you so much, I really really appreciate it :)

[@ascodes3461]

Great one🤩

[@facundovega1726]

EXCELLENT EXPLANATION!!

[@awekeningbro1207]

i still don't understand why would you wanna re-render the button component when the button is clicked? it does the same task as before

[@Zeuchon]

I dont understand why you allow re-renders of the button(s) ? If you use an empty dependency array I think no unnecessary re-rendering happens right?