Hooks Pattern Solution

[00:00:00]
>> So the first thing we're going to do is I would like to create a new folder just called Hooks. As in here, I'm going to create a new file called UseListings.tsx. Now I'm just going to move the data that we have here that stateful data over to this Hook.

[00:00:17]
So I can do export defaults function used listings. So here I'm just going to import react real quick and then here I'm just going to return actually just return a data. Could have called it listings but I'll just call it data. So now we can use this Hook throughout our application.

[00:00:40]
So let's see instead of here, Let's see, where am I getting prompts? Did I just have it or not? You're here, so instead I'm going to do like presentational. Or actually I'll just use it from Duterte listings instead. There are just multiple ways to do it but I'm just gonna do it here for a reason naturally I'll do it here sorry about that and for us listings from Hooks use listings hopefully I imported from the right folder here.

[00:01:15]
Okay. Now for example if you say use listings is used listings we can pass the props here again so listings live listings, listings, but this time cuz now it's still using that like container. I don't want that. I just want to have this one so I'm going to import listings from the presentational one.

[00:01:38]
Listings from presentational, let's use listings, because I'm passing listings here and it's data Let's see, where am I using listings and other find?
>> Give for deep construct the object return from listings?
>> Let's see.
>> An app the app.
>> Let's see what's going on here. Well, it says it's not defined.

[00:02:12]
So normally that's like whenever you have a variable on line 14 that's always a fun one.
>> Can you need to wait for it to come back.
>> Here, it returns the data where in the app component, you are taking assets.
>> So we have to make sure this makes sense.

[00:02:31]
So in here, we again have to make sure that there are listings available because normally, we are like, if there is no data, then render nothing, if there is data then, render something. That's right, I forgot about that. So return no.
>> So then yeah, I think we have to return to call it listings you'd have to say listings dot listings.

[00:02:49]
>> Gotcha. Okay. All right. Okay. Sorry, [LAUGH] it is late or at least late. Yes, I had to destructure it sorry about that. Well, I mean, I could either say like return data or just returned data listings and then yeah you get it, you get it just the structuring thing.

[00:03:03]
Yeah. So this is how you could use a hook we can either use it here in app or we could use the directly in the listings component here and the presentational components. Which in most cases because like here an app up probably have way more components. So you probably don't wanna use the hook up here because every time listing changes every time we re-render the page all the components will get re rendered.

[00:03:22]
So we could have done like listings, maybe useless things like in here. And then again we have to say like if no listings then return no or that nice little loading spinner that we had before. But then here we can actually just remove this we don't need this anymore then we just need to import the hook.

[00:03:45]
And listings here so import us listings from hooks us listings we again have to destructure it I guess, Listings.Listings.map. Okay, there you go. So, in this case, you can see that we can easily create modularized components that all use that listings data. Now we could use this hook anywhere, our code that maybe also needs this listings data.

[00:04:11]
Yeah, this is just a nice way to easily, I don't know, have stateful logic, in this case of fetch. And the nice thing also about Hooks is just for this specific example, when I'm fetching data, I usually like to use something called SWR, I'm wondering if I can, actually already imported it.

[00:04:29]
This is a really nice like fetching library that also use Hooks. So I can use import like use SWR from SWR, and for example, I could do like data error loading, or actually I think it's just data error right now. They just updated their API is used SWR.

[00:04:44]
And then this and then you just need to add some fetcher logic with a certain fetcher. I always forget that, like here goes to fetcher. So the next thing that we see here is that the community can create so many Hooks that and again, so this is actually using the same data now.

[00:05:09]
Not as SWR is actually also adding some fetching logic like stale while revalidate it automatically caches the response. So instead of like calling it on every render, we just get it from cash first, if it hasn't been invalidated yet all that stuff. But I just wanted to show you this, because, I think there's even the website called like React Hooks or something.

[00:05:29]
Okay, I should have looked this up first, I don't know it's a website. And you just have like this library of so many Hooks that like the community used and you can use it for so many different use cases so instead of thinking like how can I add the stateful logic to my component in a performant way you could just import them from like NPM in your node modules.

[00:05:46]
So it makes stuff a lot easier and like it's kind of like a plug in, plug and play architecture almost. Yeah, anyway that was it on Hooks. Now to, are there any questions so far on Hooks are good? Perfect.
>> Person just said they renamed Hooks. Rename the Hook to use data

[00:06:07]
>> Use data instead of, instead of what?
>> Use listings.
>> Got you, okay. Yeah, you can use any name as long as it starts with use. I mean, yeah. If my state was called data like at here, I mean, I could have said like listings, set listings, return listings I'd like to use us listings if had like data, so data return data, so use data.

[00:06:31]
I like to kind of keep that in sync with the state, I'm setting what's the name of the state? What's the date I'm returning? But, yeah, that's all up to you.
>> I was just thinking about the example we did for the higher order components with the loader.

[00:06:44]
>> Yeah.
>> And I'm just thinking about like, how that would convert to Hooks or like how you would combine it with what we just did.
>> Yeah.
>> With use listings.
>> I mean one thing that we could do here is I don't know if I have that little component but what we could do is maybe have another state here called like const loading, set loading or something.

[00:07:06]
And then we can say like if loading, loading I don't have that state right now so to throw an error but turn like we're loading spinner or something.
>> So I'm gonna just link to use Hooks.com.
>> Yeah, use Hooks.com, exactly I knew. Yeah, so this is the one I use so many times for like the smaller things like use toggle.

[00:07:24]
You can see all those, I like how they used Hooks in this case. There's also some, some for like NPM libraries or note modules that you can just import. But these are really good examples of how you can use Hooks or if you ever just need, I don't know anything that's listed here.

[00:07:42]
Let's see, like use off the use event listener and this one's really useful. I usually also use like use local storage and all that stuff. Use why did you update? Yeah, so you're gonna be super creative with Hooks, which is really fun.