This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Custom Hooks Q&A" Lesson
[00:00:00]
>> Questions.
>> Does the order of use states matter?
>> Does the order of use states matter? I don't think so. I can't fathom a reason why that would matter. It's a good question though.
>> Can you have multiple use effects?
>> Yeah, you can have as many effects as you want.
[00:00:23] Sometimes it's very necessary. So for example, this use effect depends on animal, but maybe I have a different effect like that state depends on, so maybe that's like, I don't know, this is the worst idea ever but we're gonna do it. Use effect, And then we're just gonna alert the user, cuz I am a terrible designer.
[00:00:52] Alert. I already feel gross about this.
>> It's gonna be great.
>> I feel like something should be yelling at you for doing this.
>> My heart is yelling at me. This is a case where one maybe quit your job, and two, [LAUGH] where you'd want two different effects cuz now they're contingent on different things changing.
[00:01:20] It's a good question. I'm concerned about leaving that there, but we're gonna try it cuz now I'm curious. Yeah.
>> Is hooks kind of a JavaScript up pattern essentially, or what is the actual mechanism that makes hooks work? Can we use them in pure JavaScript or is it like a React specific thing?
[00:01:43]
>> That's a good question. So let's define hooks as a paradigm. It's not like a specific construct or anything like that, it's like a methodology of writing code, that basically I have a function that's going to be called frequently and then I'm going to be feeding state into a non-stateful function.
[00:02:02] Maybe a function that's intended to be as the least stateful that it possibly can be. The way that we're using functions precisely now this use state and use effect this is hard tied to React. You cannot pull use state out of React and use it in something else.
[00:02:19] Because this is a React specific construct that ties directly into the React library, the React rendering layer, you can't use use state outside of React from the React library. But there are other libraries out there now that let you do it in vanilla JavaScript and I believe Kyle Simpsons, the one that wrote them, another great friend of masters teacher.
[00:02:41] Catify hooks. This is the one that I'm aware of there might be different or better or worse ones, I don't know. But good old Kyle provides a reaction time to hooks for standalone functions. So take a look at that if you're interested in that. There's also view ID adopted hooks pretty heavily.
[00:03:11] I don't really know much more than that other than they're very react like. Yeah, so it's a paradigm, it's like object oriented programming, right? It's not specific to a language, it's just how you choose to write code.
>> And what is the purpose of using use effect inside this custom hook instead of having like a normal function?
[00:03:33]
>> Good question. Well, the reason for that is you want the first render to go completely through start to finish and not interrupted. So that it goes through the first render and basically renders what we'd call an empty state, right? So that the user sees something. The effects are then scheduled to run immediately afterwards.
[00:03:56] Immediate is a loaded word. Functionally to us as human beings immediately, right? It's within milliseconds. It's actually not immediate in the sense of like next tick, like no JS next to kind of seems right. It's not dependably the next tick. If that means something to you, then great, if it doesn't anything to you, then do not worry about it.
[00:04:17] But functionally, it's immediate. So that's the reason it allows you to schedule something to run later. And then react will handle scheduling and then eventually evoking that. And then the other thing about that, by doing it this way, we can then schedule it run yet later. So for this example, every time that animal runs later in the future, or sorry, every time that animal changes in the future, it knows to rerun this over and over again.
[00:04:48] Otherwise we'd have to get some sort of state tracking ourselves that we would do, which is not fun. State tracking is my least favorite thing to do. So yeah, that's why we do it this way. Yeah.
>> You might have already mentioned this, but I know it's something that really really threw me off the first time I made my own hook, but you have to use, use at the beginning of the hook or react to Freecad, you have to say use breed list.
[00:05:17]
>> Yes. So the name here use breed, this is very intentional. If you don't call it that, I think the hooks, ES lint thing will freak out. And then the other thing is, you'll actually get like a bunch of like free error checking from that ES lint library by calling it use breed list or use whatever, right?
[00:05:41] Something else that's just kind of cool to think about. So we have search params here, and then we're gonna invoke useBreedList in here, right? How is it able to track the layer of depth here of like this is called inside of this one, like this use state is called inside of this one, this use effect is called inside of this one?
[00:06:03] And the answer to this question is, it doesn't cuz it doesn't care, right? It doesn't matter, it just called the same hooks in the same order. As long as we're not doing for loops or if statements, it's always gonna be called in the same order no matter what, right?
[00:06:16] So it doesn't actually care about the depth of the call stack there because the first time this is called it gets this, the second time it gets gets called it gets this, right? And it goes in the same order every time no matter the depth.
>> I noticed then you mentioned the name useBreedList.
[00:06:31] This component, Pet app and search parameters all started with a capital letter. Is that the reasoning for the lowercase U in useBreedList? Is that it's required if you're declaring a hook? Is that accurate to say?
>> Let's go with the the name of the function, yes.
>> Like, I cannot call this capital U useBreedList.
[00:06:56] One that implies that it's of component, which is not, that's less of a big deal. But then it won't detect that it's a hook. In which case, all that stuff we were talking about will freak out about all that stuff, right? As far as like the file name, that's just useful, it's not required.
[00:07:16] But there's no reason I would ever capitalize this. Yeah, it just wouldn't be a good idea.
>> Cuz you'd prefer to name the file name after the primary component?
>> In general, yeah.
>> Cool, thank you.
>> Yeap. Yeah, in fact, let's go finish this out really quick.
[00:07:40] So up here we're gonna say import useBreedList from useBreedList. So this is super useful just because if I look at us breed list I look at that I immediately know that that is a hook, right? And that just makes it super useful to navigate a project with. And I mean, I think I've repeated this in almost every course that I've taught here.
[00:08:02] And I probably stole this from Kyle Simpsons talk one of the times I saw him, its code is communication, right? It's first for humans reading your code and secondary for computers, like invoking it, right? If it was first for computers we'd all be writing assembly still, right? Because that's what makes computers go faster.
[00:08:20] We can do like much more low level high performance kind of things, but the reason why we don't write everything in assembly or binary, directly, is because code is communication. We read these highly abstract languages because they're easier to communicate between each other, right? So if I hand you this code, I'm gonna do whatever I can to make it the most comprehensible to you, and then secondarily useful to a computer.
[00:08:43] It's basically like notes we pass each other that just happened to be executable by a computer. It's very useful to think of all of your code in terms of that as like, what am I saying to the next person that resists high probability is gonna be future you.
[00:08:56] So how do I not piss off future me? If you know how to do that I haven't figured out yet, cuz future Brian's a jerk. Actually past Brian's a bigger jerk though. Screw that guy. Anyway. So here line 11, what we wanna do now is replace this, Breeds equals useBreedList and we're gonna pass it, animal.
[00:09:32] And this got upset, no. [LAUGH] So now it says unloaded, I'm gonna hit OK and it's gonna say, maybe loaded, I don't know, this is ridiculous though. Loading, loaded, [LAUGH]
>> Off the alert.
>> Yeah. I forgot to did that. See I told you pass Brian, huge jerk.
[00:09:57] [LAUGH]
>> That's hilarious. That's like the funniest thing I've done in code in a while. Anyway, this is actually kind of probably useful to illustrate how the hook is. No, so it has only called unloaded right now, right? And if I change this, there's nothing here and breed this.
[00:10:13] But if I go in and change this to be dog, right? And then cause loading, alerts will wait, right? So now if I hit OK again, it'll call loaded. And he probably just said don't allow Brian to give you any more alerts. [LAUGH] And now if you look here instead of breed, you'll actually see all of the breeds coming back from the API.
[00:10:37] Pretty cool, right? And now we have this like useBreedList custom hook that anytime in the future if we read another component that needs to see breeds, maybe that's like in our administrator tools, or I don't know, something else that would ever need to see breeds, all we have to do is load this custom hook and feed an animal and all sudden we get alerts galore.
[00:11:00] Also definitely going to your use read this and delete that. Unholy abomination of code. Never use alert. Let me rephrase that, never, ever use alert in your code. Just poor code, which is why I did it. So that is the basic gist of what a custom hook is when you're gonna use them.
[00:11:23] Honestly, I don't end up writing them all the time, I only write them sometimes. Again, when you're doing like a huge block of here's a bunch of things that I'm doing that could be reusable. It's like basically a component of a hook, right? Or actually probably a better way of something.
[00:11:45] It's composability is really what it actually lends to this equation, right? So now I can have several hooks and I can compose them together to get interesting and new derivative functionality. Now I've heard people say that they'll never call like use state directly in a function, they always compose that into like a custom hook.
[00:12:07] So what you would do if you were up that mindset, which again, I am not. But if I were, I would take all of these things and basically make this like a search params state custom hook that would handle all of this and then at the top of this I would have one hook that basically would be like, constant use params search like hook there, right?
[00:12:29] And it would encapsulate all of that in one hook. Some people like that cuz I think it makes their components look cleaner. I think it makes it look harder to read and I'm very against harder to read things. I think it's okay for things to be long as long as they're okay to read.