Section 9 (React): Lesson 9 - Custom hooks

Описание: Hey you.

And welcome.

In this video, we will write our own custom hooks and react.

So let's dive right into it.

I'll start with a simple example first and then we'll take it to the next step later.

Simple example would be remember how we called use context to get the logs context and then pass it

or destructure the add log and call that well, there is a simpler way to make it more reusable so that

we don't have to remember to import twice one from React where we get the use context and the other

time from logs provider to get the logs context.

So how do we do that?

First thing first, let's structure our hooks.

Usually when I start using my custom hooks, I create a hooks folder in my file Explorer.

So I'm going to start with that right now in File Explorer, right on the same level as components.

So under SRC, I will start creating a new folder and call it hooks and under hooks I will create a

new hook.

Call it use logs.

Dot ts doesn't have to be TSX, but TS is fine.

If you do however want to use JSX in there, then it has to be TSX.

I'll just leave it at TS and it is possible to use JSX in a custom component.

All right.

So I'll hide my file explorer here.

I'll start by copying over some of the code from button TSX.

So I'll copy line number seven and also the Yeah, let's start line number seven.

I will import usecontext from react manually as too much to copy over there.

All right, so let's do that.

Use context gets imported and logs provider is not on the same level.

That's why relative path is not working.

We have to go up a level and we have to.

Oops, sorry, let's just fill it in again.

So upper level components logs provider and now we have access to everything.

Perfect.

So so far we have done imports.

Now how do we create our own custom component?

Well, you don't really have to start the name of the component with use keyword.

So in this case use logs.

But it's a convention, so I'm going to follow that convention.

So I'll do export, const use logs is going to be a function.

So that's what the hooks are.

They're just functions and they will return something.

And we'll figure out what it's going to return in a bit.

And first things first I'm going to do is get the use context.

Provided logs context.

And we're going to destructure something.

Like, so perfect.

Next thing would be there's kind of a redundant code, like I can write logs and add log like this and

then pass it down like so.

But it's duplicate code for no reason.

We can simply just return.

What we're getting from Usecontext and that would be sufficient.

So at this point, our custom hook is ready to use and let's go ahead and replace our button dot TSX

line and the app dot TSX line to start using our new hook and see if it works.

So I'll go to button dot TSX.

I'll remove logs context, I'll remove use context and remove.

Now I'm going to keep the line number 15.

I will just change that to use logs auto import that from our hooks folder and doesn't need the context

API or sorry, the context name anymore.

And there we go.

Perfect.

Same thing on app dot TSX.

I will remove log context.

I will remove use context and I will start using use logs and doesn't need the variable anymore.

Save that.

And if I press the button now, it's still working.

All right.

So that's how you create a custom component.

This is a simple example of you just wrapping usecontext hook into another hook.

And the reason for that may be you may want to create a middleware where something happens.

You do want to alter the ADD log functionality or you want to alter the logs variable before you pass

it down to the consumer.

That's a simple example there.

Now the next example, I'll take it up a notch for button dot TSX.

There's tons of business logic happening.

I have a handle click that has about four four lines of functionality.

There's a style object that's been created, so Button has a lot of functionality inside it.

I want to abstract it and hooks are very useful for that too.

So what I'm going to do is I'm going to create a new hook and that hook is going to provide the button

with the necessary items to render itself out.

And I can put that in two different files later on if I want.

But for now, for the simplicity's sake, I'll work in the same file and I'll say const, use button

props.

Again, I'm using the word keyword use in the beginning.

It doesn't have to be there.

Just a convention I'm following.

Hook is a function, so I start a function and it will return something.

Usually it's an object, so I'll just put it like that and I'll do use button like so now we can also

call other hooks inside hooks.

So I can just copy paste that use logs line and keep the add log as is now.

Let's move Handleclick.

Over to our hook and notice what's going wrong.

So right now is toggled is something that Button keeps track of.

So I'm going to move that up as well.