All language subtitles for 010 Using The Custom Hook In More Components_en

[Maximilian Schwarzm�ller] So here in new task,

I also want to use my custom hook.

And therefore, first of all,

we should import use-http from hooks,

use-http.

Then we can call useHttp

and we no longer need to pass in any parameters

because of the refactoring work we did in the last lecture.

Now we still get back an object though,

which we can de-structure where we get access

to isLoading, to the error, and to send request.

And here I will rename send request to sendTaskRequest,

but that of course is up to you.

We can get rid of the two states here now

and of the useState import therefore,

because we're using our custom hook for this now.

Now in the enterTaskHandler,

we, in the end one, wanna call sendTaskRequest now.

We wanna call that here because we wanna send

that request whenever enterTaskHandler is triggered

which happens when that form was submitted in the end.

Thereafter, we will soon delete all that code,

but before we do that, we need to ensure

that we pass the proper configuration

and data handling function to send request.

And for this, let's start with the conflict object.

I pass in a new object where the URL is set to this URL.

And here now, since I want to set a POST request,

I'll also set the method to POST

and I'll set the headers here to the headers object

which I got down there

like this.

And I will, of course, also add a body.

However, not as JSON

because we're doing that JSON transformation

inside of the custom hook here.

But instead I will therefore just send in this object here

which I previously changed to JSON

in the new task component.

So that's my request conflict object now.

The second argument is a function

which takes the response data and does something with it.

And there's something I wanna do with it

is in the end, this down here.

I wanna extract the generated ID

which Firebase gives me automatically.

I wanna create a task object, which incorporates that ID.

And I then when I call props on add task.

So we could either create this function on the fly here

or we create it in advance

like this here.

The createTask function, let's say,

and here I get my

data,

my task data as an argument.

And then we grab this logic from down there.

This logic,

copy that and add this here in createTask.

And data is now renamed to top taskData like this.

And we now use createTask to pass this

as a second argument

here to

sendTaskRequest.

We don't need to work with useCallback

or anything like this here,

because we are only calling sendTaskRequest

in the enterTaskHandler,

not inside of useEffect or anything like that.

Therefore here, we won't have the problem

of an infinite loop,

because this request will not be sent whenever

the component is re-evaluated,

but only when this function runs

which happens when the form is submitted.

That was different in the app component.

There we sent the request instead of useEffect.

And therefore we had the danger

of sending the request too often.

In new task, we should be fine now.

And therefore, we can grab this old code here

and get rid of all of that.

So that instead of the enterTaskHandler,

I'm now only calling sendTaskRequest

and we're configuring it like this.

Now in my createTask function,

I'm missing the task text though.

That's a problem.

I'm missing the text

which was, well, passed from the form to that HTTP request.

We do have that text available here

inside of enterTaskHandler.

To make it available inside of this createTask function,

which we pass to sendTaskRequest,

we got two main options.

We could either grab this function and define it here,

inside of enterTaskHandler to have a nested function

inside of a nested function

inside of the component function,

and that would work due to how JavaScript scoping works.

We now do have access to the enter task text.

Or alternatively,

we leave it like this to avoid this deep nesting.

And we instead expect to get the task text

as an argument here, as a parameter in createTask text.

And therefore we want two parameters here

when actually our custom hook,

which is calling createTask

in the end, only passes in one parameter.

It only passes the data.

To work around that, we could use

the bind method in JavaScript.

We could call bind here on createTask

when we pass it to sendTaskRequest

and the bind method allows us to pre-configure a function.

It does not execute the function right away.

Instead it's a default JavaScript method,

which you can use on any function object

to pre-configure that function.

The first argument you pass to bind then allows you

to set the this keyword in the to-be-executed function,

which does not matter to us here.

Hence, we can set this to null.

But the second argument you pass to bind

will then be the first argument received

by that to-be-called function.

So if you wanna pass in the task text here,

we can set this to task text here

because that will then refer to the task text.

we're getting from the form submission.

Now the other argument task data will still be received here

because this is our pre-configuration.

Any other arguments which might be passed by the place

where the function is then actually being called

which happens in useHttp,

will then simply be appended to the end

of the parameter list.

So the data which we pass here

as the only argument to apply data in the custom hook

will be appended as a second argument

on createTask because of us calling bind here.

So when it's being called, this receives

all the data which is needed.

And this is all just regular JavaScript.

This has nothing to do with React

or with hooks or anything like that.

That's just regular JavaScript.

You can learn more about the bind method

and about pre-configuring functions with a resource

which you'll find attached to this lecture.

And then for now, if I save this,

we can reload and still load all tasks.

But if I now send another task,

if I click add task, we see sending here,

and then we see Does this work?

So if I reload, it's all still there

and we can also see all that data on Firebase.

Now, if I open the console, I also got no errors there.

And if we go to the network tab,

we also see that indeed,

we are

not sending an infinite amount

of requests or anything like that.

Instead, if I clear this and I test this,

we are in the end, just sending one request.

It looks like two, but this is just a side request

which has sent along the way

and therefore, this is all looking good.

And that is how we can build a custom hook

for sending HTTP requests.

It definitely had its tricky parts,

but with it,

we now have this custom hook which outsources

or which holds a lot of the duplicate logic,

especially all that stateful logic.

And we can use it in different components

to send different kinds of requests,

and do different kinds of things with the response data,

and still utilize this shared loading

and error state and this shared logic.