All language subtitles for 024 Getting Started with Custom Hooks_en

So we're almost done with this module, but one very cool feature is missing, and that is custom hooks.

You can build your own hooks.

You're not restricted to the built in ones.

So let's do that.

I'll add a new hooks folder where I want to store my hooks, and there I'll add one custom hook and

that's my HTP hook because I have that HTP functionality in ingredients.

Shabaz, for example, where I send HTP requests, I do this multiple times and the pattern always is

the same dispatch send at the beginning dispatch response once the response is their dispatch error.

If we have an error, it's always the same pattern.

So we have logic that we want to share across components.

But and that's the important thing.

Logic, which also influences the state of the components where we want to use that logic so we can't

use a normal function because of course, we could build our normal send request function, which simply

has all that send request logic in there.

But from in a normal function, we couldn't dispatch events which then changed the state in a component

that calls the function that something only Hooke's can do.

And that's why we build our own hook now.

So in the end, if you just fall into Hooke's folder, I want to build my own hook.

And the first very important thing there is your own hooks should always be named.

Use something in my case here, use HTP or use fetch or whatever you want to name it.

But use something written like this and I'll go with use htp then.

Your hook is just a function.

It's a normal JavaScript function.

Just treat it in a special way by react.

That's the core thing.

So now we have this and I will export use HTP here, so that's a very simple hook which doesn't do anything,

but it's a start.

The cool thing is in this hook, you can now use stateful features.

You can use use, stage, use of fact, use reducer, anything.

You can use any hook in there.

And any component that uses your own hook will then run this hook as if you had to code written in here

directly in the component.

So it's not like you have one functio shared by multiple components and then they run the same code

with the same data.

No, each functional component gets its own snapshot of this hook, so to say.

So that's a cool thing.

You can have stateful logic in there, but the stateful logic will then be different for each component

where you use that hook so that you can share the logic, not the data.

That's the idea behind Hooke's.

So what do we want to have in this custom hook?

Well, I'd say it makes sense to move our HTP, reduce her into there.

So let's go to ingredients, Jess and fetched this HTP.

Where do you, sir, cut it from there and let me close the viewing folder, move it here into pieces

and I'll define it outside of the hook because again, just need to rerun with every Rehren cycle and

your hook will rerun with every Virender cycle.

That's important.

Your hook will get called whenever the component where you're using your hook gets executed.

And then you can use techniques in your hook, of course, to make sure that nothing happens to the

state or that something does happen depending on what you want.

But in general, it will get re executed.

I don't want to recreate the reduce all of the time, so I'll move that out of there just as we did

it for the component.

Now, of course, since the producer function was removed, all the remove the use, reduce recall from

ingredients, jars and move it into the pictures.

Now inside of my custom, look here now to use reuse producer, we have to import it.

So let's import use reducer from react.

We don't need to import react itself here because we're not building a react component here.

We just want to use some features from the react package in this case, use producer.

So here I don't have my state and dispatch htp which right now isn't that useful, but we'll get there.

Now, the request itself, let's go to Ingredients Jass and let's grab one of these requests, let's

grab the one where we handle the error here and remove ingredient, I'll take this entire block with

all the then and catch blocks thereafter created and added to the Peach's.

This would now execute this HTP request whenever the component that uses use HGP reruns.

That's certainly not what we want here.

We don't want to run this all the time instead of trade a new function here in my use.

HTP Hook.

Which will name send request name is up to you, though.

And that is a function which should actually send the request so that it's not always getting sent when

U.S. troops called, but only when send request is called, which right now never happens.

But we'll do that soon.

Now, send request, of course, needs to be a bit more flexible because we don't always want to send

the request to this earlier.

So there you are, l should probably something we get from outside the same for the method and the body

of the request.

So here I'll remove the URL and use the argument instead.

And for method, I'll use method and we might have a body, which is the body we're getting.

And because it doesn't hurt here, I'll always add the header content type application JSON for a get

request.

We don't need it but won't hurt.

And for some requests like post requests, we need that so will always appended.

Now we have a flexible if request a fetch call, which depends on data we get from outside, which will

go ahead and then dispatch our response and at the beginning all the dispatch action of type send.

So that's the state fulness I was talking about.

We're interacting with our producer here because this custom hook will in the end be used in a component

which then will automatically get all that state, so to say, or where this state will be connected

to by react automatically.

So here we send here we get the response.

Now, of course, what we do with the response, however, in this case, that we delete the ingredient

that doesn't belong into this hook.

That's something the component that uses our hook needs to do.

The hook should be just caring about the P request, not about what we do with the response.

