Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,300 --> 00:00:04,310
Let me come back to useCallback
2
00:00:04,310 --> 00:00:06,654
because it is important to understand this.
3
00:00:06,654 --> 00:00:10,490
UseCallback allows you to save a function
4
00:00:10,490 --> 00:00:12,420
so that you can reuse it.
5
00:00:12,420 --> 00:00:16,129
Now you had to specify this strange dependency array,
6
00:00:16,129 --> 00:00:19,800
and I don't know about you, but initially you might think,
7
00:00:19,800 --> 00:00:21,190
what do I need this for?
8
00:00:21,190 --> 00:00:24,250
My function has always the same logic
9
00:00:24,250 --> 00:00:25,993
across rerender cycles.
10
00:00:27,080 --> 00:00:29,910
Well, keep in mind that in JavaScript
11
00:00:29,910 --> 00:00:32,210
functions are closures,
12
00:00:32,210 --> 00:00:34,870
which means they close over the values
13
00:00:34,870 --> 00:00:37,610
that are available in their environment.
14
00:00:37,610 --> 00:00:40,680
Now, again, if you're not 100% sure about closures,
15
00:00:40,680 --> 00:00:42,150
attached you'll find some resources
16
00:00:42,150 --> 00:00:43,700
that get you started with them
17
00:00:43,700 --> 00:00:45,210
because you need to know closures
18
00:00:45,210 --> 00:00:47,700
to fully grasp how React works.
19
00:00:47,700 --> 00:00:49,763
Let me give you a concrete example.
20
00:00:50,720 --> 00:00:53,050
Let's say we have a second button,
21
00:00:53,050 --> 00:00:55,710
which enables the toggling functionality.
22
00:00:55,710 --> 00:00:58,490
So a button that makes the other button work.
23
00:00:58,490 --> 00:01:00,350
Allow toggling.
24
00:01:00,350 --> 00:01:01,863
For that we need a new state,
25
00:01:04,200 --> 00:01:08,350
allow toggle and set allow toggle.
26
00:01:08,350 --> 00:01:09,900
And initially that's false.
27
00:01:09,900 --> 00:01:12,180
And we have a new function here,
28
00:01:12,180 --> 00:01:14,490
allow toggle handler.
29
00:01:14,490 --> 00:01:17,030
We could again useCallback but for the moment
30
00:01:17,030 --> 00:01:18,943
let submit it, doesn't matter here.
31
00:01:21,550 --> 00:01:25,020
Here I wanna call set allow toggle and set it to true.
32
00:01:25,020 --> 00:01:27,510
So I always set it to true here.
33
00:01:27,510 --> 00:01:29,810
This does not toggle the toggle value
34
00:01:29,810 --> 00:01:32,600
it just enables toggling for the other button.
35
00:01:32,600 --> 00:01:34,400
Because now, and that's the gotcha,
36
00:01:34,400 --> 00:01:38,250
I will not only bind the allow toggle handler here
37
00:01:38,250 --> 00:01:39,383
to the new button.
38
00:01:41,030 --> 00:01:44,360
Instead, I will use the allow toggle state snapshot
39
00:01:44,360 --> 00:01:46,080
in my other function here
40
00:01:46,080 --> 00:01:49,990
to check whether I'm allowed to set show paragraph.
41
00:01:49,990 --> 00:01:54,350
So here I will check if allow toggle is true,
42
00:01:54,350 --> 00:01:58,210
and only if it is set show paragraph will be called.
43
00:01:58,210 --> 00:02:01,250
So the show paragraph state will only be updated
44
00:02:01,250 --> 00:02:02,733
if toggling is allowed.
45
00:02:04,390 --> 00:02:07,910
And now I will also reuse show paragraph here
46
00:02:07,910 --> 00:02:10,333
to replace my hard coded false value.
47
00:02:11,760 --> 00:02:14,720
With that, if the app reloads,
48
00:02:14,720 --> 00:02:18,300
you will see that if I click the toggle paragraph button,
49
00:02:18,300 --> 00:02:20,410
nothing happens.
50
00:02:20,410 --> 00:02:23,010
Now, if I click allow toggling,
51
00:02:23,010 --> 00:02:25,240
now the other button should do something.
52
00:02:25,240 --> 00:02:28,190
And when we click it, we all should see app running.
53
00:02:28,190 --> 00:02:32,670
However, if I click it still nothing happens.
54
00:02:32,670 --> 00:02:35,520
And that's because functions are closures in JavaScript
55
00:02:35,520 --> 00:02:39,000
and because we're not using useCallback correctly right now.
56
00:02:39,000 --> 00:02:41,020
We even got some yellow squiggly lines here
57
00:02:41,020 --> 00:02:42,760
to make us aware of that problem.
58
00:02:42,760 --> 00:02:44,520
At least I got them here.
59
00:02:44,520 --> 00:02:46,480
Now, what is the problem though?
60
00:02:46,480 --> 00:02:48,670
Functions in JavaScript are closures.
61
00:02:48,670 --> 00:02:51,850
That means when a function is defined,
62
00:02:51,850 --> 00:02:53,330
which happens when the app function
63
00:02:53,330 --> 00:02:56,170
runs in this functions case,
64
00:02:56,170 --> 00:02:58,610
when that function here is defined,
65
00:02:58,610 --> 00:03:03,070
JavaScript basically locks in all the variables
66
00:03:03,070 --> 00:03:04,870
that we're using in there.
67
00:03:04,870 --> 00:03:07,420
All the variables that are defined outside of the function
68
00:03:07,420 --> 00:03:09,480
that we are using, I should say.
69
00:03:09,480 --> 00:03:12,000
In this case, the allowed toggle variable,
70
00:03:12,000 --> 00:03:14,380
that is a variable or a constant
71
00:03:14,380 --> 00:03:17,140
coming from the app function and I'm using it
72
00:03:17,140 --> 00:03:19,040
inside of this function.
73
00:03:19,040 --> 00:03:22,700
Therefore JavaScript closes over that constant
74
00:03:22,700 --> 00:03:25,030
and basically stores that constant
75
00:03:25,030 --> 00:03:27,550
for that function definition.
76
00:03:27,550 --> 00:03:30,490
That means the next time this function here,
77
00:03:30,490 --> 00:03:33,700
the toggle paragraph handler, is executed,
78
00:03:33,700 --> 00:03:36,763
this stored variable will be used.
79
00:03:37,770 --> 00:03:40,490
And with that, the value of that variable
80
00:03:40,490 --> 00:03:43,320
at the point of time, it was stored.
81
00:03:43,320 --> 00:03:46,841
This generally is perfect because this allows us to use
82
00:03:46,841 --> 00:03:50,450
variables from outside the function, in the function,
83
00:03:50,450 --> 00:03:53,260
and call that function at any point of time we want,
84
00:03:53,260 --> 00:03:55,403
which is exactly what we want for a function
85
00:03:55,403 --> 00:03:57,700
that we bind to a button.
86
00:03:57,700 --> 00:04:00,830
The problem with that, and with useCallback however is,
87
00:04:00,830 --> 00:04:03,350
that with useCallback we're telling React
88
00:04:03,350 --> 00:04:05,150
to store that function,
89
00:04:05,150 --> 00:04:08,730
and exactly that function somewhere in memory.
90
00:04:08,730 --> 00:04:12,450
Now, when the app function is re-evaluated and reexecuted
91
00:04:12,450 --> 00:04:15,390
because the toggle state changed,
92
00:04:15,390 --> 00:04:19,120
then React will not recreate this function
93
00:04:19,120 --> 00:04:22,430
because we're using useCallback where we told React
94
00:04:22,430 --> 00:04:26,510
that we don't want to recreate it under all circumstances.
95
00:04:26,510 --> 00:04:29,240
So therefore the allow toggle value
96
00:04:29,240 --> 00:04:31,460
React stored for our function,
97
00:04:31,460 --> 00:04:33,830
is still the old allow toggle value
98
00:04:33,830 --> 00:04:36,700
from the first time the app component was executed,
99
00:04:36,700 --> 00:04:38,670
not the most recent one
100
00:04:38,670 --> 00:04:41,430
because JavaScript, as I just explained,
101
00:04:41,430 --> 00:04:44,040
stored allow toggle this constant
102
00:04:44,040 --> 00:04:46,877
when it created that function here.
103
00:04:46,877 --> 00:04:48,860
And that's of course a gotcha here,
104
00:04:48,860 --> 00:04:50,080
that's a problem.
105
00:04:50,080 --> 00:04:53,880
There are cases where we actually want
106
00:04:53,880 --> 00:04:58,250
to recreate a function because values being used
107
00:04:58,250 --> 00:05:01,960
in that function that are coming from outside the function
108
00:05:01,960 --> 00:05:03,280
might have changed.
109
00:05:03,280 --> 00:05:05,420
And here we have such a case.
110
00:05:05,420 --> 00:05:09,360
So here we would want to add allow toggle as a dependency
111
00:05:09,360 --> 00:05:10,750
in our dependency array.
112
00:05:10,750 --> 00:05:14,360
And that tells React that we generally want
113
00:05:14,360 --> 00:05:16,020
to store that function.
114
00:05:16,020 --> 00:05:20,260
But, whenever allow toggle changes
115
00:05:20,260 --> 00:05:24,620
and it has a new value, we want to recreate that function
116
00:05:24,620 --> 00:05:27,100
and store that new recreated function.
117
00:05:27,100 --> 00:05:28,960
And this ensures that we always use
118
00:05:28,960 --> 00:05:31,030
the latest allow toggle value
119
00:05:31,030 --> 00:05:32,960
inside of that stored function.
120
00:05:32,960 --> 00:05:35,350
If allowed toggle does not change however,
121
00:05:35,350 --> 00:05:37,713
then we don't recreate the function.
122
00:05:38,680 --> 00:05:41,813
And with that if I save this, if we go back,
123
00:05:43,360 --> 00:05:48,360
now, if I click Toggle paragraph nothing happens initially.
124
00:05:48,620 --> 00:05:51,740
However, if I now click on allow toggling,
125
00:05:51,740 --> 00:05:54,696
now we'll see that if I now click toggle paragraph,
126
00:05:54,696 --> 00:05:58,920
we do get our paragraph and all expected output.
127
00:05:58,920 --> 00:06:02,913
It's also worth noting of course, that for toggle paragraph,
128
00:06:04,450 --> 00:06:08,050
we see button running, but we only see it once.
129
00:06:08,050 --> 00:06:11,260
And that's actually our second button
130
00:06:12,360 --> 00:06:14,900
where react memo has no effect
131
00:06:14,900 --> 00:06:16,820
because we're not using useCallback
132
00:06:16,820 --> 00:06:18,503
on the allow toggle handler.
133
00:06:19,470 --> 00:06:23,550
We would see it twice if the button for a toggle paragraph
134
00:06:23,550 --> 00:06:25,033
would also be rendered.
135
00:06:25,930 --> 00:06:30,760
But that's not the case because our useCallback here ensures
136
00:06:30,760 --> 00:06:33,870
that we're not rebuilding this function every time
137
00:06:33,870 --> 00:06:37,580
we only did that once when allow toggle changed.
138
00:06:37,580 --> 00:06:40,410
Now, I know these are concepts that can be confusing.
139
00:06:40,410 --> 00:06:42,640
In the end it's not so much React though
140
00:06:42,640 --> 00:06:44,040
it's more Java script
141
00:06:44,040 --> 00:06:47,150
and you have to understand how closures work
142
00:06:47,150 --> 00:06:48,540
and you have to understand
143
00:06:48,540 --> 00:06:51,340
that primitive reference value concept.
144
00:06:51,340 --> 00:06:55,460
If both is clear, it's absolutely clear how react works.
145
00:06:55,460 --> 00:06:57,890
And I hope that this and the last lectures
146
00:06:57,890 --> 00:06:59,540
could help you understand it
147
00:06:59,540 --> 00:07:02,320
and made it clear how useCallback works,
148
00:07:02,320 --> 00:07:04,490
how functions are really executed,
149
00:07:04,490 --> 00:07:06,210
and how React memo works,
150
00:07:06,210 --> 00:07:08,633
and how that works together with useCallback.
11715
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.