All language subtitles for 007 Building a Custom Http Hook_en

So, were are you successful?

Let's try this together now.

And for this in the source folder

next to the components folder, I will add a hooks folder.

This is just a convention, not something you have to do.

You can name it differently,

but I will follow this common convention

and then add a new file in there

which I will name use-http.js.

Again, this name is all is up to you

but since I will create a HTTP related custom hook in there,

I think this is a fitting name.

Now the hook function itself, I will call that useHttp

following this must use pattern

where your custom hook functions

must start with the word use

and I will export this custom hook here,

because of course I want to be able to use it

in other files.

Now, regarding the content of this function,

as I said, there will be more than one solution

and definitely feel free to share your alternatives

in the Q and A section if you want to.

I'm just showing you one possible approach

which I came up with.

And for that, let's have a look at the general logic

we wanna outsource.

In the end, it is the loading and the error state,

but then also the entire code where we send the request,

where we evaluate the response.

All of that should be outsourced.

Also this error handling here

where we then set the error state

that all should be part of the custom hook.

And therefore, I think it is reasonable

to go to the app component

and grab this entire fetch tasks function

and grab these states here

and in the end copy that into useHttp

into this custom hook function.

Now, here we can get rid of this tasks stayed here

because that's a bit too specific.

That's specific to the app component,

that's not something I would wanna put

in the useHttp custom hook itself

because this hook should not just be usable with tasks

but with any kind of data,

but I will definitely keep deloading

and error state in there.

Now, of course, to use useState in this file

as always we should import useState from react

and I will rename this function here

from fetchTasks to sendRequest

so that this has a more generic name

because we will also tweak the logic in there

to be more generic.

This custom hook

should not just be dealing with fetching data,

it should also not just be dealing

with fetching tasks specifically

because otherwise this hook would not be very reusable

it would be basically limited to one operation,

fetching tasks and that's not what I want here.

Instead, this hook should be able

to send any kind of requests to any kind of URL

and to do any kind of data transformation

but it should always manage the same state loading and error

and execute the same steps in the same order.

That's the actual reuse that we want here.

And to make that hook that flexible,

we, of course also will need some parameters here.

We will need some parameters to configure this hook.

And what should be configurable here?

Well, I would say the request logic

that needs to be configurable,

the URL, but also the methods, the body, the headers,

this all needs to be flexible.

So I do expect a requestConfig parameter here

and to disintern then should be an object let's say

which contains the URL

and any kind of other configuration that might be needed.

Now, therefore here, I will get rid of that URL

of the hard-coded string here in useHttp

and instead refer to requestConfig.url.

Since we will be calling that hook,

we then have to make sure that we pass in an object

which has a URL property, which holds the URL.

This hook should also be usable for post requests.

So therefore fetch should take a second argument here

and then there, I pass my object

where the method should be set to requestConfig.method,

where the headers should be set to requestConfig.headers

and where the body should be set

to JSON.stringify requestConfig.body.

So that we perform the JSON transformation

inside of the hook,

but the body itself has passed and from outside.

And again, this is really just my approach here.

You could make this more reusable,

you could expect different parameters, that's all up to you.

This is just one possible solution.

Now this request and how this request is being sent

is a bit more configurable.

Of course, I wanna then check the response like this

and I wanna transform the response like this,

I am assuming here that we're always working with JSON data,

so I will not make this hoax super generic

to work with any kind of data.

I will limit it to JSON data

because everything else would be far

beyond the scope of this course

and therefore I will keep these steps here

but the transformation and so on

and what we do with the data in the end

that of course is then again, highly specific

and not something that should be of this hook.

Instead, I would imagine that we get the data here

and then maybe we execute a function

which we get from the components that uses the hook

and pass that data to that function

so that the concrete transformation steps

can be defined in the component

where this hook is being used.

So therefore here instead of executing this code,

I do expect to get another parameter here

and that's the, let's say applyData function.

The name is up to you.

And then here, once we got the data, we simply call

applyData and pass the data to it.

So that in the hook we just hand the data off

to this applyData function

and the function itself and what happens in there

is provided by the component that uses the custom hook.

So that we have that reusability

and that reuse logic in the hook,

but the specific steps that should be taken with the data

in the components that uses the hook.

This is a split which makes sense to me.

Now, with that, we got to the loading and the errorState

and to sendRequest function in the custom hook,

but ultimately these are all things

which we will need in the components that uses the hook.

That component should to then have access

to the loading and the errorState

and it should have access to the send request function

so that it's the component which can trigger a send request.

Therefore at the end of the custom hook,

not at the end of sendRequest,

but at the end of the custom hook function,

I wanna return something to the component

where the custom hook is used.

And I mentioned before in this module

that your custom hooks of course can return anything,

numbers, strings, arrays, objects,

and here I will return an object.

And there I will add is loading property

which points at the isLoading state constant.

So this is the property name on the left side,

this is the value on the right side,

and that is loading state

which is managed for the component by this custom hook.

And I will also return an object with an error property,

which holds the errorState

just as the loading state and then the send request property

which points at sendRequest.

So add this function here.

And since I'm always using the same property names

as variable names on the right side,

we can also use a modern JavaScript shortcut here

where we write this like that that's the same result

or that will give us the same result

as to code I had a couple of seconds ago,

it's just a bit shorter

and it will be transformed to that longer syntax

under the hood by JavaScript.

So that's a shorthand we can use in modern JavaScript.

And with that, we got our custom hook

at least the first version of it.

Now let's see how we could use this custom hook.