React Hooks useCallback Tutorial

so we're gonna be taking a look at the used callback hook in this video it's good for when you want to prevent a function from being created on every single render now I'm gonna explain what I mean by that and how this is helpful when we want to use the memo function and react now for those of you have been following along with the react Oaks series I went ahead and I pared down the code because it was getting a little cluttered so here I have a single div and a Hello component that I'm rendering in hello we just have a div that's as hello so we're just be starting from this place and when I start off by passing a function down to our hello component here so I'm going to create some State and we're gonna start with just a simple counter so I'm gonna say count and set count and renée's the you State hook so now normally if I wanted to say pass a function down to hello for example an increment function I might do it like this so I'm going to create a lambda here and I'm gonna say set count count plus 1 now you'll notice because I've created lambda here this is what I meant by creating a function on every single render every time app is rendered this is going to be recreated this function right here so and I also want to say for example display account maybe in this component so I'm gonna say count that and then in my hello component I want to use this increment function some way so I'm gonna say button and we're gonna hey increment every time they click the hello button we want to increment so we'll give that a save and then let's take a look at the code here so now if I say hello and I press that we're just incrementing so nothing special is happening so far but the key thing to note is that this function is being created on every single render so usually that's not a problem with what the current code we have not a problem whatsoever but what does cause a problem is when we want to use something like react memo so when I say react memo on this component I want this component to only a rerender when increment changes but the problem is increments changing all the time and so we can we can actually see this happening whenever I add some some logic here to print out whenever this component ray renders which we can do 'but we saw in a previous video here we can say renders is equal to user F which starts at 0 use ref and we can console.log renders and renders + + so now we can see and this should be renders current and if we want to we could stick this in its own custom hook since we may want to use this several times so we use count renders so I'm going to say export can't use count renders and I'm gonna paste this code here and now we can put this we can keep the logic in this hook so now all I have to say is use count renders and now we're gonna get a constant log every time this hook is rendered or every time that computed rendered so we can see a hello and now we can see that each time I increment count this is increasing right which we can actually improve this because this function is not changing at all right the function I want to do the same thing on every single time the only thing that's changing is this count variable here so how can we prevent this this is where use callback comes in so I can say use callback and it's probably good for me to explain this memo if you've never seen this before what memo does is basically it just compares the props and if the props have changed then it's going to re render the component so by default react will always rerender the component if the parent is changed if the chair parents rendering this guy will render as well when we add memo it's going to check only rerender when the props are changed so we're gonna see the difference in that once we use the used callback so I'm gonna say increment is equal to use callback and how use callback works is we pass in a function and then it's dependencies in this little bracket array right here so here I'm going to pass in set count and now if I pass in the two dependencies they are count and set count and now I can pass this in here so how use callback works is whenever the count or set count changes this function will be recreated and put in this variable basically so now increments only changing when these two values are either those are changed so we haven't quite fixed it yet because if I come over here we can see it's still rendering every count and the reason for that is because we're depending on count right now so we can eliminate this dependency by using the updater function that is available to us when we call set count here you can do like this so now what we have is if we come over here I increment the count here you'll notice the function is never changing and so this never gets re rendered and so this is where use callback shines is we when we want to prevent functions from basically changing the value and a lot of times the reason why you want to prevent that from happening is when you're using react on memo because it's going to check the reference of something the other case where you may want to use use callback is in a case where you're using for example like use effect and you have some logic and you need to pin on this increment function so you don't want this function to be changing all the time or else that use effect will keep firing off so those are like the two places where you'll tend to use these the most the other thing to note is we can add parameters to this if we want so for example I can pass in and and so that'll be the first parameter to increment so we can increment by an in amount so in my hello function over here I can go ahead and say increment by 5 for example and so that is going to be passed into our used callback function all right so now we increment by 5 the other thing you can do is you can actually return values from this or you can know you could return the I guess we could we can't really return the new count because we're doing an update or function here but it could return some value but usually when you're using use callback you're not really needing to return something so I don't think I've ever needed to return something but note that's available to you in cases where you need to so the last thing that I wanna go over is a more practical example of where this comes up I found this comes up the most when I want to do a looping over an array of something so let's say we want to I'm just gonna create a favorite number a which is gonna be 721 and 37 is gonna be our favorite numbers for today so let's say I want to loop loop over these numbers here so I'm going to say favorite nums dot map and we're gonna say and and here we're gonna return and here I'm gonna create a square class component actually no it's not gonna be a classic well it's gonna be regular component and I'm shooting a copy our hello example all right so we're gonna render the square component here and let's say for example when I click on the square I want to increment it by the favorite number so i me do it like on click I want to increment by n right so this is a situation where again I'm creating a lambda usually not that big of a deal but if I wanted to for example memorize the square then things get messed up so it really just comes up when you want to memorize things or you want that function to not always you know where it it matters when this is getting changed on every single render when that matters that's when he kind of want to use use callback so we're gonna start we're gonna use our use count renders and let's just comment it out from our app over here or from hello because we don't want to get too much stuff on our output so n square over here I'm going to display the favorite number which is going to be N and we're also going to display in here and let's say we have an on click so we kind of showed this method with the hello example but we can see this again and we're gonna pass in down here alright so let's see what this just looks like we can also need a key so now if I increment by these numbers it's gonna increment the count you'll notice it's rendering each one of those every single time I click on a number for that many times now if we're doing a square here and we have on click that may be the standard way we want to do it but this case is we're doing a function on every render and so it's causing it to render so the approach that I usually take in these situations is I'll pass the increment down and let's say we do increment and then we don't have the on click logic right here we put the on click logic inside of the square so here I have on click and so that we're going to say increment now and then we're gonna say increment and we can pass in in there so now if we come over here you'll notice it's not going to re-render every single time now because we're just not creating this function every render now so this is kind of approach that has come up a lot for me whenever I'm mapping over an array of items I'll usually pass down the function pass down the data and then inside of that function if I'm memorizing it I'll then have the logic for example the on click logic here where I call increment like this because we need this information there so there you go that gives you an introduction into how you use callback works and how you when you would want to use it you

Channel: Ben Awad

Views: 88,690

Rating: 4.9081082 out of 5

Keywords: useCallback, useCallback Tutorial, Hooks useCallback, React Hooks useCallback, React Hooks useCallback Tutorial

Id: -Ls48dd-vJE

Length: 11min 15sec (675 seconds)

Published: Wed Jun 26 2019