Original subtitles

useEffect besides useState

is the most important React hook you have.

So you need to understand it.

Therefore, I again, want to make it clear

at which point of time, which part of useEffect

kicks in and executes.

And for this, again, here in the log in component,

I'll add a new useEffect call

where I only add this first argument.

So for the moment, no second argument.

And in there we can log,

effect running.

Now, at the moment we have no information

about the dependencies,

we just have this first argument.

And this is a valid way of using it,

though you will rarely use useEffect like this.

The reason for this is that if I reload,

you see it runs when the component first mounts,

so when this login component is rendered for the first time,

but then also for every state update.

For example, if I click in here and click out of there,

we see, effect running.

For every keystroke we see, effect running.

So this really now runs for every time

this component function reruns

because you learned this effect function

runs after every component render cycle.

Not before it and not during it, but after it.

Including the first time this component was mounted.

Now, this changes once we add an empty array.

Now this function here, only executes

for the first time this component was mounted and rendered,

but not thereafter, not for any subsequent rerender cycle.

So we see in fact, running here,

but for the keystrokes, we don't see it.

Now if I log in, we also don't see it again.

So it really only ran once.

Alternatively, we add a dependency

like entered email or entered password.

Now this function here,

reruns whenever the component was re-evaluated

and this state, in this case here, changed.

So if I now log out and reload,

we see effect running, for the first time this was mounted,

but now for keystrokes in the email, nothing changes.

For keystrokes in password, we see effect running though,

because the password is a dependency.

We also have the cleanup function, which we can return.

This cleanup function runs before

this state function as a whole, runs,

but not before the first time it runs.

So here I will, again,

log, effect, cleanup,

save this.

We see only effect running here

for the first render cycle, for the email, nothing happens.

That's a different cleanup log.

This is coming from our other effect.

So effect cleanup did not print yet.

But once I start typing in the password,

we see effect cleanup being triggered

and it triggers before the effect function runs.

Now, if we had an empty array here, so no dependencies,

we learned that we only see effect running once,

and the cleanup function in this case,

would run when the component is removed.

So in this case for example,

when I log in and the component is removed from the DOM,

we see effect cleanup.

So that's how useEffect works,

and how the different parts of it are related

and when they execute.

It's really important to understand this

so if it's not 100% clear at this point,

definitely go through those last lectures again

to make sure it is clear.