Original subtitles

Well, you are going to use a custom hook

just as you use to build in hooks.

You are just calling it

like a function because it is just a function.

So therefore we wanna import use counter here

in the forward counter component, import use counter

from going up one level diving into the hooks folder

use counter.

And in the forward counter

we can then just call use counter.

Now that alone will not do everything we need to do

but it is a start.

Now we are calling this custom hook function.

So when this gets called,

obviously, all that code will execute.

So that state will be registered

and that effect will be fired.

Now, if you call a custom hook in one of your components

and that component, for example of registers a state

or an effect as we do it here then this state and effect

will be tied to the component

in which you use your custom hook.

So if I call use counter in the forward counter component

the state created here, in use counter

will be tied to this forward counter.

If we use a custom hook in multiple components

every component will receive its own state.

So just because we use a custom hook does not mean

that we share state or effects across components.

Instead for every component

the custom hook is executed again.

And every component instance then receives its own state.

So it's just a logic which has shared

not the concrete state.

So therefore, in this case, since I call use counter

in the forward counter, this state is set up

for the forward counter and the this effect is set up

and fired for the forward counter component.

But of course now inside of the forward counter

I need access to the counter state, which is managed

by the custom hook, because I wanna output it here.

And how can we do that?

How can we make that happen?

Well, just as we do it with the built in hooks.

For use state this built in react hook

this also does something behind the scenes

and it also creates and manage this state.

And then it does one important thing.

It returns an array, which we are de-structuring here.

Custom hooks are just functions and they afford

they can return things.

So here in the case of use counter to make

that counter state available in the components that do use

this custom hook, we can simply return it.

We can simply return counter.

You can return whatever you wanna return

in your custom hooks.

That could be an array or an object or a number

or in this case implicitly a number

because counter will hold a number.

So now I'm returning this counter state here.

So this state, which is managed or which is set up by

that custom hook, I'm returning it here.

And therefore, in the forward counter component

where I call use counter

I can of course use that returned value.

And here I can set up my counter constant

set it equal to calling used counter

since use counter returns to counter.

I can store it in a constant of this component.

And now we can get rid of all that old code in here

and slim down this component, like this, get rid

of the imports because we're not directly using use state

or a use effect in this file anymore.

And now we got this slim component.

And if we now save that, you will see

that if I reload here, this counter this forward counter

still works as before, but now with a custom hook.

And that is how we build custom hooks and why we do it.

And when it comes to the how, the most important thing

really is just the naming, you have to start with use

and then you can use stateful logic in there.

You can use upper react hooks in there

and that allows you to share this logic across components.

And speaking off that, let's now make sure

that we can use this custom hook

also in the backward counter component.