So we'll have to see how we manage debt for the error, I dispatch this error request, but how can

we now get the response data back to.

Well, the component that uses our own request.

Well, we can add something new to our HTP state here.

Let's start with the initial state.

Besides loading an error, we can have some data in there which initially says no.

But if we get a response besides setting loading to fall, as I said, data equal to action DOT response

data, for example, a key I'm expecting on the action when we send the request all reset data to null

here so that this is definitely null once we send the new request.

So I get response data if we have a response.

So here when we have a response, I'll actually cut this and return response.

Jason, which extracts us to response body and then the next block, I got my response data extracted

and in here I dispatch the response action, but now we added it.

Does action or this case here to all extract response data from the action.

So we'll set a response date, a key on the action we're dispatching and save my response data we're

getting here thanks to response, Jason, in there so that it's now part of the action.

So now the important thing is the data we're getting for the request we're sending is stored in our

state here.

That's all nice, but still it's in the hook, how do we now connect us to our component?

Well, just like some of the built in Hooke's, our own hook can, of course, return something.

So here at the end of the hook, I will return an array, but you don't have to return an array.

You can always return an object here or a single number, whatever your hook needs.

Here, I'll go with.

An array or actually, I'll go with an object to show that you can return different things than just

a race.

And in that object I'll return my is loading key.

And that is coming from HTP State, which is what used producer returns me here, which I've extracted

here, which will have a loading property and Arab property in a data property.

So here it's a state loading.

Then we have data which is HTP state data and we have an error, which is HTP state error.

So this is what my hope now returns and now we can use that hook in ingredients.

Yes, there, let's import use HTP.

And here you also have to you can name it whatever you want, but it has to start with us from.

Hooke's.

HTP like that, so now I want to use HTP, and just as all other hooks, you have to use it on the root

level so we can't use it in here in the remove ingredient handler.

That won't work.

Instead, we have to call use HTP somewhere here like Det.

But that's OK, because he was a HTP doesn't sent the request, actually, it just sets up the logic

for sending a request.

It sets up our state and it sets up this function, which sends a request.

So we should probably return that function to.

So in this object I'm returning.

I'm all returning send request and that point at the send request function.

So now we return a handle to dysfunction as well.

Now, to avoid unnecessary referendums, already, all the import use callback here and wrap send request

with use callback.

Like this and add an empty array as a second argument, because this doesn't have any external dependencies,

so it's good like that.

So send request has returned and it will not render unnecessarily, which helps us optimize rebuilds.

And now in ingredients, Jass use htp dhafer returns, our HTP object, whatever you want to call it.

In the end, that's the object where we can use the structuring to pull out.

Is loading a potential area, getting the data we're getting and send request, these are the four things,

the four properties we're returning on our hook, these four properties and with object restructuring,

which I'm using here and pulling them out and storing them in separate constants, now we can use these

constants.

So for the moment.

Or comment, all of that logic here out.

We'll fix that later.

And here, where we use HSP said error in our JS code, I just use error because that's one of the things

I pulled out of my result from use state.

And for loading, well, this just is loading another thing and pulling out from there.

Now, when we're deleting an ingredient here idea for India and just use send request to send the request

to a U.

RL.

And that should be, of course, the other elephant ingredient.

So it's this you are El.

So let's use the tactics here, actually, so that we can inject values, then it's ingredients at the

end, then just before the ingredient ID and then not chase, that's the usual.

Then the method is the.

That's the second argument, send request expects and we need no bodies so we can limit the third argument.

Now, a send request is now a dependency of U.S callback, because send request is actually a thing

we're returning here from use HTP and if we would not wrap send request with the U.S. callback inside

of use HTP, this would actually change whenever the component where we use use https or whatever ingredients

renders and therefore send request to change on every remender there and therefore remove ingredient

handler would change and we would again lose all our optimizations.

Since we use use callback in our custom hook, we ensure that send request never changes and we can

safely added as a dependency here it will not change.

And Dayle for this will not recreate dysfunction unnecessarily and hence our optimisations stay intact.

So now we're sending this request here when we're clicking remove ingredient handler.

Let's give it a try.

Let's go here, Log-in.

And click this, and you saw loading state, that's great, something changed.

The ingredients are still there, though.

But interestingly enough on Firebase, it's indeed gone now.

That makes sense because we sent the request and it's good that it worked.

But we're not updating our ingredients here.

That's, of course, the next thing we'll have to do.

We're not done entirely.

We have our hook for managing HTP requests, but for updating our data Endace ingredients component.

We have no solution yet.