All language subtitles for 014 useCallback

In the end, this infinite loop here is caused by this onload ingredients dependency.

This effect, which fetches all our data, will run whatever entered filter or onload ingredients changed

that will be the case for the first time search has rendered.

So it will definitely fetch our data whenever a search is rendered.

But thereafter, it will rerun whatever entered filter changes, which we never changed because that

would only be the case if you type here or if all those ingredients changed, which were extracting

from our props.

That is the case.

The parent component is rendered, the parent component is rendered because in the end, the first time

we load a data we were calling OnLoad Ingredients, which calls this filtered ingredients handler function.

And in there we're calling set user ingredients, which changes to state, which we is this component,

which means that here, of course, we're also creating a new filter ingredients handler function because

this entire component reruns.

And in the end, this is just a JavaScript function.

Right.

So even these functions you have in there, they still rerun.

They're still executed again.

In the end, this is just a variable which now receives a new value.

Of course, we know it has the same logic as before, but technically it's a new function object in

JavaScript.

So it's a new object we pass that to.

All those ingredients, and since it's a new object inside of the search, shares fell.

This is different to the last time do fact executed and therefore you will execute the effect because

we rewriter the parent, all these functions are created new and well, we got a different value.

We rerun the effect in the search component.

To prevent this from happening, we can use another never hook provided by REAC, that's the use callback

to use callback hook allows you to wrap one of your functions with it.

Let's say dysfunctions on the right side of the equals sign you use use callback and simply wrap this.

Around your function definition like this, and now you also pass a second argument to use callback,

first argument is your function.

Second argument, awls is an array with the dependencies of dysfunction.

Dysfunction has no dependencies because set user ingredients est�s special dependency since it's the

end return by use state astiz updating function by you state.

So that special and Abbadon that we have no dependencies here so we can specify an empty array here.

By the way, you could have all the past set or ingredients as a dependency here.

It still wouldn't rerun because this never changes.

That's guaranteed by react.

That's why you can't commit it here.

You can also specify it, but this will now never rerun.

And therefore, what really does is it cashes your function for you so that it survives Birendra cycles

and therefore Wendi's ingredients, componentry renders this specific function is not really created,

so it will not change.

So what we pass to the search component to onload ingredients will be the old function, the same function

as on the previous render cycle and therefore in the search component on the use effect here on this

check, all those ingredients will not have changed and therefore does effect will not rerun.

So now let's comment on loading greens back in.

And if we now Safet, as we see no infinite loop, still one extra renderers cycle to which I'll come

back in a second.

But if we have a look at the network tab, no extra requests and only if I type here.

We're sending extra requests with every keystroke we see.

Filtering is also working, for example, for apples.

We only see that if I enter something which makes no sense, we see nothing for bananas.

We see bananas that's working.

We're sending the request with every keystroke, which I might not be ideal.

And we have an extra renderer cycle initially, so we should probably fix that.

But we certainly have no infinite loop anymore.

Before we ensure that we don't send the request with every keystroke, let's ensure we don't have this

extra cycle initially, and this is actually coming from a redundant HTP request we're sending.

If I open by developer tools and they're the network tap for reload, get a bunch of requests.

But in the end, you see there are two requests fetching our ingredients, these two requests.

They're both sent to ingredients, Jason Firebrace.

Now, why do we have two requests being sent there?

Well, because we send one in surcharges here and use a fact when this component gets rendered, this

effect executes.

That's how effects work.

They execute when this component gets rendered, because all these dependencies, of course, have changed

compared to the previous render cycle because there hasn't been a previous render cycle.

So this gets recalled and dear, of course, entered filter is empty initially, so we have no filter

set.

Hence we fetch all data and then we call onload ingredients to, well, use these ingredients.

And in addition to that, for all the fetching data in the ingredients component there, we also have

use effect, which we only execute once when the component loads.

But we do that and there we all the fetch ingredients.

Now, since we already are guaranteed to fetch ingredients because we're doing that in search, we of

course don't need that extra use effect thing here in the ingredients component so we can get rid of

debt because we are fetching ingredients with search component.

So with that, we're still loading it.

But now we got rid of the extra render cycle.