1
00:00:00,510 --> 00:00:08,520
Once I have shared my two cents about the performance optimizations and react, of course, let's go

2
00:00:08,520 --> 00:00:17,090
to our example and we're looking for the folder number 12 named my component against set up online.

3
00:00:17,100 --> 00:00:19,030
You're looking in the memo.

4
00:00:19,050 --> 00:00:24,090
Use my more use callback folder and then more specifically, the setup folder.

5
00:00:24,150 --> 00:00:28,710
Again, it's going to have the index, so you don't need to give it more specific path.

6
00:00:29,010 --> 00:00:32,790
And what you should see on screen is the count.

7
00:00:33,100 --> 00:00:38,980
So, of course, I can increase the count as well as I have some products over here.

8
00:00:39,330 --> 00:00:47,010
So now, of course, let's navigate to that index and let's see what all the big fuss is about.

9
00:00:47,460 --> 00:00:49,680
And you can see that I have some reports.

10
00:00:49,680 --> 00:00:54,150
I have your state use callbacks memo, something we'll use in later videos.

11
00:00:54,420 --> 00:00:58,350
And also I'm using my custom futch.

12
00:00:58,500 --> 00:01:02,570
So use fetch hook where I pass in the URL.

13
00:01:03,390 --> 00:01:10,390
In this case, again, the euro is my own IP where I'm just sharing my product.

14
00:01:10,570 --> 00:01:12,460
That is for my Joske.

15
00:01:12,480 --> 00:01:19,650
Of course we built a e-commerce store and this is the API that is providing those products.

16
00:01:19,980 --> 00:01:21,990
I get back the products again.

17
00:01:21,990 --> 00:01:24,030
I'm not using loading that.

18
00:01:24,030 --> 00:01:25,860
I have the account and set count.

19
00:01:26,100 --> 00:01:31,140
So this is my state variable and I have the heading one for my account.

20
00:01:31,350 --> 00:01:35,160
And of course I have the button that increases the comp.

21
00:01:35,430 --> 00:01:40,410
And then of course things get a bit more interesting where I have my big list.

22
00:01:40,560 --> 00:01:43,380
So again, this is oversimplified example.

23
00:01:43,560 --> 00:01:48,810
We're talking about big lists, whether data is one hundred items, thousand items or something along

24
00:01:48,810 --> 00:01:53,450
those lines, because if you check it out, my list is not that big.

25
00:01:53,700 --> 00:01:55,380
So I have a big list then.

26
00:01:55,380 --> 00:02:01,320
The problem is products and I pass in the products that I'm getting back from my customers.

27
00:02:01,500 --> 00:02:07,530
And again, if you didn't cover customer, please go back because I'm not going to cover it one more

28
00:02:07,530 --> 00:02:07,860
time.

29
00:02:08,220 --> 00:02:09,030
I'm not in here.

30
00:02:09,030 --> 00:02:16,140
I have the section I iterate over the product and I create a single component, so single components

31
00:02:16,140 --> 00:02:20,430
for the product just to emphasize one of the points.

32
00:02:20,430 --> 00:02:26,100
And then of course, I have the key that is that specific value, the unique one, because I have the

33
00:02:26,100 --> 00:02:28,140
list and then the other that product.

34
00:02:28,150 --> 00:02:33,090
So I use the separate operator where I grew up, all the properties that are on the product.

35
00:02:33,480 --> 00:02:38,460
Of course, if you want to see what we're getting back, be my guest.

36
00:02:38,910 --> 00:02:44,880
In this case, I'll copy and paste and you'll notice that, of course, I have the array and then each

37
00:02:44,880 --> 00:02:46,410
and every item is that product.

38
00:02:46,410 --> 00:02:50,610
I have the ID, I have the image and all that good stuff.

39
00:02:50,910 --> 00:02:57,450
Now, that is now the most important part, though, because, yes, in single product notice, I'm

40
00:02:57,450 --> 00:03:00,280
accessing the fields property on the object.

41
00:03:00,280 --> 00:03:02,250
Then I do a little bit more the structuring.

42
00:03:02,460 --> 00:03:03,690
I get the image.

43
00:03:03,690 --> 00:03:08,980
And this should look very familiar because we have done it a thousand times already in this detail.

44
00:03:09,420 --> 00:03:15,720
The point that I'm trying to make is something else where at the moment I have the list, I have click

45
00:03:15,720 --> 00:03:24,630
me and you'll notice that if you add effect in a single product as well as the big list, each and every

46
00:03:24,630 --> 00:03:27,900
time you click on a button, you're actually re rendering.

47
00:03:28,350 --> 00:03:31,410
And let me show you how is that going to look like.

48
00:03:31,410 --> 00:03:39,660
So already imported the use effect, by the way, I didn't my let's go use fact now again, in your

49
00:03:39,660 --> 00:03:41,340
case, it's going to be already there.

50
00:03:41,790 --> 00:03:50,850
And if we scroll down here and if we go with big list and if you go with use of fact and then you call

51
00:03:50,850 --> 00:04:01,080
it and we'll just log a big list called Big List called, and I'll do the same thing over here where

52
00:04:01,080 --> 00:04:02,280
I'll copy and paste.

53
00:04:02,760 --> 00:04:06,900
And you can also add the array here, the empty dependency array.

54
00:04:07,290 --> 00:04:13,980
It's not going to change the simple fact that every time you click on a button, you'll invoke both

55
00:04:13,980 --> 00:04:14,310
of them.

