Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,220 --> 00:00:06,050
Hey, it's Andre here, I want to make a quick note about this on change event.
2
00:00:06,560 --> 00:00:08,450
Let's demystify some of the code here.
3
00:00:09,570 --> 00:00:15,920
Now, the first thing I want to point out is this on change, remember, is in jail sex.
4
00:00:16,440 --> 00:00:17,850
It's not actual.
5
00:00:20,010 --> 00:00:21,410
Remember this diagram?
6
00:00:23,040 --> 00:00:30,150
When the dam changes or reacts to a user input, in our case, searching for a monster, it's going
7
00:00:30,150 --> 00:00:32,340
to say, hey, there's an event.
8
00:00:32,340 --> 00:00:35,310
Somebody has just typed in something into the input.
9
00:00:36,210 --> 00:00:41,900
However, what react does remember, we don't manually touch the doll if that were the case.
10
00:00:42,930 --> 00:00:52,500
We would be using the on change event natively in our HTML using something like this, but because we're
11
00:00:52,500 --> 00:00:59,370
using just sex and by the way, if you're not familiar with HTML events, I will link to a great resource
12
00:00:59,370 --> 00:01:01,750
that talks about this so you can learn more about them.
13
00:01:02,160 --> 00:01:07,770
But again, it's just something that the DOM gives us in order for us to interact with user events.
14
00:01:08,700 --> 00:01:15,420
React actually has something called synthetic events, and I do recommend that any time you have questions
15
00:01:15,420 --> 00:01:21,570
throughout the course to Google things and go visit the react documentation, because while they're
16
00:01:21,570 --> 00:01:27,290
the ultimate source of truth when it comes to react now, what are these synthetic events?
17
00:01:28,050 --> 00:01:35,310
If we go back to our diagram when a DOM event happens because let's say user clicks or types something
18
00:01:35,310 --> 00:01:39,580
in an input, the DOM on change event is going to say, hey, something's changed.
19
00:01:40,230 --> 00:01:44,690
Now react intercepts that and says, oh, something has changed.
20
00:01:44,970 --> 00:01:48,090
Let me go tell my react tab that something's happened.
21
00:01:48,330 --> 00:01:50,430
And this is what a synthetic event is.
22
00:01:50,430 --> 00:01:56,490
A synthetic event is kind of like a fake event that we pretend is a dumb event.
23
00:01:56,490 --> 00:02:01,860
But it's something that, well, our reacting robot is telling us, saying, hey, there was an event
24
00:02:01,860 --> 00:02:02,540
on the dome.
25
00:02:02,580 --> 00:02:03,270
What should we do?
26
00:02:04,370 --> 00:02:11,810
And this is our synthetic event you see here that it's camel KAIST, so it's not actual XHTML, but
27
00:02:11,810 --> 00:02:19,310
a synthetic event on change that we use to detect whenever that -- event happens, we receive that
28
00:02:19,310 --> 00:02:23,810
event because something has happened and then we update the state.
29
00:02:23,810 --> 00:02:29,630
Remember, state is simply something that usually changes in our app due to a user action.
30
00:02:30,320 --> 00:02:37,130
In our case, the search field is going to change because somebody has typed in into the textbooks.
31
00:02:38,100 --> 00:02:44,730
Now, if we look at this code over here, some of you might be asking why we don't just run this function.
32
00:02:44,890 --> 00:02:50,070
If you look over here, all we're doing is actually defining the function and not running it.
33
00:02:50,460 --> 00:02:56,820
We could extract this entire piece of code and put it up here, which, by the way, we will in a later
34
00:02:56,820 --> 00:02:57,180
video.
35
00:02:58,320 --> 00:03:04,920
Because we're not running you here, we're just saying this is a anonymous function that gets triggered
36
00:03:04,920 --> 00:03:11,250
on change and this is an important distinction here, because you would never run set state in render
37
00:03:11,640 --> 00:03:13,620
because, well, that's going to create some errors.
38
00:03:13,620 --> 00:03:19,020
You can actually try it out for yourself, trying to call sad state and render, because every time
39
00:03:19,020 --> 00:03:23,820
you call that state, it renders and every time you render it's going to cost.
40
00:03:23,820 --> 00:03:25,630
That state is just going to create a loop.
41
00:03:26,190 --> 00:03:31,830
So what we're doing here is we're actually defining a function, not running it, just letting them
42
00:03:31,830 --> 00:03:37,950
know, hey, on change, I want this to happen and react internally with this synthetic event is going
43
00:03:37,950 --> 00:03:41,850
to say, hey, any time on change happens, it's going to be an event.
44
00:03:42,060 --> 00:03:43,480
Just run this function.
45
00:03:44,290 --> 00:03:47,010
Now, the last part is this over here.
46
00:03:47,800 --> 00:03:51,480
Remember how you said that this doesn't get logged right away?
47
00:03:52,260 --> 00:03:58,110
And that's because once again, reactor smart, we're not actually interacting with the dome.
48
00:03:58,590 --> 00:04:06,030
What it's going to say is when we do set state, it's going to say, hey, we thought we have some updates
49
00:04:06,030 --> 00:04:08,000
that we want to make to the dome.
50
00:04:08,280 --> 00:04:09,270
Can you do it for us?
51
00:04:09,600 --> 00:04:13,950
And our little robot is going to say, yeah, I can do it.
52
00:04:13,950 --> 00:04:14,880
But you know what?
53
00:04:14,880 --> 00:04:17,040
I know when the best time to do that is?
54
00:04:17,040 --> 00:04:18,149
I know when to do it.
55
00:04:18,149 --> 00:04:19,320
Just let me handle it.
56
00:04:19,320 --> 00:04:20,100
I'll take care of it.
57
00:04:20,640 --> 00:04:22,680
So it actually doesn't happen right away.
58
00:04:22,950 --> 00:04:26,670
What it does is essentially it's schedules and batches work.
59
00:04:26,820 --> 00:04:33,120
So if there may be multiple updates that need to be done, then it can actually optimize that for us.
60
00:04:34,050 --> 00:04:41,070
And that's why React is good, right, because it figures out for us the best time and the best way
61
00:04:41,070 --> 00:04:44,630
to update the DOM, we just tell it that we want an update.
62
00:04:44,640 --> 00:04:51,510
It's declarative, but we leave that internal working to this little smart Beatport that's constantly
63
00:04:51,510 --> 00:04:56,840
improving with new updates so that we don't have to worry ourselves with the don.
64
00:04:57,840 --> 00:04:59,790
And that's it, let's go to the next video.
6535
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.