All language subtitles for 027 Wrap Up_en

Now, I know that especially does custom hook thing can be confusing also because we built a quite complex

custom, OK, here, you can definitely have simpler ones than this one.

But I want to show one where you can learn a lot.

The idea of custom hooks is that you share logic, not data.

So what we do here is we share logic that we use in both to search animals in the ingredients component.

And when we send the request in ingredients, this doesn't do anything and search and the other way

around as well.

This is how it should be.

You're able to share stateful logic across components and it is stateful because are a custom hook.

We're using use reducer to manage some state.

And when we dispatch a new action here, does actually triggers react to rebuild the component, but

we use the hook.

So we're not having a regular JavaScript function here, but a function where we can do certain things

that will lead react to rebuild the component in which we're using this function, this hook.

That's the ideal hooks.

And while custom hooks can be confusing at first, they can be very powerful because we were able to

move all of that age to the P logic out of this component.

And instead we just send off some requests and we handle the responses and use effect.

And that, of course, all does a pattern you have to get used to.

Normally you would expect send request to return a promise and then use then or async a way to handle

this.

And you could do it as by the way, you could absolutely have send request, return a promise here.

It's not for turning anything.

While we could, of course, return the result of fetch and now send request would all of a sudden return

a promise.

You could do that and you would be able to implement this in a totally different way.

You would be able to simply listen to the response here.

And handle the response here instead of using it or doing it and use effect this split into a place

where you send it and then use a fact where you handle it can be especially confusing at first.

But this actually embraces hooks and uses their full potential because I believe it's a very clean code

in the end, where we have a clearly defined place, where we change some data in our component here.

And we could have multiple use effect called, of course, if we have multiple side effects.

So we have a clearly defined place where we do that and we have another place where we dispatch our

actions, so to say where we send our requests.

Again, it is something that certainly takes time getting used to.

It's not a must do.

You could return a promise and use your regular flow.

But I think this split is very nice, very clean.

And most importantly, does overall use of a custom hook and of hooks in general allows us to write

a very clean code with clear responsibilities, which can be challenging at first, but which ultimately

will allow you to write better, cleaner and probably also better performing applications.