Hooks Pattern

[00:00:00]
>> Well, we've already had three of them, but the hooks better is mightiest of them all. Because this one can actually replace the first three we're just covered in most cases not in all cases. Now, if you've been working with react for at least the past year, I'm sure you've used hooks, maybe the built in like use state, use effect, use reducer, all these things.

[00:00:23]
But that's not the only thing we can do with hooks, because we can actually also easily create our own custom hooks. For example, this is one example if we wanna use hover hook, we can just create that. So whenever like user is hovering that specific card, we can change the state and maybe I don't know log something when they're hovering or show something else I don't know.

[00:00:42]
We can do anything with hooks so they give us like all the possibilities. Yeah, so one thing that we could do here or I guess that we used to do is to just. I'm just going to pause this real quick there is to have this all within this listings component, which works like this is completely fine.

[00:01:00]
But if we wanna have more components that also uses hovering data, it's just nicer to split this up to create our own custom hooks, so like more components can use this logic. So right now, if we can just use a create a use hover hook, and then use this enlisting, but we can also use it anywhere else in any other components.

[00:01:22]
I'm actually showing that here, so if we have an image or a button that also needs this hovering implementation, we can just use this use hover hook again. Because one thing to keep in mind is that it's not like a shared state, their way of adding state to any component.

[00:01:40]
But it's not like they're sharing state among the components that's using that hook. We'll actually talk about that later with the provider pattern and the compound pattern, because that is a way to share data through hooks. But a hook itself is not a way to like share data, it's just a way to add a stateful logic to a components, let's see.

[00:02:00]
Yeah, this is just the implementation that we kind of just covered I believe. Yeah, well, one thing of course to keep in mind is that whenever you're creating a hook yourself, you have to use you use, because these are like the rules of hooks. So react knows that like okay, it starts with use, this is a hook, I have to treat it in kind of a different way.

[00:02:18]
Because there are certain rules that we need to use when using hooks and react just with the way that the react engine works and stuff like that. Now, there are many benefits to using hooks, it definitely simplifies components a lot. Because we can remove that stateful logic from these components, which usually cause components to be way more complex than they should be or need to be.

[00:02:45]
And really just move that all into their own hook, and we can even reuse the stateful logic which was kind of difficult to do before. I mean, we saw that with like the container presentational pattern where we could wrap multiple components in like a container components. But now, we don't have to use it anymore, we'll keep we can just create a hook for that stateful logic.

[00:03:06]
I'm showing that here, so this is using a class component which maybe you're still using, I mainly use functional components. But like we had this container component here that fetched those listings, added that state or pass the state back down to the presentational component in order to render it.

[00:03:25]
With hooks, we can just simplify that a lot, we can just create a hook, maybe called like use listings that contains all that stateful data. And then that listings component can use that hook like useless things to eventually render that component. So kind of the whole, the vibe to my container presentational doesn't necessarily exist anymore, we don't really have a container, we just have hooks.

[00:03:45]
And since it's so easy to use that in a functional components, any functional component can really be a presentational component. So that is a great way to write weight cleaner code, share the stateful logic across multiple components. But yeah, like I said before, the rules of hooks is just something that you need to kind of learn, and this is also in their documentation.

[00:04:06]
And actually it will throw an error if you're using hooks kind of out of order, like you cannot render a component and then use a hook, it needs to all be like on the top of the component, stuff like that. But honestly, once you know that it's pretty fair to use, it's nice, it's maybe something to get used to if you haven't used it before, but after that it's pretty nice.

[00:04:28]
Okay, so here, we actually use the solution that we had before with the container presentational pattern. And like I said before, hooks can definitely replace that whole structure. So for this challenge, I would like you to refactor this example that's using this container presentational pattern, and use a hook for that instead.

[00:04:46]
So if you need to get any inspiration, I guess it's pretty similar to what we have here. So yeah, I just create a use listings hook or name it anything you want as long as it starts with use. [LAUGH]
>> Question, so what is the difference between the use custom hook versus creating a reusable component?

[00:05:10]
>> Well, it just simplifies like I think if you create a reusable component, of course, you we can also like add state to that. Like we did with it, like a container component could, I guess be like a reusable component that contains states. It's just harder to use that across an application and not end up with like for nesting issues or like prop drilling.

[00:05:31]
Like maybe you need to have many components that need props, you need to wrap that around every time if that makes sense. So hook makes is really easy to get data in even the smallest component which we'll also cover and like the provider pattern, which kind of shows or talks about like shared states.

[00:05:48]
But like if you're just using maybe a single state like maybe in this case listings, it would have been fine to use like ng container components. But in some cases, maybe they use hover, it would really make sense to wrap every component that needs hover logic within another component.

[00:06:05]
Like readability, scalability, all those things, but it works cuz like with most things it works. So it's not like don't do that, but I think once you've used a hook for that, yeah, you can see how much easier it is to use and more readable.