Hooks Q&A

[00:00:00]
>> If you're able to set the location, how come you're declaring it with const?
>> Const is it's a bit of a misnomer. If you're coming from a background of Java, we expecting this to be totally immutable, it's not that. It's basic, I'm just declaring a variable here.

[00:00:19]
It only gets created once at the beginning of this function and it's not getting reassigned, it's only getting reassigned when the entire function runs again, right? So within the scope, it never gets reassigned. It's just within this function body that it's declared and it's never reassigned. That's why const works here.

[00:00:41]
If that's confusing to you, feel free, by all means, call this let, there's zero harm in doing that. That's just up to you. So this is a hook, right? These things are called the hook, anytime that you see use, that's a big warning or yeah, it's a sign in your head you're working with a hook.

[00:01:03]
By convention all hooks start with use. React invented this kind of idea. I think it's fair to say, at least they made it popular in any case. And now, View uses it, I think Svelte has some version of it, hooks have gotten quite popular. So, this is the default that's given to the hook.

[00:01:26]
But that's only for the first time it gets run, every time after that it's ignored. This function is what you call to update it. So that's when we're doing it here on the onChange. I always use set for mine and even in my notes, I used to use update, but now I've changed that to set cuz most people use set.

[00:01:52]
But that's just personal preference, you don't have to call it that way. This destructuring probably looks a little strange to people. It is a little strange to be frank. What is actually happening here, And I'll just write this out to be a bit more explicit for you to see what that looks like.

[00:02:14]
It gives you back an array. So that's what this location hook is. Okay, and then const location = locationHook(0) and const setLocation = locationHook(1). So these three lines are equivalent to this one line here. This is just a shorthanded of way of saying, I know this is gonna give me back an array, give me back the first thing as location, give me back the second thing is setLocation.

[00:02:54]
Does that make sense? That's just the API they decided to go with. It's frankly a little annoying if you ask me because this can be kinda confusing to new students, but here we are, that's what it is. You'll see that it's extremely common with hooks to do it that way.

[00:03:18]
Okay, you can make your own custom hooks. We will talk about that later, but all custom hooks are other hooks bundled together as one hook. So eventually, all custom hooks that you see, it's just calling a bunch of other hooks and they're bundling that into one more usable hook to use.

[00:03:37]
And again, we'll do that a little bit later in the class. I'm showing you how to do function components with hooks. Later we'll see how to do class components, which is kind of the older way of doing components in React. One more eslint rule here for you. I want you to npm install- D eslint-plugin-react-hooks at 4.6.0.

[00:04:10]
This is an official eslin tool from the React team to make sure that you use hooks in a good way. Okay, and then the only thing you need to do here is go back into your eslintrc and just somewhere here to put plugin:react-hooks/recommended. That's the only thing I added is right there on line seven to my eslintrc.json.

[00:04:46]
Doesn't matter what order as long as prettier is last. Okay, and now just to show you what this is going to help you with, npm run dev. If false or something like that, I don't know something like that, it's gonna say, hey, you're putting this inside of a conditional.

[00:05:12]
This is a hook, don't put hooks inside of conditionals, or don't put this in for loops or things like that, right? It catches kind of the weird gotches that hooks have and it'll just warn you, you're using this a little incorrectly. It's mildly annoying sometimes as eslint in general kind of is, but it's very helpful, so I suggest you do that.