All language subtitles for 026 Using the Custom Hook_en

Now, we started working with our custom hook that now all this means we can clean up this component

a bit, remove some of the code we had in there before, basically everything we commented out there.

Now for ADD ingredient handler, you will also see that we're getting a warning here.

There are some green squiggly lines that we're missing, a dependency send request.

And indeed, we should add this here.

Now, add ingredient handler, the same as with removing rean handler send request thankfully is wrapped

and use callback in our custom hook here.

And therefore this will not rebuild or will not be recreated for every rebuild of the component and

therefore remove ingredient handler, which all the users use.

Callback is not recreated and hence our optimizations of child components stay intact.

And we were not handling is errors or clearing errors.

That's not something we're doing.

We want to do that with the help of our custom here as well.

Now, we're setting an error here if we're getting one, but we got no way of clearing it, I will actually

register a new case in my producer in my custom book, which will name Clear, and there I'll return

a new object.

And essentially what I do there is I'll just return this new initial state.

So I'll cut it here, create a new constant up there.

Maybe named as initial state sounds like a fitting name, and that is just as object, and then here

in a clear case, I simply return this initial state object from above, and it's the same initial state

object which we can use down there for initializing the reducer.

And we need no curly braces here.

And therefore, we can get rid of that old clear case, the new one does the resetting we want now clear

is something we.

Can dispatch, but we're never dispatching it to anywhere here, so we'll create a new function here

inside of my custom hook clear.

Or whatever you want to name it, it's a pretty straightforward function which uses dispatch, HTP and

dispatch, it's an action where to type Simplist clear.

No data needs to be appended, nothing like that.

I'll also use use callback here to avoid the diskettes rendered.

We got no external dependencies.

So does this an empty array and now clear is a function which you can always return here.

So I'll return clear as a key value pair in that object returning overall from our custom hook.

In our in our component.

We can get access to clear.

By simply extracting this as well as a property from our use HTP result, so from our custom hook and

now in clear air down there, all we have to do is we call clean air like this or we get rid of clear

air here entirely.

And down there on on clothes of the Armorel, we just point at clear, which is that extracted functio

we're getting from our custom hook, which is already wrapped in use callback.

So now let's test whether that works by going again, too, to the lead handler, removing the Essere

to force an error log in.

Click on bananas.

That's looking good, we can handle this, we can hopefully still add new apples.

So that's all working.

If I fix the error, of course, deleting will all the work again.

So if I delete my apples, that's looking good.

So now we're using the custom hook here now in our place where we can, of course, use it as the search

component.

In the search component, we're also sending HTP request, so there's no reason to not also use to hook

Dare to use it here, I will import it, of course.

Use HTP from.

Hooke's, HTP Jass and then justice before call, use HTP up there and then extract some data from there,

which we're interested in now, that might be less data than before.

I'll keep it a bit simpler here.

I'm interested in loading.

I'm interested in data are interesting.

Potential errors.

And I want to be able to send my requests since I handle errors, I also need to clear function.

And now with all of that extracted, we want to send the request here.

Where we previously called fetch, so call.

Send request here and my you are Ellas, of course, the same thing I had here before, so you are helpless

query method here is get to get request, we need no body, we need no request extra.

We also need to identify because in this component, this is the only request we're sending.

So we will always be able to identify it and hence we can get rid of all that logic here.

I will keep that transformation logic because we'll need this in a second.

And I will just cut this year.

So now, for now, I'm just sending the request here, if we decide that the time is ripe now to handle

the response and again use a never use effect call.

By the way, to position the order of to use effect calls doesn't matter here.

And this should, of course, execute whenever we got data, but it will also depend on loading and

on an error because in here.

I want to check if we are not loading and we have no error and we have data, let's say, then if that's

the case, then we know we got some data back.

Hera will now add this transformation logic response data is now just the data we got back so we can

simply replace response data with data and then we call onload ingredients.

Now, all loading, reinstill for, of course, also is a dependency here on.

Load ingredients.

That's all the dependency we need to add because we're calling it here.

Now, in the first use of fact, call here, we depend on entered Felter, we depend on the ref, of

course we depend on no more onload ingredients, but instead we now have a new dependancy, which is

sent requests.

So we should add this because we're using this function here and functions are normal dependencies,

just like our values.

Since it's wrapped in use callback in our custom hook, though, it will not trigger another call of

use of fact.

And that's exactly what should be the case.

So now, last but not least.

We're doing all that, let's not also add error handling here for dad, all imports, dealer or modal.

From UI Error Motal And if I now go down to the J�zef section, you're above that card.

I'll check error if it's there.

If we do have an error, I will render the error model and in the error model that should be too ampersands

signs in the error.

I want to output my error then, which is the message.

And on close of that model I want to call clear right.

Which is my clear function coming from my custom hook, which I'm extracting here.

So now this is all being done here now to also show a little loading indicator, let's say, between

the label Indian put, I'll not add the loading spinner here, it would actually distort the interface.

Instead, I'll just check for is loading.

And if that's the case, then I want to output a span with the text loading in there.

If we save that and we log in, you see loading here as a text and you also see this if I type here

and then await.

Like this.

Therefore, this seems to work correctly, and if we check the network tab, we also see no infinite

amount of requests there.

Let's add some apples and then update the filter here.

So that's all looking pretty good to me, and now we're using the custom hook also in the search component.