Custom Hooks Q&A

[00:00:00]
>> Speaker 2: So when do you want to use a custom hook instead of just creating another component?
>> Brian Holt: Yeah, it's a good question. My first answer to your question is, there are divided opinions on the matter, so there's not a right answer here.
>> Speaker 2: Okay.
>> Brian Holt: The extreme side of one of it is, there are some people that I know that will say, never put an effect in your component, ever period, end of sentence, and that any effect should always go on a custom hook.

[00:00:35]
>> Brian Holt: That's one side of it. There's an amount of validity to it, because then the nice thing about custom hooks is they become easy to test in isolation, right? As opposed to like a part of a great component, you can test just that the hook is working. That can be nice, right?

[00:00:50]
>> Brian Holt: The other side of people's, never write any custom hooks, always put it in the component. I think there's less validity to that. I'm probably mostly to the side of most effects should probably end up in custom hooks if they're shared at all or need to be tested.

[00:01:11]
Which one usually one of those is true, right?
>> Brian Holt: Yeah. So the nice thing about like this hook and during the testing section, we will actually write tests for this hook, so you'll actually see how to test hooks. We can test that it's calling the API, it's using the right parameters, it does the right thing when there's nothing there, it does the right thing when there is something there.

[00:01:36]
It becomes very, straightforward and very easy to test. The test.
>> Brian Holt: And then, now, if I had like a, let's say I was writing like the admin dashboard for this, and I needed to fetch the pizza of the day so I could show, like, stats for how many pizzas of the days that we were able to push.

[00:01:58]
I could just use this hook all over again, right? Yeah, and this just immediately gives it back to me. I don't have to rewrite the logic again.
>> Brian Holt: So hopefully that kind of bounds the box of where your opinion should lie, right? Somewhere in there, in this specific case where we only are using pizza the day, in this very one place.

[00:02:20]
I'm gonna put in the component 'cause I just, this is not an interesting enough custom hook for me to try and encapsulate it or test it to all hell and back right?
>> Brian Holt: I'm sure you've all heard of dry code, right? Do not repeat yourself. I'm a wet code person.

[00:02:38]
[LAUGH] Write everything thrice. [LAUGH] The third time I go to write, like copy a piece of logic, I'm like, okay, maybe I should put this into a module and reuse it, right? First time, absolutely not. Second time might be a fluke. Third time it probably is like app code that I need to test.

[00:02:56]
>> Brian Holt: There's my methodology, but up to you.
>> Speaker 3: Let's say that the network call takes a long time to respond. Will this cause a delay in the rendering from the custom hook, or will it return undefined first and then, when it has a value, return the updated value?

[00:03:13]
>> Brian Holt: Good question? Let's walk through, it
>> Brian Holt: Pizza the day. After we're done with this section. I'm never saying pizza day ever again. [LAUGH] For the record, until we get to the testing section and then I'm right back on the pony. Okay, so
>> Brian Holt: I have this function here which calls this.

[00:03:31]
This is not a wait or anything like that. This is just directly calling the function.
>> Brian Holt: So this is not awaiting this is sync, so this is gonna call this, it's gonna go into here, and it's gonna set this to be null, right? It's then going to schedule an effect to be run.

[00:03:52]
Keep in mind, renders finish first before their effects happen. So your first render is always gonna be done by the time the effect is actually run. So this effect, this function here, is scheduled to run, but does not run yet. What gets returned on the first render?
>> Speaker 3: Null.

[00:04:12]
>> Brian Holt: Null, that's the default value. So this repeats the data for the first render before this effect. Effect has been run, this return here is going to be null, which means here is null. So what happens when we hit this block with null?
>> Brian Holt: It's going to just return loading.

[00:04:35]
It returns, right? This is an early return pattern, right? And so none of this gets run.
>> Brian Holt: It just returns this in short circuits here. Now the effect runs, we get back from the API, the set gets called, this gets rendered again. This is now actually an object that came back from the API.

[00:04:55]
Is it null? No. So all of this is gonna get rendered.
>> Brian Holt: So, I mean, let's just super draw this out into being agonizing. Wait for 10 seconds.
>> Brian Holt: All right, so yeah, I got it. Copilot.
>> Brian Holt: See this very [LAUGH] small loading down here? I am very talented with loading spinners, as you can see,
>> Brian Holt: But nothing is being rendered down there, and then eventually it shows up.

[00:05:29]
Did you use a lowercase u in the file name of the custom hook because it's a naming convention? Like, use pizza the day here.
>> Brian Holt: Yeah, let's talk about the name, kind of in general. It's a lowercase u because it's not a component, right? What is this returning?

[00:05:48]
>> Brian Holt: This returns a hook which is not renderable by and of itself in react. It has, it's part of a composable part of
>> Brian Holt: Like a, what a component can use to get data. So maybe state it differently. Only components have the convention of being named in uppercase.

[00:06:08]
And just to be super clear, the file names really don't matter. You will see people call this like pizza.jsx like this.
>> Brian Holt: Because, like, Linux file systems are insensitive and most of our stuff is always running on Linux, right? So you can run into issues, actually, by uppercasing things.

[00:06:31]
That did happen to me at Netflix one time.
>> Brian Holt: That usually doesn't matter. You usually don't have to care. Usually the convention of putting uppercase here is useful for me at a glance to say, like, this is a component, and it exports a component.
>> Brian Holt: So another way of stating this is, not a component.

[00:06:53]
And anything that's not a component, I always just lowercase name. It's really, only components that get the uppercase.
>> Brian Holt: And then we did talk about earlier that it is important for the name of the thing. So looking at order here that pizza does need to be uppercase P for that.

[00:07:15]
Now the next thing to say is. Use.
>> Brian Holt: Hooks have use in front of it. That is a convention. It's not necessarily gonna break react, but if you use, use in your name, then all of the react linting will catch errors that you would do with potentially with a hook, right?

[00:07:36]
So, we haven't put it in here. In fact, I don't even know if I do it in here.
>> Brian Holt: If we go into,
>> Brian Holt: Yeah, pizza the day here, and if I say, something like, if true, or something like that, is this gonna catch this?
>> Brian Holt: It does look at that.

[00:07:58]
Nope. Nevermind. It doesn't if I had the react hooks es lint rules in here, it would catch this because even though Pizza of the Day is not its own type of hook, it knows, it's like this begins with use. And therefore I know that this cannot be inside of a, an if statement
>> Brian Holt: Beyond that, it's just very easy to see at a glance.

[00:08:23]
Use pizza of the day. Very obvious that this is a custom hook, right?
>> Brian Holt: So while you don't have to, as your future co worker, you do have to.