56
00:04:14,700 --> 00:04:23,280
So again, I have used the fact and now say a single item called by the way, I can add here a count

57
00:04:23,640 --> 00:04:24,390
as well.

58
00:04:24,690 --> 00:04:30,080
So if I navigate to a bigger browser window for refresh notice.

59
00:04:30,390 --> 00:04:39,240
So once we call our component, yeah, I have item called out and called on, it goes all the way up

60
00:04:39,240 --> 00:04:40,590
to a twenty four.

61
00:04:41,190 --> 00:04:48,840
Now what's more important though is that if you check out the console, I keep on clicking notice these

62
00:04:48,840 --> 00:04:51,570
values, they keep on increasing.

63
00:04:52,350 --> 00:04:58,920
So I have twelve items and then pretty much each and every time I click on a button I see this big list

64
00:04:58,920 --> 00:04:59,370
called.

65
00:04:59,930 --> 00:05:03,580
And also, each and every item gets really random.

66
00:05:04,100 --> 00:05:06,220
Now, first of all, why is that happening?

67
00:05:06,680 --> 00:05:14,120
Because I have the state value using you state and then each and every time I click the button, what

68
00:05:14,120 --> 00:05:14,760
am I doing?

69
00:05:15,410 --> 00:05:17,360
Well, I change the value.

70
00:05:17,360 --> 00:05:17,840
Correct.

71
00:05:18,110 --> 00:05:24,470
And remember, your state was doing what it was preserving the values between the renders and it was

72
00:05:24,470 --> 00:05:29,060
triggering the let's say it together rear under.

73
00:05:29,330 --> 00:05:29,870
Correct.

74
00:05:30,320 --> 00:05:35,720
And of course, in my component, in the next one, I have my big list.

75
00:05:36,440 --> 00:05:45,080
So each and every time I click on a button and I update my current value, I'm triggering the array

76
00:05:45,080 --> 00:05:45,530
render.

77
00:05:46,220 --> 00:05:48,640
And then of course I'm rendering the big list.

78
00:05:48,770 --> 00:05:56,810
And then in the big list I have my single product, more specifically ARMATRADING over the array and

79
00:05:56,810 --> 00:05:59,800
I return for each and every item, my single product.

80
00:06:00,380 --> 00:06:03,110
So those ones also get re render.

81
00:06:03,860 --> 00:06:05,210
So what would be the solution?

82
00:06:05,660 --> 00:06:11,780
Well, solution is the memory function that comes with Riak again.

83
00:06:12,080 --> 00:06:14,720
Please don't confuse it with use Memmo.

84
00:06:15,200 --> 00:06:16,940
Use memory is going to do something else.

85
00:06:16,940 --> 00:06:17,690
That is the hook.

86
00:06:17,930 --> 00:06:20,900
We're talking about function by the name of Memmo.

87
00:06:21,320 --> 00:06:26,840
If you want to be really specific, then of course it is a method because it is on react.

88
00:06:27,290 --> 00:06:35,300
And what we would need to do here is just go with react and then that my mom or you can import it.

89
00:06:35,600 --> 00:06:38,840
You can also do that up here where we're importing everything.

90
00:06:39,380 --> 00:06:46,370
And then what you would want is to wrap your essentially whole component in that memo.

91
00:06:46,670 --> 00:06:51,290
So memory is a function and you just pass in your component.

92
00:06:51,680 --> 00:06:59,600
So simply you set up parentheses and then you set up all the logic that you had for the component in

93
00:06:59,690 --> 00:07:00,710
that memo.

94
00:07:01,100 --> 00:07:01,630
All right.

95
00:07:02,000 --> 00:07:03,260
So once we save.

96
00:07:04,130 --> 00:07:12,140
We all noticed that, yes, on the initial render notice, we have 12, so we call this 12 times because

97
00:07:12,140 --> 00:07:15,780
we have 12 items that each and every time I increase.

98
00:07:16,130 --> 00:07:18,380
Notice how we're not calling that.

99
00:07:18,710 --> 00:07:19,460
Use the fact.

100
00:07:19,670 --> 00:07:20,120
Why?

101
00:07:20,600 --> 00:07:24,170
Well, because my mom is checking.

102
00:07:24,290 --> 00:07:25,790
It is memorizing.

103
00:07:26,060 --> 00:07:27,500
Well, what is the value?

104
00:07:27,770 --> 00:07:36,470
So if this props value did not change, then we're not triggering the render because we need to remember

105
00:07:36,470 --> 00:07:42,940
that every time the props or the state changes component or renders.

106
00:07:43,460 --> 00:07:49,610
So in this case, what's happening is that we're triggering that rear ender with a count.

107
00:07:49,910 --> 00:07:50,420
Correct.

108
00:07:50,430 --> 00:07:54,830
Because each and every time we change that value, we triggering the referendum.

109
00:07:55,280 --> 00:08:04,220
Now, when we add this react memo, what we do is we check, we say, hey, listen, did the value for

110
00:08:04,220 --> 00:08:06,310
my props change or it's exactly the same.

111
00:08:06,560 --> 00:08:11,210
And of course, the answer is, as you're clicking on a button, the value for the product is exactly

112
00:08:11,210 --> 00:08:11,660
the same.

113
00:08:12,170 --> 00:08:16,290
So then react is like, OK, so now I don't need to render my component.

114
00:08:16,760 --> 00:08:25,590
So if we don't rearrange the big list, of course, as a result, we also don't render the single product.

115
00:08:25,940 --> 00:08:29,270
So that is the memory function in react.