React Hooks useCallback Tutorial

[@aleksd286]

The best React videos on KZbin to be honest, I've learned so much from these vids, and I can see that my code is getting only better

[@abdoumenouer7762]

I just like how the numbers you chose align perfectly with the timestamp 7:21

[@frontendHacks]

watch useCallback Hook in Hindi in easy way explained kzbin.info/www/bejne/fZuZaaWEZdt_icU&ab_channel=Front-EndHacks

[@markod3957]

Dude these hook tutorials are brilliant, and genuinely the best I have come across in my the time I have used React - and I have explored a fair amount online

[@eat_mangos4177]

this is as good as it gets with youtube tutorials, cheers

[@chisomoguibe8467]

That swallow at the beginning tho 😂

[@yoyoliyang]

这是关于”wrap the 'fetchBusinesses' definition into its own useCallback() Hook“很好的解决方法和教程，感谢！ This is a good tutorial about "wrap the 'fetchBusinesses' definition into its own useCallback() Hook" question. thanks！

[@Robert-cw9ev]

Thank you so much! I used this for interaction with Canvas, because it was updating even if it didn't depend on any state variable.

[@louicoder]

Yo @Ben Awad , you're such a blessing. here in 2020 looking for ways to optimize my code and couldn't find any better explanation than this. Thanks so much for your content. Always grateful , God bless you . Mad love from Uganda [ East Africa ]. 🚀🎉🎉

[@EricBishard]

It would be nice to have a series of Hooks videos that build up a small application that utilizes useMemo, useCallback and creating custom hooks from a fundamental first perspective, why these methods will help you create more performant apps and components and a little bit slower of a pace. I understood this video, but I had to watch it a few times and I'm still trying to think of good practical examples where this info can help me out. Just an idea! This video really helped me though...

[@bawad]

that's a good idea

[@itsmattchan]

Am I the only one that's amazed every video by Ben's keyboard shortcuts?

[@bawad]

You should start doing them too benawad.com/vscode benawad.com/vim

[@vileider]

Ben you supposed to explain how to use useCallback, and You assumed that I already know custom hooks and useMemo.

[@austinlords582]

Brilliant tutorial. Perfect length and depth of explanation.

[@angrycat-ze]

Wish I could have a little Ben in my pocket to carry everywhere I go and he would teach me things when I need 🥴🥴

[@mikealejandro3938]

Lmao that sounds creepy, but i think ben would like that idea

[@angrycat-ze]

@@mikealejandro3938 Well, now that you said... It really seems weird LOL 😂

[@LeonardoXavier1]

Thanks a lot, Ben. This series is really helping me to better understand the hooks and I`m watching each video carefully. In case of this "useCallback" hook, even with you explanation, I can`t figure out when I have to memoize, how to properly do it and how to manage rerenders. I didn't even understand how can your component doesn't rerender and yet shows the incremented number on the screen. So, can you go back, maybe one extra video outside this series, and, from the begining, explain this "memo" and "useCallback" concepts? Anyway I'm already greatefull for the job you are doing here. It's really helpfull.

[@bawad]

This video should help explain: kzbin.info/www/bejne/pV7EnYWYoMSthpI

[@locky326]

I think you missed the fact that the component showing incremented value is the parent of the buttons - so the buttons stay the same and they only render once. However, without memo the buttons would re-render every time the incremented value changed because the component displaying that value re-renders.

[@LeonardoXavier1]

@@locky326 yep, I really missed It. Thanks.

[@LeonardoXavier1]

​@@bawad This was great. I could get everything now. Thanks again, man!! You are my super hero.

[@TheElijbet]

Not sure how you eliminated count dependency by using count => count + 1 instead?

[@Seb16291629]

Very useful thanks. Very hard to not get confused between all different hooks . In my app, I m using use effect most of the time, something isn’t probably right.

[@elciesstv]

Love the way u explain, so clean and easy to understand. TY!

[@sariksiddiqui6059]

Doesn't using function instead of lambda also recreate functions on each render?

[@mcnimi]

probably the most helpful video i've seen on react (also native). thank you.

[@les2997]

At 5:32, why there is a dependency on setCount? setCount is already cached and it will not change.

[@bawad]

Because if setCount were to change I want the new value

[@les2997]

@@bawad Yes, but setCount is cached and it will not change. github.com/jamiebuilds/unstated-next/issues/43

[@darryl_young]

Thanks, Ben. Another great video.

[@Twistee]

Did not know you could get rid of state (count) like that in useEffect, that's going to be super helpful!

[@frontendHacks]

watch useCallback Hook in Hindi in easy way explained kzbin.info/www/bejne/fZuZaaWEZdt_icU&ab_channel=Front-EndHacks

[@teytag8844]

Sooo useful, thanks for the explanation

[@babynini1513]

Thanks for good examples! Can i ask what's the reason to use [setCount] as dependency rather than just [ ] since we don't want it to re-render?

[@lenientliu6080]

The setCount will not be changed in each render after created.

[@kenhilliard5845]

For useCallback you first use [count, setCount] as its dependencies. Later, at around 5:20, you remove "count" as a dependency for useCallback, leaving only [setCount]. You then changed the setCount to the updater style: setCount(c => c + 1). Why was this necessary? Why not just remove "count" as a dependency and keep setCount(count + 1)?

[@bawad]

Try removing count as a dependency and keep it in there, you'll see wonky results. it has to do with closures: kzbin.info/www/bejne/m4Wnn5mJZ8SKe5Y

[@sagaruv]

