1
00:00:00,150 --> 00:00:01,150
Not bad, not bad.

2
00:00:01,170 --> 00:00:05,100
We've got a react memo method out of the way.

3
00:00:05,550 --> 00:00:07,810
Now, let me throw you a grade.

4
00:00:08,370 --> 00:00:14,430
What if I were to create a state value and I'll call this card?

5
00:00:14,710 --> 00:00:21,510
Well, not the actual item in the card, but will somewhat simulate that action where we go with cartons.

6
00:00:21,510 --> 00:00:26,450
And of course, we use used state our awesome hook.

7
00:00:26,460 --> 00:00:33,900
We provide the initial value, which is going to be zero, then will also set up add to cart function.

8
00:00:34,050 --> 00:00:42,930
So we're going to go there with CONSED and then add to cart like show and for the time being is just

9
00:00:42,930 --> 00:00:48,000
going to be a narrow function that does one very simple thing.

10
00:00:48,420 --> 00:00:55,590
It sets the cart to the previous value plus one card and then plus one.

11
00:00:55,620 --> 00:00:57,510
So that's my add to cart function.

12
00:00:58,140 --> 00:01:05,370
The thing is though that now I would want to pass that function down to my item.

13
00:01:05,880 --> 00:01:12,960
So first, right after the button, I'm going to create a new one and I'll add a little bit of inline

14
00:01:12,960 --> 00:01:13,710
styling here.

15
00:01:14,160 --> 00:01:19,350
The same margin top is equal to three arms.

16
00:01:19,740 --> 00:01:21,630
I think that is a good value.

17
00:01:21,930 --> 00:01:30,300
And then in here, let's say a cart is equal to my cart value, but that it should be zero because that

18
00:01:30,300 --> 00:01:31,110
is my default one.

19
00:01:31,320 --> 00:01:36,820
But then, like I said, I would want to pass this sucker down to a single product.

20
00:01:36,840 --> 00:01:37,230
Yes.

21
00:01:37,230 --> 00:01:43,560
Granted, we'll do some prob drilling, but I think we can live with that because there's something

22
00:01:43,560 --> 00:01:45,250
else that I'd want to show you.

23
00:01:45,990 --> 00:01:52,830
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

24
00:01:53,010 --> 00:01:54,090
to cart function.

25
00:01:54,480 --> 00:01:59,330
Add to cart prop is equal to my add to cart function and of course we need to structure it.

26
00:01:59,340 --> 00:02:03,740
We already know that and then we need to pass it into that single component.

27
00:02:03,750 --> 00:02:04,230
Correct.

28
00:02:04,620 --> 00:02:15,060
The single product had the cart again add to cart over here and then finally we get down to the single

29
00:02:15,060 --> 00:02:21,960
product and then in the single product I would want to add a button that of course calls it so right

30
00:02:21,960 --> 00:02:23,550
after the paragraph.

31
00:02:23,550 --> 00:02:30,920
I'm going to go with button that will add on Kleck and then we'll pass and add to CART.

32
00:02:31,650 --> 00:02:36,530
So we're not going to add that item literally to the cart, but we'll simulate that action.

33
00:02:36,540 --> 00:02:45,090
So add to CART and again, there's going to be a issue and the issue is going to be simply because we

34
00:02:45,090 --> 00:02:49,790
click to add cart and no, again, we're calling that single item.

35
00:02:50,400 --> 00:02:57,070
So every time I click on this button again, I'm rendering all the items.

36
00:02:57,570 --> 00:02:59,730
OK, now why is that happening?

37
00:02:59,760 --> 00:03:00,090
Well.

38
00:03:00,950 --> 00:03:08,420
If we scroll up, we see that we have this big list now in this case, we have the products that we

39
00:03:08,420 --> 00:03:14,710
technically took care of with a memo, OK, but then we have add to cart function.

40
00:03:15,050 --> 00:03:16,510
So this is our problem.

41
00:03:16,940 --> 00:03:25,510
And I told you in the last video that every time props or state changes component we'll render.

42
00:03:26,180 --> 00:03:33,920
Now, the thing is, when we change the state value, we trigger the render and each and every time

43
00:03:33,920 --> 00:03:37,140
we create this function from the scratch.

44
00:03:37,520 --> 00:03:45,550
So that's why React thinks that, hey, listen, this value changed because it was recreated from the

45
00:03:45,560 --> 00:03:46,040
scratch.

46
00:03:46,370 --> 00:03:49,840
And that's why, again, we're triggering the rear end.

47
00:03:50,580 --> 00:03:51,750
Now, what is the solution?

48
00:03:51,770 --> 00:03:59,830
The solution is using use called back, which essentially are somewhat similar like we were doing with

49
00:03:59,840 --> 00:04:00,380
a memo.

