Learn useCallback In 8 Minutes

in this video I'm gonna talk about the use callback hook which is a hook that almost nobody uses correctly so I'm gonna show you how to use it right so you don't make those same mistakes also if you want to learn everything you need to know about react in depth make sure to check out my full react course I have linked down in the description below let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this one now to get started I have some really basic react code set up that allows us to toggle the theme on the right from dark to light and also we can change this number input and it's going to change the list of numbers that are displayed down here and I want to go over this code really quickly just so you can understand what's working and why we need to use the use callback hook to fix some problems with this code so the very first component I have is this basic app component and inside of here I have state setup for both the number input as this number input over here as well as my dark slash light theme input and this just gets toggled when we click on this button then I have a single function called get items you can kind of imagine that this is a function that calls out to some API somewhere and then returns to us some results but since I don't want to create an entire API for this all this does is return to us three numbers it's going to be the same number as what's in our input one number larger than that and then one number larger than that one even so it's going to give us a sequence of three numbers in a row then we have our theme down here this just allows us to change from dark to light and then finally we're rendering this all out where we have a div that contains our theme and then we have the input that allows us to change our number by just coming in here and changing this number from whatever we want it to be a button that allows us to toggle our theme and then the real important code here is this list component which takes in this function called get items and displays out these items so if we go to this list component you can see this is very straightforward we have some state for our actual items we have a use effect and this use effect gets called every time this and get items function change so every single time that we update our get items function it recalls our use effect to get our new items that's how we're able to here get this new list of items every single change we change our number input we're also just logging out here that we're updating their items if we come over and we in just inspect with our inspection tool here go to the console and if we change our number we should see here we get printed out updating items so if we change it you can see it's printing out updating items that's exactly what we would expect but a problem that we're going to run into is when we click on toggle theme you're gonna see it also calls that updating items and logs that out and this is a problem and this can be fixed with the use callback hook and if you haven't already watched my use memo hook video I highly recommend you check that out first because a lot of these concepts are similar so I'll link that in the cards and description down below but essentially the reason we're running into this problem is because this get items function inside of our app component here is being recreated every single time we render our app component so every single time we change this number this function is being recreated over and over and over and over again and since it's being recreated as a brand-new function when it gets passed into our list this is a new function each time our component gets rendered which means that every single time it's going to be different even if the actual number itself didn't change and this is where we want to use the use callback hook so what used callback does is just like use memo it's not going to rerun the code inside of it unless certain parameters change and that means that every single time we call our app component here this get items function is only going to update when it actually needs to for example when this number changes so let's import here use callback and this has the exact same signature as use memo so let's just wrap our function and use callback and we know that the second parameter to this use callback is going to be our array of dependencies and as you can see the only thing this depends on is our number object we can put a number inside of here if we save you should see everything over here works exactly the same as before but one major difference is when we inspect our code go to the console and we change our number you can see it correctly updates our items but when we toggle our theme it doesn't actually update our items and the reason for this is because this used callback only recreates our get items function when the number changes and it's not going to recreate that when this dark variable changes and if you are familiar with use memo you'll notice that this code looks very similar to use memo but the one big difference between use memo and use callback is that use memo it takes a function and it's going to return to you the return value of that function but use callback is different it takes a function but that is actually what the use callback returns so in this example here were if we had used memo instead of used callback what would happen is get items would be just set to this array here instead of being set to this entire function while with used callback since we're returning the actual function we pass to it get items is being set to this entire function and not just the return value of that function which allows us to use this as a function later on in our application here where we actually call get items and this allows us to actually pass parameters to this function let's say we wanted to pass a parameter of 5 here and we're gonna increment every single number inside of here by 5 well since this used callback just returns this function here we can just have the first parameter of this function inside of use callback be that number so we can just say increment or just like that or incrementer and then all we do is just say number Plus incrementer winner du+ incrementer here and plus incrementer here and now every number in this list is going to be 5 greater than it would have been before because we're passing this incrementer in from our gate items here we could change this to 1 and now everything's gonna be one greater than it would have been before and this is something you can't really do with use memo is use memo doesn't return the function it only returns the value of the function while use callback is returning to us this entire function and the only reason you would ever want to use this use callback hook is if you need to worry about referential equality which is very similar to why you would use use memo so as you can see here this get items changes every time because we create a brand new function but with use callback we're not creating a new function unless we need to so the go referential equality of get items from the first time it rendered and get items the next time it renders is going to be the same as long as our number input here doesn't actually change the only other instance that I could think of where use callback would be useful is if for some reason creating a function is really really slow if for some reason the function that you're creating is slow to create then you would want to use use callback so that you only create that function when you need to and not recreate it every single time you render but that's something that you're probably never ever going to run into so I really wouldn't worry too much about that really this is more so about when you have referential equality problems and almost always that's going to be when you're using some other hook like use effect or use memo where you need to have that value inside of the dependencies of Ray and that's all there is to the use callback hook if you enjoyed this video make sure to check out my full react course link down below where you can learn everything you need to know about react and also thank you very much for watching this video and I hope you have a great day

Channel: Web Dev Simplified

Views: 113,919

Rating: 4.9666348 out of 5

Keywords: webdevsimplified, react hooks, react tutorial, react js tutorial, react hooks tutorial, react hooks project, learn react hooks, learn react js, react beginner, javascript, js, learn usecallback in 8 minutes, usecallback, react js usecallback, usecallback hook, react usecallback hook, usecallback tutorial, reactjs usecallback, react js usecallback tutorial, use callback react js, learn react usecallback, react usecallback js, react reducer hook, react callback function, react

Id: _AyFP5s69N4

Length: 7min 50sec (470 seconds)

Published: Sat Jul 11 2020