All language subtitles for 019 Learning the _Rules of Hooks__en

So now in this module

we learn a lot of important new concepts

and we learn about new react hooks.

Specifically, we can see it here in the login component.

We knew about use state before, but now we also learned

about use effect, use reducer and also use context.

So there are a bunch of react hooks.

There are even more hooks than that, but we'll get there.

Step-by-step now that we have all those hooks

it is important that we also learn

about some rules for using them.

We always follow those rules thus far

because of course I'm not teaching you incorrect patterns

but I think it's now

the time to give you a formal definition

which you can print out, put

on your wall and make sure you don't violate them.

You find this slide attached there for side note

all slides are always attached

to the last lecture of each module.

Anyways, there are two main rules you have to

know when it comes to working with react hooks

and react hooks are simply all those functions

that start with use.

So use effect use reducer.

And so on the first rule,

which is important is

that you must only call react hooks in react functions.

That means in react component functions

as we did it thus far,

or also allowed in custom hooks.

That's not something we explored yet, but

of course that will also be included in this course

just as the name suggests, it's a bit more complex

and therefore a bit more advanced and something we'll

there for dive in later,

these are the two scenarios

where you are allowed to use react hooks.

And what does this mean?

Well, to give you a concrete example here

in the log in component, we, for example

have to email reducer function.

This is a function next to the login function.

The log in function here, however

is my component function for the login component.

And it identifies itself

as such a function because it returns JSX at the end.

That is what makes up a component function.

Email reducer does not do that.

It returns an object.

It's not a react component.

And therefore calling Us state in here is not allowed.

And the good thing is a modern react set with a good IDE

like Visual Studio code, weill even tell you about that.

You see it down there

react hook use state is called in function email reducer

which is neither a react function component

or accustomed react hook function.

So exactly what I stated on the slide.

You're only allowed to use hooks

in react function components or in custom hooks.

emaiL reducer

is neither of that.

and hence, we get an error,

so you should get an error.

If you try to do that

should get a warning and here's all your technical rule.

Don't do it

The second important rule is

that you must only call react hooks

at the top level of your react component functions

or your custom hook functions.

Don't call hooks in nested functions.

Don't call them in any block statements.

So again, to give you an example here in the login

component, so now inside of the functional component.

We of course, for example

have our use affect function here.

So the function which we pass to use effect

you're not allowed to call use context

or use state or any other hook in there.

Again, you will see, I get a warning here.

React hook use context cannot be called inside.

The callback react hooks must be called in a

react function component or a custom react hook function

and admits to be called directly on the top level there.

So calling it here is okay

because that's the top level of this login function

but in a nested function is not allowed

and that's not just true for nested functions.

It would also not be allowed in if statement

calling use state in there also not allowed.

So again, a very simple rule, not too hard to follow

only call react hooks at the top level.

Now these are the two official rules of hooks.

There is a third rule, which I want to add here

not directly related to all hooks, but to one specific hook.

And that's the use effect hook

there make sure that you always add everything you refer

to inside of use effect as a dependency

unless there is a good reason not to do that.

I should add.

And to make it clear what I mean, let's again

go to login component in here.

We use use effect to execute this function.

And in there we use nothing from the surrounding component.

We use console log, but that's baked into the browser.

I'm not talking about browser API things.

I'm talking about data exposed by the surrounding function

and here we're not using any data.

Hence we have no dependencies.

It's a different thing for this use effect here though,

there, we have this function and

in there we're using set timeout, which is a browser API.

You don't need to add those

but we are using email is valid and password is valid

and that's data from the surrounding component.

That's part of the surrounding components state.

And if it would be part

of the surrounding components props, the same would be true.

So what I'm now saying would be true

in that case as well, such dependencies

or such values need to be added as dependencies.

Technically we should there for also add set form is valid

because that's not the browser API

but this is one exception to the rule.

Actually the state updating functions exposed by use reducer

or by use state are guaranteed by react to never change.

And therefore you don't need to add them

as dependencies because if they never change well

it's a redundant dependency.

You could add it though.

Wouldn't be wrong.

Wouldn't be horrible.

You could add it.

And it would work in the same way.

You are just allowed to omit it.

And actually you don't need to memorize all of that

if you think, well, that's too much.

No worries.

If I remove a dependency here in a modern setup

you should get a warning here that react hook

use effect has a missing dependency

either included or remove the dependency array.

So you are warned here as well.

And I just want to explain this warning

and why you are getting it.

There are some exceptions like the state updating functions

but all the average data, which is not coming

from the browser or from outside your component function.

So all the data that is

from inside your a component function

in which you are using use effect needs to go

into the dependency array.

That's my third rule here.

And with that, you are well prepared to use hooks

and to build amazing apps.

Now let's continue on that road.