Original subtitles

Here is an example application,

of course you find it attached.

And as you see, this application has in the end

just two counters, one counter counting upwards,

one counter counting backwards

and of course that's not a fancy application.

We're going to see another example later in this module

but this application allows me to explore custom hooks

together with you, show you

why we might wanna build custom hooks

and how we built custom hooks.

So here's the code for it is application,

which again, you'll find attached

and in here, we in the end just got free components,

the backward counter and the forwards counter,

the card component which is just a rapper component

providing some styling and then app JS,

I'm using the forward and the backward

counter components and these components

do just what their name implies.

The forward counter uses, useState and useEffect

to manage a state and to create an interval

which simply starts counting up

and which then sets a new counter state every second,

every 1000 milliseconds.

And in the backward counter, I'm doing the exact same thing

but here I'm subtracting from the counter

but other than that, it's the same logic.

So, therefore it is fair to say

that these two components are fairly similar.

Now, of course, we might be able to create one component

in state and then use props to configure it differently

but it would also be realistic that in real applications

you have different components, which to a certain extent

might do related tasks.

And it is fair to say that we therefore definitely

have some code duplication in the forward

and the back counter.

If we leave that small detail of subtracting or adding

to the counter aside, it's exactly the same code in the end.

And whenever you have code duplication in programming,

you typically wanna take that code and refactor it

and create a function which holds the shared code.

And that's exactly what we're going to do with custom hooks

because the problem we face here

is that the code which we want to reuse

uses react hook like useState

and useEffect, and it updates the state

by calling the state updating function

and as you learned with the rules of hooks,

you are not allowed to use these react hooks

in any random function.

You must only use them in react component functions

or custom hooks.

So, if we wanna outsource that logic

into a separate function,

we need to build such a custom hook

and that's exactly what we're going to do here.

So how do we build a custom hook then?

Well, typically just as with components,

we store every hook in a standalone file.

So I will start by creating a new hooks folder

side-by-side to the components folder

and in there, I will add the use-dash counter js file.

Now, the file name is totally up to you.

You don't have to name it, use counter.

I do name it like this though

because there is a clear rule

which we have to follow

when it comes to the function name

inside of that file

because we are going to create a function here,

either as a concept, which stores a function

or with the function keyword

I'll go for the constant approach, but both would work

and that function which you do create

has to start with a use in its name.

That is a must do.

That is a hard rule which you have to follow.

It will be a normal function in the end

but the use at their beginning

signals to react that it will be a custom hook

and it gives the reacts to guarantee

that you will use stat function by respecting

these rules of hooks so that you will use

this custom hook function just as you use to build in hooks.

And that is a guarantee react needs

because otherwise if you start using react hooks

in your custom hook and you would use your custom hook

in a wrong, in a forbidden place,

you would implicitly also use to build in hooks

in a wrong place.

And that's why we started with us here

because react can look out for that

and actually this project set up will give you a warning

if you have a function starting with use

and you then start violating some of these rules of hooks.

That's why this is a must do.

Start with use is in the functioning name and thereafter

you can name it however you want,

I will name it, usecounter

and then store a regular function in it,

and because of that function name,

I also named the file like this,

but again for the file name, there is no specific rule,

you could name it however you want.

Now of course, ultimately the goal is to use this function

in another file, so therefore I will export

this function here and then inside of this function,

we can start adding that logic which we want to reuse

and in our case, if we started with the forward counter,

in the end we can just copy that code here

from the forward counter that code, where we use

use state and use effect, not the code

where we return JSX, just the Abra code.

Copy that and add it inside of that used counter function.

Now, since we are using useState and useEffect now,

we need to import these things from react

because you always need to import what you use.

So here we imported useState and useEffect like this.

Now we got this logic in this custom hook function

but of course in the end, we still wanna utilize it

in our forward counter

and later also in the backward counter.

How can we do that?