50
00:04:00,620 --> 00:04:06,980
But now it's going to deal with a function where it's going to check, hey, listen, has the value

51
00:04:07,340 --> 00:04:10,710
for the function changed if it hasn't changed?

52
00:04:10,910 --> 00:04:11,260
Good.

53
00:04:11,810 --> 00:04:16,460
I don't need to recreate that function from the scratch if the value has changed.

54
00:04:16,490 --> 00:04:21,710
Well, then, of course, I would need to create that function one more time.

55
00:04:22,160 --> 00:04:27,050
So what we do is call use callback.

56
00:04:28,150 --> 00:04:37,230
And then we would want to pass in that function, so here again, we wrap our function in the parentheses,

57
00:04:37,250 --> 00:04:38,500
that's step number one.

58
00:04:38,980 --> 00:04:43,760
But also what I would want is the dependancy or.

59
00:04:44,750 --> 00:04:52,580
And that is very important because what I would want is each and every time I update the current value,

60
00:04:52,910 --> 00:04:58,410
I also create this function and I'll show you what happens if you don't do that.

61
00:04:58,670 --> 00:05:07,310
But the good news is now that if I'm just working with a count, I'm not going to trigger that or surrender,

62
00:05:07,670 --> 00:05:13,700
because what you'll note is that once you click on the count, check it out.

63
00:05:14,420 --> 00:05:18,370
See, the items are still just 12.

64
00:05:18,770 --> 00:05:24,850
So I don't render each and every time I click on a card because with our previous setup.

65
00:05:25,130 --> 00:05:27,260
So without this use callback.

66
00:05:27,640 --> 00:05:29,270
By the way, I didn't show you that.

67
00:05:29,280 --> 00:05:30,770
So my apologies.

68
00:05:30,770 --> 00:05:37,460
Let me delete it and I'll recreate it from scratch here where now the problem is that as I'm clicking

69
00:05:37,460 --> 00:05:44,360
on account, all the items still get rearranged because again, this function gets created from the

70
00:05:44,360 --> 00:05:48,620
scratch and then react, thinks, hey, listen, the props change.

71
00:05:48,640 --> 00:05:51,800
So I need to trigger the referendum.

72
00:05:52,130 --> 00:05:54,460
That's why we use this use callback.

73
00:05:54,710 --> 00:06:00,110
So now we create this function only when we update the card value.

74
00:06:00,260 --> 00:06:06,230
So just like we had dependancy array with use, the fact we have the same thing with our use callback.

75
00:06:06,410 --> 00:06:13,880
And that is very important because you might be tempted to do something like this where you go, OK,

76
00:06:13,940 --> 00:06:16,400
I have my count, I have the card.

77
00:06:16,410 --> 00:06:21,860
So I only want to create a function when I have the initial render.

78
00:06:22,280 --> 00:06:28,760
Now the problem is going to be you're not going to get that second value because if you go and if you

79
00:06:28,760 --> 00:06:32,820
cancel the card, it is always going to be zero.

80
00:06:33,200 --> 00:06:41,030
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

81
00:06:41,030 --> 00:06:49,670
though my value got updated in the state, since I didn't create this function when the card value changed,

82
00:06:49,920 --> 00:06:51,860
well, it's always going to be sitting on a zero.

83
00:06:52,160 --> 00:06:59,030
So here you can keep on clicking and it's always going to be one because I didn't create that function

84
00:06:59,240 --> 00:07:02,750
one more time when this value changed.

85
00:07:02,780 --> 00:07:04,740
So that's where you have dependancy array.

86
00:07:05,150 --> 00:07:11,840
That's why you add whichever value you would want to use to recreate the function, which of course,

87
00:07:11,840 --> 00:07:13,170
in our case is the card.

88
00:07:13,580 --> 00:07:19,250
So once this value changes, we would want to create that function one more time.

89
00:07:19,460 --> 00:07:24,920
Now, of course, in that case, we will trigger the Randers that is normal.

90
00:07:25,250 --> 00:07:28,080
That is not unexpected, but at least in this case.

91
00:07:28,100 --> 00:07:35,600
Notice how I can keep on collecting the count and I'm not triggering the reminder also as a side note.

92
00:07:36,550 --> 00:07:43,960
If you check out the console, you should see here the warning where we have react, hook use effect

93
00:07:43,960 --> 00:07:49,260
has a missing dependancy, the get product, and that is coming from our customers.

94
00:07:49,570 --> 00:07:53,990
And this is another use case where we can use the use callback.

95
00:07:54,370 --> 00:08:03,520
So just wait a little bit in the next video cover use memo and then we'll circle back and we'll take

96
00:08:03,520 --> 00:08:10,390
a look at how we can use this use callback to get rid of this warning in the console.