All language subtitles for 079 useCallback.en_US

Not bad, not bad.

We've got a react memo method out of the way.

Now, let me throw you a grade.

What if I were to create a state value and I'll call this card?

Well, not the actual item in the card, but will somewhat simulate that action where we go with cartons.

And of course, we use used state our awesome hook.

We provide the initial value, which is going to be zero, then will also set up add to cart function.

So we're going to go there with CONSED and then add to cart like show and for the time being is just

going to be a narrow function that does one very simple thing.

It sets the cart to the previous value plus one card and then plus one.

So that's my add to cart function.

The thing is though that now I would want to pass that function down to my item.

So first, right after the button, I'm going to create a new one and I'll add a little bit of inline

styling here.

The same margin top is equal to three arms.

I think that is a good value.

And then in here, let's say a cart is equal to my cart value, but that it should be zero because that

is my default one.

But then, like I said, I would want to pass this sucker down to a single product.

Yes.

Granted, we'll do some prob drilling, but I think we can live with that because there's something

else that I'd want to show you.

So where I have the big list now, let's go with the prop of add to CART and then of course, I'll add

to cart function.

Add to cart prop is equal to my add to cart function and of course we need to structure it.

We already know that and then we need to pass it into that single component.

Correct.

The single product had the cart again add to cart over here and then finally we get down to the single

product and then in the single product I would want to add a button that of course calls it so right

after the paragraph.

I'm going to go with button that will add on Kleck and then we'll pass and add to CART.

So we're not going to add that item literally to the cart, but we'll simulate that action.

So add to CART and again, there's going to be a issue and the issue is going to be simply because we

click to add cart and no, again, we're calling that single item.

So every time I click on this button again, I'm rendering all the items.

OK, now why is that happening?

Well.

If we scroll up, we see that we have this big list now in this case, we have the products that we

technically took care of with a memo, OK, but then we have add to cart function.

So this is our problem.

And I told you in the last video that every time props or state changes component we'll render.

Now, the thing is, when we change the state value, we trigger the render and each and every time

we create this function from the scratch.

So that's why React thinks that, hey, listen, this value changed because it was recreated from the

scratch.

And that's why, again, we're triggering the rear end.

Now, what is the solution?

The solution is using use called back, which essentially are somewhat similar like we were doing with

a memo.

But now it's going to deal with a function where it's going to check, hey, listen, has the value

for the function changed if it hasn't changed?

Good.

I don't need to recreate that function from the scratch if the value has changed.

Well, then, of course, I would need to create that function one more time.

So what we do is call use callback.

And then we would want to pass in that function, so here again, we wrap our function in the parentheses,

that's step number one.

But also what I would want is the dependancy or.

And that is very important because what I would want is each and every time I update the current value,

I also create this function and I'll show you what happens if you don't do that.

But the good news is now that if I'm just working with a count, I'm not going to trigger that or surrender,

because what you'll note is that once you click on the count, check it out.

See, the items are still just 12.

So I don't render each and every time I click on a card because with our previous setup.

So without this use callback.

By the way, I didn't show you that.

So my apologies.

Let me delete it and I'll recreate it from scratch here where now the problem is that as I'm clicking

on account, all the items still get rearranged because again, this function gets created from the

scratch and then react, thinks, hey, listen, the props change.

So I need to trigger the referendum.

That's why we use this use callback.

So now we create this function only when we update the card value.

So just like we had dependancy array with use, the fact we have the same thing with our use callback.

And that is very important because you might be tempted to do something like this where you go, OK,

I have my count, I have the card.

So I only want to create a function when I have the initial render.

Now the problem is going to be you're not going to get that second value because if you go and if you

cancel the card, it is always going to be zero.

So if I go here and if I click on add to cart notice as the card is going to be zero, and then even

though my value got updated in the state, since I didn't create this function when the card value changed,

well, it's always going to be sitting on a zero.

So here you can keep on clicking and it's always going to be one because I didn't create that function

one more time when this value changed.

So that's where you have dependancy array.

That's why you add whichever value you would want to use to recreate the function, which of course,

in our case is the card.

So once this value changes, we would want to create that function one more time.

Now, of course, in that case, we will trigger the Randers that is normal.

That is not unexpected, but at least in this case.

Notice how I can keep on collecting the count and I'm not triggering the reminder also as a side note.

If you check out the console, you should see here the warning where we have react, hook use effect

has a missing dependancy, the get product, and that is coming from our customers.

And this is another use case where we can use the use callback.

So just wait a little bit in the next video cover use memo and then we'll circle back and we'll take

a look at how we can use this use callback to get rid of this warning in the console.