Original subtitles

Hey, it's Andre here, I want to make a quick note about this on change event.

Let's demystify some of the code here.

Now, the first thing I want to point out is this on change, remember, is in jail sex.

It's not actual.

Remember this diagram?

When the dam changes or reacts to a user input, in our case, searching for a monster, it's going

to say, hey, there's an event.

Somebody has just typed in something into the input.

However, what react does remember, we don't manually touch the doll if that were the case.

We would be using the on change event natively in our HTML using something like this, but because we're

using just sex and by the way, if you're not familiar with HTML events, I will link to a great resource

that talks about this so you can learn more about them.

But again, it's just something that the DOM gives us in order for us to interact with user events.

React actually has something called synthetic events, and I do recommend that any time you have questions

throughout the course to Google things and go visit the react documentation, because while they're

the ultimate source of truth when it comes to react now, what are these synthetic events?

If we go back to our diagram when a DOM event happens because let's say user clicks or types something

in an input, the DOM on change event is going to say, hey, something's changed.

Now react intercepts that and says, oh, something has changed.

Let me go tell my react tab that something's happened.

And this is what a synthetic event is.

A synthetic event is kind of like a fake event that we pretend is a dumb event.

But it's something that, well, our reacting robot is telling us, saying, hey, there was an event

on the dome.

What should we do?

And this is our synthetic event you see here that it's camel KAIST, so it's not actual XHTML, but

a synthetic event on change that we use to detect whenever that -- event happens, we receive that

event because something has happened and then we update the state.

Remember, state is simply something that usually changes in our app due to a user action.

In our case, the search field is going to change because somebody has typed in into the textbooks.

Now, if we look at this code over here, some of you might be asking why we don't just run this function.

If you look over here, all we're doing is actually defining the function and not running it.

We could extract this entire piece of code and put it up here, which, by the way, we will in a later

video.

Because we're not running you here, we're just saying this is a anonymous function that gets triggered

on change and this is an important distinction here, because you would never run set state in render

because, well, that's going to create some errors.

You can actually try it out for yourself, trying to call sad state and render, because every time

you call that state, it renders and every time you render it's going to cost.

That state is just going to create a loop.

So what we're doing here is we're actually defining a function, not running it, just letting them

know, hey, on change, I want this to happen and react internally with this synthetic event is going

to say, hey, any time on change happens, it's going to be an event.

Just run this function.

Now, the last part is this over here.

Remember how you said that this doesn't get logged right away?

And that's because once again, reactor smart, we're not actually interacting with the dome.

What it's going to say is when we do set state, it's going to say, hey, we thought we have some updates

that we want to make to the dome.

Can you do it for us?

And our little robot is going to say, yeah, I can do it.

But you know what?

I know when the best time to do that is?

I know when to do it.

Just let me handle it.

I'll take care of it.

So it actually doesn't happen right away.

What it does is essentially it's schedules and batches work.

So if there may be multiple updates that need to be done, then it can actually optimize that for us.

And that's why React is good, right, because it figures out for us the best time and the best way

to update the DOM, we just tell it that we want an update.

It's declarative, but we leave that internal working to this little smart Beatport that's constantly

improving with new updates so that we don't have to worry ourselves with the don.

And that's it, let's go to the next video.