Original subtitles

So, at this point

we already achieved quite a lot

but there's one thing which is unrealistic

at least in some applications.

Currently, we're always fetching data

when this button is pressed.

Now, in a lot of applications you wanna fetch data

as soon as a certain component loads, right?

If a user visits the webpage

you immediately wanna start fetching data

and currently we're not doing that here.

We're just fetching it on demand when the button is pressed.

Now, to immediately fetch it

we can use another concept we already learned about.

We can use the useEffect hook

because sending this HTTP request is a side effect

which ultimately changes our components state.

And you learned that such side effects

should go into useEffect.

Having them into a functions of course also fine

as long as you don't just call this function

as part of your main component function

because then you could create an infinite loop

where you call this function, it updates the state

the component function re-renders or is re-evaluated

and therefore the function is called again

it updates the state to component function

is called again and so on.

We wanna avoid that and that's how we use

useEffect for that.

UseEffect is great if we have code

that should be executed

as part of the component renders cycle

but maybe not always when the component re-renders.

And therefore here we can add useEffect

and then define our effect function here

either as an arrow function or as a regular function

with the function keyword.

And here in useEffect I can of course

simply call fetch movies handler.

I can simply call this function like this.

So, now this function is still called if I click the button

but in addition also

whenever this component is re-evaluated.

Now, of course, I don't wanna call it

whenever this component is re-evaluated

because that would be this infinite task

which I don't want.

Instead, we add our second argument here

which is this array of dependencies

where we define when this effect function

should be executed again.

It will only execute again

if the dependencies listed here change.

Now, as you can clearly tell

I didn't add any dependencies yet.

So, if I save it like this, this will never run again

except for the very first time the component is loaded.

So, hence if we reload this app

the data is fetched immediately.

It's still fetched again if I click the button

but it's also fetched immediately

when this loads for the first time because of useEffect.

Now, technically we're not executing this

in a clean way, though.

You also learned that it is a good practice

and the best practice to list all dependencies you use

instead of the effect function here

in the dependencies array.

Now, I am referring

to the fetch movies handler function here

that is a dependency of this effect.

So, we should add fetched movies handler

a pointer at this function as a dependency.

Because if this function changes

this effect should be re-executed

and this function could change

if we would be using some external state in here.

We aren't doing that in this example but in other examples

we could be doing that.

So, we definitely wanna list this function

a pointer at this function as a dependency of this effect.

The problem with that is that functions of course

are objects as you learned

and therefore these function will technically change

whenever this component re-renders.

So, we will create an infinite loop

if we added as a dependency.

One solution would be to omit it

because here that would indeed achieve the result we want.

But it could introduce subtle bugs

if our function would be using some external state.

So, the better solution is to use the useCallback hook

and import that from react

and to wrap the fetch movies handler with that.

For this we need to transform it and turn it into a constant

which saves the result of useCallback

which then wraps this function

which is now written as an arrow function here

though we could also use the function keyword like this

and we should add our dependencies array

for useCallback as well

and list any dependencies this function might have.

This function though has no external dependencies.

The fetch API is a global browser API

it's not a dependency and other than that

we are not using anything special in here.

These state updating functions as you learned

don't need to be added as dependencies

because react guarantees that they will never change.

Now, I still changed something which would break the app.

I removed the async keyword.

We need to bring this back here

simply in front of this anonymous arrow function.

Async then any parameters we might be getting

then arrow and then the function body.

Alternatively, we can also write it

in a non-arrow functional way like this if we want to

that both works and there is no difference here.

I will go back to the slightly shorter Syntex though.

So, now we ensure that this fetch movie's handler function

is not recreated unnecessarily.

So, if you save that it now crashes though

because the order is now wrong with the function keyword.

It was no problem because of hoisting

now, since this is a const calling it

before this code has been passed won't work.

So, we simply need to move this use effect call

after this function definition

and now it will work again.

And as it works as before without an infinite loop

and we still can also reload manually.

So, that's how we can leverage use of fact to make sure

that we send a HTTP request immediately

when a component loads and not just when a button is clicked

then we still can also do that

and you also learned how to use effect correctly then

and how to ensure that it will really always run

when it needs to run but not when it does not need to run.