All language subtitles for 011 useEffect() & Loading Data_en

So we want to fetch all ingredients whenever there's ingredients, components gets rendered.

Now, as I mentioned at the end of the last lecture, normally we would have used components that mount

for that to fetch something when this component mounts.

But this is now not an option anymore unless we transformed this to a Class-Based component.

But there is another hook that helps us with that.

It's to use the fact hook.

How does it work?

Just like you state, the same rules apply, you can only use it in functional components or Ibrox and

you have to use it on the root level, let's maybe use it here.

Use effect.

Use effect has the name because it is there for you to manage side effects.

And HTP requests are a typical side effect.

Side effect basically means that you have some logic that runs that does affect your application.

For example, we are fetching some data here, but it's not getting finished in this current renderers

cycle.

Or maybe it affects something which is outside of the scope of your job.

Is Xcode down there?

Maybe you're setting to document title, anything like that.

So anything you cannot manage with your normal disk component is getting rendered flow.

Use a fact, and that's important by default, gets executed right after important after every component

render a cycle.

So often this component has been rendered the first time.

The function you pass to use effect because you have to pass a function there will get executed.

So this runs whenever this component got rendered.

And that's really important to keep in mind after and for every render cycle.

These are the two important pieces, not the four, not simultaneously, but after and for every render

cycle.

Now, why do we need use effect, though?

We could just call fetch to get our data like this outside of use effect.

Right.

We could call fetch point to.

Well, it will automatically send a get request.

And indeed Stapleford we will get our, our data back and then we can add a then block will get a response

and we can return response Jason to get access to the response body.

And we can add another then blog, which is our response data, and yes, we also should handle errors.

We'll do that later.

So here we got our response data diskettes executed, Windass component renderers.

And that is what we want, right?

When diskettes rendered for the first time, we want to factis.

So here we got our response data and response data.

And Firebase Case will actually be an object, not an array.

So we'll have transformed us.

Our loaded ingredients, let's say, is an empty tray that's a helper constant here I'm creating then

I use a foreign lube to go for all my keys in that response, STADA, because, again, response data

will be an object.

Every key will be and you can basically see that object here.

Every key will be such a unique idea.

And the value for that key will be the actual data for our ingredient.

So we'll have that overall object with these ID keys here and then these nested objects.

So your a key will be this unique ID.

And disvalue for response data key will then be our concrete ingredient data.

So therefore, here I can use loaded ingredients that array I'm creating here and push a new ingredient

onto it.

It's constant, but with Porche, we're not editing the value stored and loaded ingredients.

We're editing the array stored in memory.

And if that's not clear to you, attached to find a resource on JavaScript reference, reference and

primitive types which have something to do with that.

So here I push a new object onto this loaded ingredient array.

The idea is that key and the title is response data for that key with this dynamic syntax here Daubs

title and the amount is response data for that key dot amount.

So this is how I load my ingredients, how I transformed this object to an array.

And once this transformation is done, so after this for Loop here, we can of course call set user

ingredients and set is equal to the loaded ingredients.

So to Desir� we generated this approach has one huge issue.

If you save this, you actually end up with an infinite loop.

Here can see this.

If you access to network tab, you're sending tons of requests.

Therefore, I'll quickly comment out the set user ingredients line here so that this reloads and we

stop sending this.

So why are we entering an infinite loop here if we're fetching data like this?

If you fetch data right here in your render function, then whenever ingredients renders you're sending

HGP request and when you then as a result often is HDP request, update your state.

What happens if you update your state?

The component renders again.

So ingredients renders again.

And what does this mean?

We send an outrage to dippie request.

What does this mean?

We update the state at some point.

What does this mean?

We render we send in a request, we update the state, we render and on.

So that's the infinite loop.

That's why sending this here is not an option.

So let's cut this year and let's instead move it into disuse effect function here.

Now the comment is back and now we're executing this after every Renner's cycle, but still by default

for every renderers cycle and hence, unsurprisingly, for safeties.

And we go to the network tab.

We still have an infinite loop, so again, let's comment out this year and safeties to update our page

and stop that loop.

So how can we fix that was a fact.

Actually, all that takes a second argument.

The first argument is this function which executes after every render cycle.

The second argument is an array with the dependencies of your function.

And only when such a dependency changed, only then the function will rerun.

So this allows you to control how often this function runs by default for every render cycle.

But you can change this now.

Here we actually have no external dependencies and with external dependencies, I mean variables or

data you're using, which you define in your component outside of the use effect function.

We're not using anything of that.

Does you is hard coded response is a variable created here on the fly response data loaded ingredients.

It's all created on the fly set are ingredients.

That's actually a function stored in a variable coming from outside.

But that's a special function since it's generated by use state react automatically creates that such

that dysfunction never really changes and doesn't have to be considered as a dependency.

So that's an exception because it is a function generated by use state and therefore dis use affect

function.

You're actually has no external dependencies and so we can add an empty array, but we have to do that

permitting.

It is not an option then this runs for every renderer cycle.

If you do add an empty array, though, what happens is that this now runs when this component gets

first rendered, so it runs this one time.

It's not omitted entirely, but it runs one time, but it never runs thereafter.

So with an empty array, it's like component did mount can kind of memorize that with an empty array.

As a second argument.

The function you past use a fact is like component did mount.

So if we save this.

Now, if we go to the network tap.

We see no ongoing requests down there and we see our data was loaded, that we're safe again, safety's

you see our data gets loaded.

So this is now working with the help of U.S.

Effect.