All language subtitles for 072 Custom Hooks - useFetch.en_US

Nicely done.

Next, we have custom hooks and essentially custom hooks allow us to reduce the functionality.

So let me be clear.

We're not talking about reusing HDMI elements where you can do that with components.

We are talking about the functionality, whether that is fetching data, saving to local storage and

that sort of thing.

Also, before we begin, let me just mention that I purposely added only one example of custom hooks,

since you can easily find other custom hooks examples.

So the code that community has created for three years, but just type in custom hooks in your favorite

search engine.

The point of this example is to make sure you understand the purpose and the setup of the custom hooks.

So after that, you can either create your own custom hooks or with ease, use someone else's custom

hooks in your own apps.

With that said, let's start by importing the module and the module we're looking for is module number

nine by the name of custom.

Again, we have final set of folder and of course, in the address we're going to be looking for this

setup folder.

So we go here with import on line the setup and we are looking in the editorial and then more specifically,

folder number nine, custom hooks and of course, of the setup.

Now, in this case, there is a file name and we're looking for, for example.

So on this case, I'll remove the heading to online.

Of course, I would want to showcase the setup.

So once we load, now we have loading DataDot and then we have the data.

So what is happening over here?

Well, if we navigate to file the example, within hours of that, we'll have somewhat standard set

up to fetch data.

So we have your state, we have use usufruct fact, we have lowering that variable.

We have set loading, of course, by default loading stro, then we have some kind of state variable

that is called product initially areas, and then we have the function that fetches something.

So in this case, this is fetching from my own API and we use this in my Joske, of course, where we

have the product.

Now if you want, you can of course, navigate a bigger screen.

And then copy and paste, it is an array of products.

And don't worry, we'll use it a little bit later in tutorial, so you'll see what this is all about,

but essentially it's just a bunch of product with some price, with some name and image and all that.

So we're pitching that.

I hit the URL.

Of course, I get the response.

I run the JSON and then I set two state values and I have some products and then I have set loading

defaults.

And of course I'm running this with my usufruct and I have the empty array means that it runs by default

the moment we run the app, and that's it.

And then of course, I'm just so long along the product.

Not the point of this.

Is not to tell you that there's something wrong with the setup.

The point is to showcase what if I would want to reuse this functionality because there's no way for

me to reuse it.

I mean, I can use this with this particular URL, but if I have a different Cambourne, that also needs

to fetch something.

Again, I'm just reinventing the wheel now before we do anything in our custom HOLC.

Let me just showcase that if you can, so long, of course, you'll be able to see the products again.

The point is not to set up anything as far as the component.

We simply have the loading.

So we check whether the state's value for the loading is true.

If it is, then we showcase loading that at that.

And then once we're done with loading, we just displayed it there.

And what you should see in a console are these 12 products.

So, again, this is not our main concern.

If we have the products, that just means that our fetch was successful.

Our point is somehow to come up with functionality that we can reuse.

So if I don't have another component.

That also would want to fetch data.

I don't need to duplicate these lines of code, by the way, in this case, we don't have the error.

Keep in mind, normally you would have the error as well.

And of course, once we set up our custom hook, we can definitely add error as well.

And I already said that will be creating a new custom hook.

So you can probably already guess that in the second file that is in the folder called Use Fetch, this

is exactly what we're going to do.

So if I navigate there, I can see that I have the react.

I have used state and I have usufruct.

Not only honestly, we actually don't need the react.

We can just use use state and use effect.

And then I have this function, I have this used fetch function.

So here's what we could do.

First, I could save it.

And then where we see, for example, so our previous component, I couldn't just cut out the lines,

starting with loading all the way to where we have the effect.

So let's just grab everything.

So starting with line five all the way to line seventeen and just cut it out and then navigate to use

fetch and copy and paste.

OK, that's an awesome start.

So we still have our loading stage value, we still have the product and of course we still have the

function.

Now if you want, you can rename this something more generic, for example, data.

But since we will use them later, so we will use this custom of later, but will still be fetching

products, I won't do that.

Just keep in mind that you are not limited to calling this product.

It's statewide.

So you can call it whatever you want.

So my whole idea is that I would still want to perform this functionality.

Correct.

But I'm not doing this anymore in the component.

So I have my custom hook.

And of course, in order for this to work, I would need to return something from this customer.

And what I would want to return is an object.

And then in the object, I am going to place my two state powers.

One is going to be loading and then the second one is going to be product.

Since I also would want to make this reusable, I will set it up where I'll pass in the euro into the

function.

So I way when I call this use fetch later in different components, in different topics, I can simply

pass in the New York URL and I'll still get back my loading, meaning whether that is true or false

and also the data that I'm getting back.

So I'm going to say here that I'll be looking for one argument, the oral argument.

And then also I would want to call this usufruct when the URL changes.

So it's going to run one time when essentially we invoke the function and also if we change the argument

for the use for custom.

OK, so I'll save this beautiful.

And now, of course, I need to navigate back to, for example, and I need to import.

And as you can see in line number two, this is exactly what we're doing.

So we import the use for each customer.

And of course, it's coming from the file, the use, which, by the way, I just notice that my name

is somewhat off, should be use French.

So, of course, in your example, it's already going to have a proper name.

But in my case, I would need to change this where this is used for and also my import should be used.

Now, once we're done, of course, now I want to invoke my custom hook.

And this is the case where notice we are returning a object over here.

So normally when we use state since we're returning.

All right.

We did a oray destruction.

So this is going to be the case where now, of course, I would want to structure the object because

that is what I'm getting back from my custom clock.

So here I'm going to seconds and then loading.

So that is the first thing that I'm looking for.

And the second one is the product.

Correct.

And then I'm going to set this equal to use Frege.

So not use the fact not use state, but my own custom hook by the name of use and Lanfranchi.

And of course I need to pass in that YORO.

And of course we already have the URL in the component.

Correct, because we have the variable by the name of euro and that points back to my own API.

And now the cool thing that you'll notice that once we run, our functionality didn't break.

So now we can still check the loading and we can still get the product for a navigator.

Check it out once I refresh.

I definitely can see that I'm still fetching my product.

However, now my functionality is tucked away in a separate place.

Now my functionality is tucked away in a custom hook.

So if I would want to use it and which is exactly what we'll do in the later topics, just so I can

emphasize the point of using the custom hook every time I would want to fetch data instead of using

use state and setting up the loading, setting up some kind of array and that type of thing, I will

just call use fetch Pastorale and from the function I'll get back to things the loading as well as the

product.

So like I said, if you would want to introduce error as well.

Definitely be my guest, but in my case, we're just going to stick with loading and product.

Now, the one thing that I would want to mention that sense of this is a custom hook.

It has to have this use.

So, for example, if you'll just say fetch, so you're exporting Futch, you'll see a big fat error,

even if I change the correct import because we're not allowed to use hooks inside the regular function.

So either the function needs to be a component or it needs to be a custom hook.

That is something you need to keep in mind.

So that's why we need to make sure that when we're creating our own custom hooks, we need to use this

use.

So in this case, I call this use fetch to.

Now, of course, I just need to make sure that my import is correct.

So say here, use fetch.

And of course, everything is going to work.