Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,240 --> 00:00:04,050
So we'll learn about useCallback.
2
00:00:04,050 --> 00:00:06,670
Attached, you find a new mini example
3
00:00:06,670 --> 00:00:08,700
where I also wanna dive into another hook
4
00:00:08,700 --> 00:00:12,190
that helps us with another optimization we could add.
5
00:00:12,190 --> 00:00:14,030
Here we have useCallback
6
00:00:14,030 --> 00:00:17,920
to basically store a function to not recreate it.
7
00:00:17,920 --> 00:00:19,990
This is a function which I pass to the Button
8
00:00:19,990 --> 00:00:21,690
through the onClick prop.
9
00:00:21,690 --> 00:00:24,180
The Button internally uses React.memo.
10
00:00:24,180 --> 00:00:26,950
And because we store that function with useCallback,
11
00:00:26,950 --> 00:00:29,340
the Button will never re-render in this case
12
00:00:29,340 --> 00:00:33,053
because its props never change, and React is aware of that.
13
00:00:33,990 --> 00:00:36,260
Now, I'm also rendering a list here,
14
00:00:36,260 --> 00:00:39,810
and the interesting thing is that the list is sorted.
15
00:00:39,810 --> 00:00:41,663
It's sorted in ascending way.
16
00:00:42,510 --> 00:00:45,650
Now, the data which I put into the list is not sorted.
17
00:00:45,650 --> 00:00:48,323
It's in random order, as you can tell here.
18
00:00:49,250 --> 00:00:51,130
So that means that, of course, obviously,
19
00:00:51,130 --> 00:00:53,170
in the list we're doing some sorting.
20
00:00:53,170 --> 00:00:55,760
And, indeed, here I'm sorting my list
21
00:00:55,760 --> 00:00:58,220
with this simple built-in sort method
22
00:00:58,220 --> 00:00:59,810
to which I just pass a function
23
00:00:59,810 --> 00:01:02,230
that defines how the sorting should happen,
24
00:01:02,230 --> 00:01:04,870
you can look up the sort method documentation
25
00:01:04,870 --> 00:01:06,400
if you wanna learn more about that,
26
00:01:06,400 --> 00:01:09,550
and that gives me my sorted list which I then output.
27
00:01:09,550 --> 00:01:12,280
Now, the thing is sometimes in your code,
28
00:01:12,280 --> 00:01:16,510
sometimes in your components, you might have logic like this
29
00:01:16,510 --> 00:01:19,510
which could be a bit more performance-intensive.
30
00:01:19,510 --> 00:01:22,800
Obviously, that's a short list, sorting will be quick.
31
00:01:22,800 --> 00:01:25,860
But for longer lists, or simply for other tasks,
32
00:01:25,860 --> 00:01:29,150
you might have some code which takes quite some time.
33
00:01:29,150 --> 00:01:31,640
Eventually, this code, of course, needs to execute,
34
00:01:31,640 --> 00:01:34,120
but you certainly don't want to run this code
35
00:01:34,120 --> 00:01:37,183
every time the entire component is re-evaluated.
36
00:01:38,120 --> 00:01:39,570
Now, of course, we learned what we can do
37
00:01:39,570 --> 00:01:42,900
to avoid unnecessary re-evaluations.
38
00:01:42,900 --> 00:01:45,330
We can use React.memo here, right?
39
00:01:45,330 --> 00:01:47,750
With that, we can wrap the DemoList.
40
00:01:47,750 --> 00:01:50,200
With this, this shouldn't run unnecessarily.
41
00:01:50,200 --> 00:01:54,693
If I now console.log DemoList RUNNING here,
42
00:01:55,600 --> 00:01:58,860
we see that, of course, it runs initially.
43
00:01:58,860 --> 00:02:01,100
That means the list was sorted,
44
00:02:01,100 --> 00:02:03,750
but thereafter it shouldn't run again.
45
00:02:03,750 --> 00:02:06,570
Well, actually, I have this button.
46
00:02:06,570 --> 00:02:09,930
When I click it, I change the title here,
47
00:02:09,930 --> 00:02:12,650
and the title is part of my list here.
48
00:02:12,650 --> 00:02:16,500
Therefore, when I click the button, DemoList runs again,
49
00:02:16,500 --> 00:02:18,390
and it needs to run again
50
00:02:18,390 --> 00:02:21,240
because one of its props changed, the title changed.
51
00:02:21,240 --> 00:02:23,260
It has a real different value there.
52
00:02:23,260 --> 00:02:25,640
So React.memo is not failing.
53
00:02:25,640 --> 00:02:27,890
It needs to rerun in this case.
54
00:02:27,890 --> 00:02:29,750
Now, as a side note, of course,
55
00:02:29,750 --> 00:02:32,060
currently it would always rerun
56
00:02:32,060 --> 00:02:34,570
when the parent component re-renders, though,
57
00:02:34,570 --> 00:02:36,850
because at least this array here
58
00:02:36,850 --> 00:02:40,300
is constantly recreated in the parent component
59
00:02:40,300 --> 00:02:42,393
whenever the parent component runs.
60
00:02:43,970 --> 00:02:46,550
So even if the title would not change,
61
00:02:46,550 --> 00:02:50,320
if the parent component would rerun for some other reason,
62
00:02:50,320 --> 00:02:52,790
the DemoList component would be re-executed
63
00:02:52,790 --> 00:02:55,240
because we always generate a new array.
64
00:02:55,240 --> 00:02:57,660
Like functions, arrays are objects.
65
00:02:57,660 --> 00:02:59,510
Objects are reference values.
66
00:02:59,510 --> 00:03:01,080
And therefore, two arrays,
67
00:03:01,080 --> 00:03:03,070
even if they have the exact same elements
68
00:03:03,070 --> 00:03:05,290
and the same order, are never the same
69
00:03:06,620 --> 00:03:10,190
because they occupy two different places in memory.
70
00:03:10,190 --> 00:03:12,280
But here we don't even have the problem,
71
00:03:12,280 --> 00:03:15,370
but instead, as I just explained, because the title changes,
72
00:03:15,370 --> 00:03:19,090
we have a valid reason to rebuild DemoList.
73
00:03:19,090 --> 00:03:22,890
So sometimes the component reruns is re-evaluated.
74
00:03:22,890 --> 00:03:25,220
And still, you might not want to repeat
75
00:03:25,220 --> 00:03:27,740
every bit of work you did there in the past,
76
00:03:27,740 --> 00:03:30,590
especially if the work you would have to redo
77
00:03:30,590 --> 00:03:32,440
is more performance-intensive.
78
00:03:32,440 --> 00:03:36,270
And sorting is one of the more performance-intensive tasks
79
00:03:36,270 --> 00:03:38,053
you can do in your components.
80
00:03:39,000 --> 00:03:42,770
So, is there a solution to that? Yes, there is.
81
00:03:42,770 --> 00:03:46,560
We have useCallback to store function objects
82
00:03:46,560 --> 00:03:50,320
and only rebuild them when some input changed.
83
00:03:50,320 --> 00:03:53,560
We have something similar for all other kinds of data,
84
00:03:53,560 --> 00:03:55,810
and that is another hook which we can import,
85
00:03:55,810 --> 00:03:58,398
the useMemo hook.
86
00:03:58,398 --> 00:04:01,280
useMemo basically allows you to memoize,
87
00:04:02,330 --> 00:04:04,320
so basically that means to store,
88
00:04:04,320 --> 00:04:06,280
any kind of data which you want to store,
89
00:04:06,280 --> 00:04:09,360
just like useCallback does it for functions.
90
00:04:09,360 --> 00:04:11,130
And here we could memoize,
91
00:04:11,130 --> 00:04:13,870
and, yes, that's memoize, not memorize,
92
00:04:13,870 --> 00:04:15,010
these are two different terms,
93
00:04:15,010 --> 00:04:17,829
but it's pretty much the same here in this context,
94
00:04:17,829 --> 00:04:21,660
so you can memoize the result of this sorting here
95
00:04:21,660 --> 00:04:24,780
simply by calling useMemo here,
96
00:04:24,780 --> 00:04:28,720
and now useMemo, as a first argument, wants a function.
97
00:04:28,720 --> 00:04:31,130
That is, however, not a function that will be memorized.
98
00:04:31,130 --> 00:04:34,350
Instead, that function should return what you want to store,
99
00:04:34,350 --> 00:04:38,073
so in this case it should return that sorted array.
100
00:04:39,650 --> 00:04:44,100
Now, just like useCallback, useMemo wants a second argument
101
00:04:44,100 --> 00:04:47,070
which is an array of dependencies,
102
00:04:47,070 --> 00:04:51,040
basically to ensure that this stored value is updated
103
00:04:51,040 --> 00:04:54,850
whenever one of the values you're using in there changes.
104
00:04:54,850 --> 00:04:57,480
And in this case, indeed, whenever items changes,
105
00:04:57,480 --> 00:05:00,460
whenever we get new items, we wanna re-sort them,
106
00:05:00,460 --> 00:05:03,300
so items are a dependency here.
107
00:05:03,300 --> 00:05:04,570
We could add props here
108
00:05:04,570 --> 00:05:06,890
because items are pulled out of props,
109
00:05:06,890 --> 00:05:09,070
but that means that the entire props object
110
00:05:09,070 --> 00:05:09,980
is our dependency,
111
00:05:09,980 --> 00:05:13,310
and therefore this would essentially always recalculate.
112
00:05:13,310 --> 00:05:16,800
So a more elegant way is something we used on useEffect
113
00:05:16,800 --> 00:05:19,420
and its dependencies earlier in the course.
114
00:05:19,420 --> 00:05:22,920
We can use destructuring to pull something out of props,
115
00:05:22,920 --> 00:05:26,373
in this case to pull the items out of props.
116
00:05:27,560 --> 00:05:30,050
And then we can just add the items here as a dependency
117
00:05:30,050 --> 00:05:32,940
and use just items here for sorting.
118
00:05:32,940 --> 00:05:37,623
And now this will only rebuild this if items changed.
119
00:05:38,560 --> 00:05:40,420
Now, let's see when that happens.
120
00:05:40,420 --> 00:05:45,030
For that, I can add a console.log here, Items sorted.
121
00:05:45,030 --> 00:05:47,190
Let's see how often this runs.
122
00:05:47,190 --> 00:05:50,130
If I reload, we see it runs initially, of course,
123
00:05:50,130 --> 00:05:53,580
but it still also runs when I change the title.
124
00:05:53,580 --> 00:05:56,750
Now, the idea was that it shouldn't run there.
125
00:05:56,750 --> 00:05:59,130
Why is it running again then?
126
00:05:59,130 --> 00:06:01,270
Well, because items de-changed.
127
00:06:01,270 --> 00:06:03,970
That's what I mentioned earlier, a few minutes ago.
128
00:06:03,970 --> 00:06:08,200
The items here actually are always recreated when App reruns
129
00:06:08,200 --> 00:06:10,330
because we always create a new array here.
130
00:06:10,330 --> 00:06:12,690
So even if it's technically a similar array
131
00:06:12,690 --> 00:06:14,720
with the same values and the same order,
132
00:06:14,720 --> 00:06:17,670
it's still technically a new array in memory,
133
00:06:17,670 --> 00:06:20,000
and that is treated as a brand new object
134
00:06:20,000 --> 00:06:21,890
which isn't the same as the old array
135
00:06:21,890 --> 00:06:23,910
even if it contains the same values.
136
00:06:23,910 --> 00:06:25,870
That's this reference value thing
137
00:06:25,870 --> 00:06:27,150
I mentioned a couple of times
138
00:06:27,150 --> 00:06:28,700
throughout this module already.
139
00:06:30,160 --> 00:06:32,950
So to ensure that we don't unnecessarily pass
140
00:06:32,950 --> 00:06:33,890
a new array here,
141
00:06:33,890 --> 00:06:36,253
we can, of course, also use memo here.
142
00:06:37,420 --> 00:06:39,850
We simply import useMemo.
143
00:06:39,850 --> 00:06:44,070
And then here, we can wrap it at this function
144
00:06:44,070 --> 00:06:46,070
which should return this array
145
00:06:46,070 --> 00:06:50,440
and add our dependencies which here is an empty array.
146
00:06:50,440 --> 00:06:52,570
We get empty dependencies array here
147
00:06:52,570 --> 00:06:54,860
because here this, of course, never changes.
148
00:06:54,860 --> 00:06:56,890
It has no external dependencies.
149
00:06:56,890 --> 00:06:58,693
It's all hard-coded in here.
150
00:06:59,630 --> 00:07:02,560
So, therefore, now we also call useMemo here.
151
00:07:02,560 --> 00:07:04,870
And, of course, we can also pull it out of there
152
00:07:04,870 --> 00:07:08,951
and say listItems is the result of calling useMemo,
153
00:07:08,951 --> 00:07:11,980
and then we pass listItems here to items.
154
00:07:11,980 --> 00:07:13,660
And with that now,
155
00:07:13,660 --> 00:07:17,570
we should not unnecessarily sort the list again.
156
00:07:17,570 --> 00:07:20,590
Now, we see items sorted initially.
157
00:07:20,590 --> 00:07:22,280
But if I click Change List Title,
158
00:07:22,280 --> 00:07:26,020
we don't see it again because of useMemo.
159
00:07:26,020 --> 00:07:30,480
Now, I will say you will use useMemo far less often
160
00:07:30,480 --> 00:07:32,390
than you use useCallback
161
00:07:32,390 --> 00:07:36,690
because memorizing functions is much more useful,
162
00:07:36,690 --> 00:07:39,660
and you need that more often than memorizing data.
163
00:07:39,660 --> 00:07:41,840
You essentially wanna memorize data
164
00:07:41,840 --> 00:07:44,070
if it would be performance-intensive
165
00:07:44,070 --> 00:07:47,043
to recalculate something based on it.
166
00:07:47,900 --> 00:07:49,920
Otherwise, it might not really be worth it
167
00:07:49,920 --> 00:07:51,600
because you always have to keep in mind
168
00:07:51,600 --> 00:07:54,370
that if you store data with useMemo,
169
00:07:54,370 --> 00:07:56,520
of course, it occupies some memory
170
00:07:56,520 --> 00:07:58,980
and, of course, this storing functionality
171
00:07:58,980 --> 00:08:00,810
also takes up some performance.
172
00:08:00,810 --> 00:08:02,700
So this is not something you wanna use
173
00:08:02,700 --> 00:08:05,370
on every value you're using.
174
00:08:05,370 --> 00:08:08,010
If you got a scenario like this one here, though,
175
00:08:08,010 --> 00:08:09,740
where you wanna sort something,
176
00:08:09,740 --> 00:08:14,229
then it might be worth a look because then using useMemo
177
00:08:14,229 --> 00:08:16,910
and avoiding unnecessary sorting steps
178
00:08:16,910 --> 00:08:19,170
in future component updates,
179
00:08:19,170 --> 00:08:21,193
that might be very well worth it.
180
00:08:22,040 --> 00:08:23,170
Now, throughout this course,
181
00:08:23,170 --> 00:08:25,610
of course, we'll see more examples.
182
00:08:25,610 --> 00:08:27,590
And therefore, throughout this course alone,
183
00:08:27,590 --> 00:08:31,560
you will get a better feeling for when you wanna use what.
184
00:08:31,560 --> 00:08:35,450
In this module, I just wanna put all those things out there
185
00:08:35,450 --> 00:08:37,789
and explain them so that you understand them
186
00:08:37,789 --> 00:08:39,570
and so that you are aware of them.
187
00:08:39,570 --> 00:08:42,860
When you use them always comes with experience,
188
00:08:42,860 --> 00:08:45,460
depends on your preferences, your exact use case,
189
00:08:45,460 --> 00:08:48,500
and there also isn't a clear right or wrong.
190
00:08:48,500 --> 00:08:50,510
It's just something you should be aware of
191
00:08:50,510 --> 00:08:53,300
so that you can look into optimizations like this
192
00:08:53,300 --> 00:08:56,220
if you find out that your application is slow
193
00:08:56,220 --> 00:08:59,403
or that you wanna improve some parts of your application.
15596
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.