1
00:00:00,180 --> 00:00:00,750
Nicely done.

2
00:00:00,790 --> 00:00:10,290
And up next, we have used Mamak, which unlike the used callback, which memorizers or remembers the

3
00:00:10,290 --> 00:00:11,080
function.

4
00:00:11,610 --> 00:00:18,180
So if the card didn't change, that means we don't need to recreate function from the scratch.

5
00:00:18,540 --> 00:00:22,260
The use memo deals with a value.

6
00:00:22,620 --> 00:00:30,090
So, like I said, please don't mix and match the two where react memory will essentially be looking

7
00:00:30,090 --> 00:00:38,430
for the props and see whether the prompts change or they use mammo is specifically for the value.

8
00:00:38,820 --> 00:00:45,420
Now, in order to set up our example, I'm going to create a function first that returns some kind of

9
00:00:45,420 --> 00:00:45,760
value.

10
00:00:46,140 --> 00:00:50,580
So in here, I'll cycle here late again.

11
00:00:51,000 --> 00:00:56,190
I'm somewhat of the fan of explicit names for my function.

12
00:00:56,250 --> 00:00:58,680
So expensive.

13
00:00:59,590 --> 00:01:08,260
And serve here and then I'll pass in there and what I'm trying to do with this function is just to calculate

14
00:01:08,260 --> 00:01:13,510
the most expensive value as far as my product.

15
00:01:14,320 --> 00:01:21,850
And the way we set up the logic, I'm just going to return from this function a value using the reduced

16
00:01:21,850 --> 00:01:25,000
function, so I'm going to go with data, whatever I'm passing in.

17
00:01:25,000 --> 00:01:31,170
And I can tell you right away that I will be passing in the product, then I'll use the reduced function.

18
00:01:31,570 --> 00:01:37,540
And again, it's not really important what I'm doing over here in this Colquitt most expensive one.

19
00:01:37,870 --> 00:01:43,630
But since I would want to make it a little bit more realistic, I will actually calculate the value

20
00:01:43,750 --> 00:01:44,620
from my items.

21
00:01:44,890 --> 00:01:51,130
Keep in mind that you can return for this example, some kind of random value and can work exactly the

22
00:01:51,130 --> 00:01:51,470
same.

23
00:01:51,820 --> 00:02:00,010
So in here I'm iterating over my products and I know that the price is sitting in a field and price.

24
00:02:00,280 --> 00:02:03,040
And again, if you want to double check that, you can see it over here.

25
00:02:03,280 --> 00:02:05,260
I have my right I have my object.

26
00:02:05,260 --> 00:02:08,560
That, of course, represents that one specific product.

27
00:02:08,800 --> 00:02:11,520
And then I have this value for a price.

28
00:02:11,530 --> 00:02:17,590
So that's what I'm looking for, where I would want to reduce it down to that one single value, which

29
00:02:17,590 --> 00:02:18,780
is the biggest one.

30
00:02:19,060 --> 00:02:23,740
So that's why I'll say that I'll be returning a number and I'll divide it right away by one hundred

31
00:02:24,130 --> 00:02:26,200
because the price is incents.

32
00:02:26,440 --> 00:02:35,120
And then I'm just going to say that there is a price variable and that is equal to ihram fields and

33
00:02:35,120 --> 00:02:36,420
the price.

34
00:02:36,430 --> 00:02:37,960
So that is the property here.

35
00:02:38,320 --> 00:02:43,690
And we know that we reduce we always need to return the total.

36
00:02:43,810 --> 00:02:44,280
Correct.

37
00:02:44,590 --> 00:02:46,210
That is my first parameter.

38
00:02:46,480 --> 00:02:54,700
And I'll just say that if the price of that variable is bigger than the current total one, well, then

39
00:02:54,970 --> 00:02:59,040
the total essentially will be equal to that price.

40
00:02:59,560 --> 00:03:07,450
So I'm simply checking for the highest value of the price, whatever it is.

41
00:03:07,780 --> 00:03:12,280
And then once I have my function, what I would want in my return.

42
00:03:13,210 --> 00:03:23,620
Right above the big board, below the cart and another heading one, and here I'll say most expensive

43
00:03:23,890 --> 00:03:32,590
and that is equal again to a dollar sign, I guess I will make the most sense and I'm going to go with

44
00:03:32,590 --> 00:03:37,570
most or you know what, sorry, the function name was Colquitt most expensive.

45
00:03:37,750 --> 00:03:41,640
And then I would want to pass in my product.

46
00:03:42,130 --> 00:03:50,510
And what we need to keep in mind that we talk about some functions that take a long time to calculate.

47
00:03:50,920 --> 00:03:52,900
So the function returns a value.

48
00:03:53,320 --> 00:03:58,350
But let's imagine that it takes a long time to calculate this value.

49
00:03:58,960 --> 00:04:06,540
And if I log, I'll be able to see that every time I click.

50
00:04:06,550 --> 00:04:10,080
For example, on the account, I'm calling this Hello.

51
00:04:10,540 --> 00:04:20,680
And imagine that if this function takes a long time to get that value, it's somewhat of a pain because

52
00:04:20,680 --> 00:04:24,720
I'm calling this every time I'm updating the state value.

53
00:04:24,940 --> 00:04:34,990
So it would be nice if I would somehow be able to remember that value and only recalculate it or essentially

54
00:04:35,110 --> 00:04:39,250
run it one more time to function if my data changes.

55
00:04:39,400 --> 00:04:43,480
So in my case, of course, that is the product.

56
00:04:43,480 --> 00:04:45,690
Correct, because that's what we're passing in.

57
00:04:45,940 --> 00:04:52,540
And this is where you use Memmo comes into play where we go with CONSED and I need to come up with some

58
00:04:52,540 --> 00:04:58,540
kind of variable in this case, so I will just rename it to Most Expensive over here.

59
00:04:58,900 --> 00:05:01,030
Then I call use my mouth.

60
00:05:01,030 --> 00:05:03,940
So that's my hook and where we need to pass into use.

61
00:05:03,940 --> 00:05:10,000
Mammo is a callback function and the first thing we need to set up is the function that returns a value

62
00:05:10,270 --> 00:05:16,510
which in our case of course is calculate most expensive than we invoke it like so.

63
00:05:16,690 --> 00:05:19,830
And the second thing is the dependency array.

64
00:05:20,020 --> 00:05:24,190
And again, in this case, I'm passing in the product.

65
00:05:24,460 --> 00:05:32,890
And then of course, I need to change from Colquitt, most expensive to most expensive, and I can remove

66
00:05:32,890 --> 00:05:34,490
those products right now.

67
00:05:35,140 --> 00:05:39,870
So what you notice that it is still the same value.

68
00:05:40,120 --> 00:05:41,920
So we still call this function.

69
00:05:42,370 --> 00:05:47,110
But then every time we click on account, what, we don't see the helo.

70
00:05:47,320 --> 00:05:47,730
Correct.

71
00:05:48,010 --> 00:05:51,670
So that means, of course, we're not calling this function.

72
00:05:52,060 --> 00:05:54,970
We remember the value using the use.

73
00:05:55,750 --> 00:06:04,000
And not only when the products change, essentially the data that we're passing, and only then we run

74
00:06:04,000 --> 00:06:07,710
the function one more time and recalculate the value.

75
00:06:08,080 --> 00:06:15,340
So that is react mammo use callback as well as use my mom hook and react.