All language subtitles for 005 Configuring Custom Hooks_en

So, in the backward counter component

we got the same logic as in the forward counter,

but we are dedacting, here, instead of adding.

Nonetheless, we can use our custom hook here,

we just need to do something

which we often do with functions that we write.

We make them reusable and configurable,

you could say, by accepting arguments, parameters.

Just as our components receive props

and just as any function in JavaScript,

or programming in general, can accept parameters,

custom hooks, since they are just functions

can also accept parameters.

And for example, the built in useState hook

also accepts a parameter where we set the initial state.

The built in useEffect hook even accepts two parameters

where we have our EFFECT function as a first argument,

and our dependencies array as a second argument.

So, that is something which we do already, implicitly,

and which we can now also do for our custom hook.

So, which parameter could we accept here?

Well, in the end we want some indicator that controls

how the counter should be incremented.

We could accept this entire updating function, here,

to make this re-flexible.

So, here, we could have our counterUpdate function

as a parameter and then in our custom hook

just execute counterUpdate function, like this,

and expect that the argument we get here

is then a function that can be executed

which gets the previous counter and accepts the new counter.

Or, we don't make our custom hook that flexible

but instead we accept some flag, some Boolean flag, here,

which controls whether that should be a plus or a minus.

So we could, for the example,

accept forwards parameter, the name is up to you,

which is true if we wanna add

and false if we wanna subtract.

And we could even set a default value

so that this parameter is optional.

And then here, inside set interval we just check

if (forwards) if that is true

then we update setCounter, like this,

else, if it's not true we update setCounter

by well, basically, just having

the opposite logic of dedacting.

And that's the approach I will use here

but you could also accept the entire function.

Either way, we now have a new dependency here

in this effect in our custom hook

because the parameter which I'm using in here

that is a dependency.

It's not defined inside of the EFFECT function,

it's not defined outside of our custom hook

instead, it is a value that we get as a parameter, here,

and we have to add it as a dependency, therefore.

So, we should add forwards as a dependency

so that this EFFECT will rerun

whenever this dependency changes.

Of course, depending on the code we write in our components

where we use the custom hook later,

this might never change, it might always be true or false

and not change for one at the same component.

But that's fine, if it never changes

this simply never runs again.

We still have to add it as a dependency

to follow all best practices

and to ensure that if we would have a component

where useCounter is used with different values

for the argument, this EFFECT would rerun

if the argument changes.

And that makes a lot of sense, by the way,

because if we had a component

where the counter can switch between forwards and backwards

we, of course, would want to restart the counter

with the new logic if the value changed.

But that's just some site theory, here, for the moment

it doesn't matter too much.

We can just go to the backward counter

and import useCounter there as well.

By going to the hooks folder and importing it

and then in there, in the backward counter

we call useCounter and we pass false as our argument, here,

for our forwards parameter

because here we don't wanna go forwards

we gonna go backwards.

We didn't need an argument in the ForwardCounter,

there we can call like this

because we got a default value in the custom hook.

But, if we want a different value

then that default value we have to pass it.

Well, and with that, we can again extract our counter

by using that return value and then get rid of all that

other logic in the backward counter component, like this.

And if we now save that and we reload our application

we still have both counters working

but now with our custom hook.

And, of course, this was a made up example, here,

and, of course, besides the example on its own

and not being too realistic, you could definitely

also find more ways of reusing logic, here,

and working with one component

instead of two counter components,

but this was just there to introduce you to custom hooks.

Now, let's move on to a more realistic scenario

where custom hooks can really shine.