Handling User Input Review

[00:00:00]
>> So we have reached 06 custom hooks. If you need to hop there, that's where we are. But otherwise, this is looking pretty cool, right? You can change this and it just updates. I don't know, for me that was just like a magic moment like, okay, react can do some cool stuff.

[00:00:15]
I just kind of described the data dependencies and things just happen. Cool, yeah, so we actually already did this. [LAUGH] That's funny, so in the search params. So we just did this form on Submit, right? So on Submit we say prevent default, Which prevents the form from actually literally submitting.

[00:00:46]
And then we just call requestPets. So you can see here we have onChange and onSubmit, there's onmouseover there's onmouse up, on key up, on key down, on pointer events. I left a link to the doc so you can go see all the event reaction things you can do.

[00:01:05]
One of the things I was gonna say, not that it's super matters, but this e here, which we're definitely treating just like a normal DOM event, technically is a React synthetic event. Generally doesn't matter, it has all the exact same APIs as a normal DOM event, but sometimes it actually does matter.

[00:01:23]
That's not literally a dom event, it's a fake dom event. Usually TypeScript because TypeScript will get picky about what kind of event it is. So, file that somewhere under your brain of maybe useful in TypeScript stuff. That's a pretty big pile in my brain.
>> Is that what they call the virtual dom?

[00:01:42]
>> Yeah, it's part of it. I mean, as Bears addressing, react is a big virtual Dom but notice I haven't said virtual Dom. I mean, we're hours into this course, right? And I've not said virtual Dom, why have I not said it? Cuz it is absolutely the least important part about how react does anything, right?

[00:02:02]
It's an implementation detail that you never have to know or care about. But the general way that react works is it has the real DOM, which is slow. And you have a fake DOM, which is fast, the virtual DOM. What react does is it makes a big fake DOM and then it figures out everything that's the minimal change set that it needs to do to update the DOM.

[00:02:22]
And then it reaches over and does all the slow stuff, but it minimizes how much of that interaction has to happen. That is the virtual DOM. It's how react works underneath the hood, generally you never have to care. But it does a bunch of stuff to keep track of that.

[00:02:38]
So, you can just never worry about the virtual DOM. It was a big buzzword when react came out, everyone was talking about the virtual DOM and now everything has some variety of it.