If you use setCount(count + 1) inside useCallback and remove count from dependencies array, the value of the count will always be its initial value (ie 0)

[@pulga961]

Wait, we can just pass reference to increment function and shallow equal will return true. const increment =>(){......} and then pass via props increment={increment}. Ben?We can avoid using useCallback?

[@bawad]

useCallback is how you keep the reference the same

[@equality9304]

I have learned a lot from this video.

[@debasishsahapranta6247]

Why we need to add 'setCount' as a dependency of "useCallback", putting the dependency array blank should work fine. Is there any case where the "setCount" function can be changed?

[@yuxingzhou4844]

Best explanation ever.

[@xerxius5446]

Awesome Tutorial! Thanks for your work. Much appreciated

[@thomaschen2057]

Something really helpful not just 'to do list' tutorials

[@antoniosousa4178]

Ben, how to you change cursos type?

[@sachinbhandari345]

Why setCount is in the second parameter of useCallback. Does react changes its reference on every render?

[@drewstifler1440]

What's the difference if you put the updater function as the dependency and just leaving it as an empty array? Both works.

[@VinitKhandelwal]

Does it compares the old value and new value shallowly or deeply?

[@agustinernestocardeilhacba1765]

Thanks Ben !!! :) Really clearly explained ! :D

[@iluha005]

Nice work! Thank you, Ben.

[@kacperkedzierski9047]

I don't understand why there's a [setCount] dependency in callback, couldn't it have been just empty [ ]? When will setCount ever change?

[@TomWacaster]

useCallback doesn't have any special knowledge of what setCount is. We know that it's a setter from useState, but the code inside useCallback only knows that it is a function. Since functions can be recreated (for example if it was a function that had been defined by another useCallback), we need to know to execute this useCallback again if "setCount" changed definition.

[@kacperkedzierski9047]

@@TomWacaster Oh, true I didn't even think of that. Thanks!

[@debasishsahapranta6247]

@@TomWacaster but in this case, we can set the dependency array blank as we are never going to change the setCount function, right?

[@usamaimran1516]

What about data fetching? Lets say i am fetching data in use effect how can i optimize that? So that if fetched data is same, it doesnt rerender that component

[@ashshkapoor]

Just completed vimtutor and I already feel like giving up after watching your vim skills.

[@zag2art]

Great man, thank you! It helps me a lot

[@Marketblank]

Hi , I tried to do same thing to useForm but not sure why it still doing re-render . i can share the changes

[@iamdihan]

This is great! How did i now know this

[@edgarcatalan6462]

I forgot what is the difference with setCount(count + 1) and setCount(c => c + 1) ?

[@RusuTraianCristian]

Brilliant, loved it!

[@ursochurrasqueira]

great video, helped me a lot

[@adamjohnston3157]

On both of the examples, are you not able to just pass setState to the child component as it is guaranteed to never change? I have a hard time seeing any use cases for useCallback unless the function itself did something computationally expensive. Still a great explanation regardless.

[@bawad]

you can pass setState down, but sometimes you want to create a function that you share across multiple components and useCallback is handy there

[@abdoumenouer7762]

Great video! thanks!

[@ManojSingh-of5ep]

why my components are rendering twice

[@debasishsahapranta6247]

Maybe your app is wrapped with "React.StrictMode" on index.js. Try removing this.

[@alexandrudanpop]

Thanks Ben!

[@joerivde]

Subbed, this is gold

[@bawad]

welcome :)

[@Gbd279]

Why doesn't react memoize renders by default?

[@bawad]

Because you generally don't need it

[@filmologyaz4729]

thank you Ben

[@mokkamokka4097]

Thank you so much!

[@collinsk8754]

Really useful.

[@maynardewm]

This made zero sense to me

[@hoangnt142]

Thank you!

[@andiboggs4902]

When i try this tutorial in 2022 the count increments like 0,1,3,5,7 ...

[@andiboggs4902]

in the console but increments normally in the browser view.

[@reallegend1]

Thanks Ben , I hope that you can find a way to remove the keyboard voice from the video.

[@peoplearecool8766]

Guys I have one question if someone can help me please , so if component is number or string or array or object, Ract.memo is working - that means component will not render if those (data types ) props are same as before. but why does component renders if one of the property is function : just like in this video , if we write even so icrement function is not changing Hello component steel renders every time and we need to use useCallback hook in that case . So my final question is why does react.memo not working with function properties even so this functions stay same , or do they change in every render ? If function change every time why does people say that " increment={ increment } " is better practise then " increment={ () => setCounter(...) } " - this inline anonymous functions because anonymous functions are created every time when component renders ... I am little confused :D :D

[@markkkly810]

Amazing

[@alex_chugaev]

Bad news: the function you pass as the first arg to "useCallback" will still be created on each render 😂

[@bastek338]

Yup, optimizing apps with React is not the easiest thing

[@inordirectional]

The overhead of recreating the function wasn't what he was trying to avoid as much as re-rendering a potentially large child component to which that function is passed as a prop. That's what he was showing how to avoid

[@Levelord92]

I didn't get it at all :)

[@okoiful]

why in the heck do we have to be jumping through hoops like this in react? we shouldnt have to be doinf this.

[@cleverocheckts518]

Я не понимаю что ты говоришь.Ну а код нормальный,и хорошо объясняет

[@1ycx]

8 mins ago. 8 views.

[@alex_chugaev]

React is so badly designed you have to optimize every bit of it yourself

[@rafaelso9991]

I have no idea what hes saying. its not good for newbie like me haha