Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,180 --> 00:00:04,000
So now, before we proceed,
2
00:00:04,000 --> 00:00:06,180
let me sum up what we just learned,
3
00:00:06,180 --> 00:00:09,790
so that this is all really clear because it is important.
4
00:00:09,790 --> 00:00:12,370
In React apps you work with components,
5
00:00:12,370 --> 00:00:16,570
typically with function components in modern React.
6
00:00:16,570 --> 00:00:19,640
Those components have one job in the end,
7
00:00:19,640 --> 00:00:23,250
and that is this JSX code, which they return.
8
00:00:23,250 --> 00:00:26,670
This tells React what the output
9
00:00:26,670 --> 00:00:28,780
of that component should be.
10
00:00:28,780 --> 00:00:30,600
Now in your React components,
11
00:00:30,600 --> 00:00:34,730
you can work with state, or with props, or with context,
12
00:00:34,730 --> 00:00:36,840
though props and context as I mentioned,
13
00:00:36,840 --> 00:00:39,320
all come down to state changes in the end,
14
00:00:39,320 --> 00:00:41,050
to make changes to a component
15
00:00:41,050 --> 00:00:44,560
and to make changes to the data that affects this component
16
00:00:44,560 --> 00:00:47,480
or that affects parts of your application.
17
00:00:47,480 --> 00:00:50,300
Whenever you change state in a component
18
00:00:50,300 --> 00:00:54,320
that component where the state changed is reevaluated.
19
00:00:54,320 --> 00:00:55,610
And that simply means
20
00:00:55,610 --> 00:00:58,750
that the component function is executed again.
21
00:00:58,750 --> 00:01:01,130
So all this code runs again,
22
00:01:01,130 --> 00:01:03,420
and therefore we get a new output.
23
00:01:03,420 --> 00:01:06,820
This might actually be exactly the same output as before,
24
00:01:06,820 --> 00:01:08,590
but it could also look different.
25
00:01:08,590 --> 00:01:11,970
For example, if suddenly a paragraph is rendered or not,
26
00:01:11,970 --> 00:01:14,850
or as in the case of the demo output component,
27
00:01:14,850 --> 00:01:17,060
if the text is rendered or not.
28
00:01:17,060 --> 00:01:21,300
React simply takes the result of this latest evaluation
29
00:01:21,300 --> 00:01:24,640
and compares it to the previous evaluation's result.
30
00:01:24,640 --> 00:01:27,880
And it does that for all affected components.
31
00:01:27,880 --> 00:01:30,380
And then it hands off any changes,
32
00:01:30,380 --> 00:01:35,310
any differences it identified to, in our case, React DOM
33
00:01:35,310 --> 00:01:37,170
because we are using React DOM
34
00:01:37,170 --> 00:01:40,640
to render our React app here in the index JS file,
35
00:01:40,640 --> 00:01:43,170
and React DOM will take those changes
36
00:01:43,170 --> 00:01:46,650
and apply them to the real DOM in the browser,
37
00:01:46,650 --> 00:01:50,303
and really only those changes, nothing else.
38
00:01:51,350 --> 00:01:54,320
Now, when React reevaluates a component,
39
00:01:54,320 --> 00:01:57,480
it does not just reevaluate that component,
40
00:01:57,480 --> 00:01:59,850
but since it reruns the entire function
41
00:01:59,850 --> 00:02:01,700
and therefore all the rebuilds,
42
00:02:01,700 --> 00:02:04,300
this JSX code rebuilds the output
43
00:02:04,300 --> 00:02:06,530
for this latest snapshot, so to say.
44
00:02:06,530 --> 00:02:08,900
It will also rerun all components
45
00:02:08,900 --> 00:02:11,170
that you have in this JSX code.
46
00:02:11,170 --> 00:02:13,520
Like in this case, it will rerun the demo output
47
00:02:13,520 --> 00:02:15,440
and the button components.
48
00:02:15,440 --> 00:02:20,440
Now to avoid unnecessary re-executions of child components,
49
00:02:20,610 --> 00:02:23,100
you can use React.memo to tell React,
50
00:02:23,100 --> 00:02:27,080
hey, please only execute this component function again
51
00:02:27,080 --> 00:02:28,920
if the props really changed,
52
00:02:28,920 --> 00:02:32,280
so if we got real new values in there.
53
00:02:32,280 --> 00:02:34,430
If we got no new values,
54
00:02:34,430 --> 00:02:37,600
please don't re-execute this function.
55
00:02:37,600 --> 00:02:40,510
Now since reevaluating a component means
56
00:02:40,510 --> 00:02:42,860
that the entire component function runs again,
57
00:02:42,860 --> 00:02:44,890
that can have strange effects
58
00:02:44,890 --> 00:02:47,770
if you're not aware of the fact that this really means
59
00:02:47,770 --> 00:02:50,070
that everything in his function runs again.
60
00:02:50,070 --> 00:02:52,130
And therefore, if you, for example,
61
00:02:52,130 --> 00:02:54,450
create functions in the function
62
00:02:54,450 --> 00:02:56,700
and you pass those functions through props
63
00:02:56,700 --> 00:03:00,750
to our components, you will indeed get a new function object
64
00:03:00,750 --> 00:03:04,200
and even React.memo will then not be able to help you
65
00:03:04,200 --> 00:03:06,390
because objects are reference values
66
00:03:06,390 --> 00:03:08,410
and comparing them with equal signs,
67
00:03:08,410 --> 00:03:10,700
which is what React.memo does under the hood,
68
00:03:10,700 --> 00:03:13,080
will not work for primitive values,
69
00:03:13,080 --> 00:03:15,670
you will therefore not have that problem.
70
00:03:15,670 --> 00:03:18,680
That's where useCallback comes in and can help you,
71
00:03:18,680 --> 00:03:21,440
because with useCallback, you can tell React
72
00:03:21,440 --> 00:03:24,950
that it should store a function and not recreate it
73
00:03:24,950 --> 00:03:27,030
when the surrounding function runs again,
74
00:03:27,030 --> 00:03:29,993
as long as certain dependencies didn't change.
75
00:03:31,240 --> 00:03:34,140
That is what we learned thus far.
76
00:03:34,140 --> 00:03:37,240
Now there are a couple of open questions though.
77
00:03:37,240 --> 00:03:40,950
For example, if the app function runs again,
78
00:03:40,950 --> 00:03:43,510
whenever the state changes, doesn't this mean
79
00:03:43,510 --> 00:03:47,060
that we all the time reinitialize our state,
80
00:03:47,060 --> 00:03:50,950
because we also execute useState over and over again then,
81
00:03:50,950 --> 00:03:53,230
why is this not causing problems?
82
00:03:53,230 --> 00:03:55,000
Well, it's questions like this
83
00:03:55,000 --> 00:03:57,510
and general state related questions
84
00:03:57,510 --> 00:03:59,163
that we're going to dive in next.
6716
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.