All language subtitles for 013 More on useEffect()_en

Let's go to a research component, the search component should be responsible for it input field, where

we, for example, can enter apples and then we only see while the items that matched his name and we're

doing a full name search here, so we'll not search for app.

But Apple gives us little apples.

Bananas gives us little bananas.

That's the idea here.

Red notice doesn't work, of course, because the search as follows pretty empty and has no meaningful

logic in there.

It's time to now change this with the knowledge we gain thus far.

First of all, let's make sure we manage to user input so we can add import use state here like that.

Then here again, USERRA structuring to have the entered filter, let's say, and set entered filter

and then use state.

With an empty string and bind to stand there, bind the value to entered filter and bind on change here

to a function it updates set entered filter, we get the event automatically passed in by react in the

end and then we call set entered filter and we set this to event target value.

So that's something we did before already.

Just saving the value here.

But now the idea is that whenever a user type something to you here, we try to fetch filter data from

Firebase.

How could we make this work?

Well, you could register a function for on change, which basically sends HTP request on every keystroke

would work here.

Eivor I'm updating the saved value and every keystroke.

And instead, what we can do is we can use use effect here.

Added here.

And Pazin, a function that should make that HTTP request and we simply specify entered filter as a

dependency, and this means this function will execute whenever entered filter changed.

So it's having the same result.

But in my opinion, it's a bit more elegant because we're really embracing the ideal folksier.

We're splitting our logic dysfunction only updates what the user entered or only updates to state where

we store what the user entered and then use effect will automatically execute thereafter and do whatever

we want to do for every change.

So here I want to send a request.

So I'll go to Ingredients Jass and basically fetch the logic I have in here.

For fetching the requests, let's grab that, copy it and add here into use fact.

You are l'Est, the same, transformation's the same, but of course, in the end, I don't call set

yuzu ingredients, but instead I want to trigger something in ingredients Jass right.

Because that is where we manage our ingredients.

That is where we also use the search component.

So in the end, we should establish a connection between search and this ingredients component to update

the ingredients here whenever we fetched new ingredients in search.

Let's say now, of course, typically for that, we would use props.

So we can specify, let's say props onload ingredients name is totally up to you, Caldas as a function

and forward our loaded ingredients like this.

So all the ingredients is now a function, I expect on my search components.

So in the ingredients component, we have to specify this prop on the search component and there forward

a pointer at a function that should execute when all those ingredients is called in the search component.

We have no such function yet.

So let me add a new one.

Maybe here at the very top, all named is filtered ingredients handler or whatever you want to call

it.

We get our.

Filtered ingredients or whatever you want to call that as an argument, and the idea here is simply

that we call set user ingredients we set as equal to our filtered ingredients because these should already

be in the right format.

So a very simple function then passing a pointer at this function to onload ingredients on the search

component so that we can call this function from inside the search component.

Now, back in the search component, we're calling this now with debt.

We have a fact that runs whatever entered filter changes.

But now here we're getting a warning in the end.

The problem is that we're relying on props here, but we haven't specified them as a dependency.

And that means that if props changed, does components, will we render but does affect won't rerun?

Because we haven't informed the effect about the fact that props are a dependency.

You might say, well, I'm only pointing at a function here.

That function shouldn't change.

So actually that shouldn't rerun if props change.

But you should never cheat regarding your dependencies.

It's a good practice to always be clear about all dependencies you have in here perhaps is a dependency,

but still we will have a problem with that now does affect will rerun whenever props change, that basically

is the case.

Whenever anything passed to this component here changes or whenever anything in the parent component

changes, that's also not what we want.

We only want to rerun this function if onload ingredients.

So if dysfunction, we're pointing it if that's changed.

And for that, we can use another modern JavaScript syntax, maybe right here at the very top, we saw

a way to structuring.

There always is a concept called object structuring works in a very similar way.

We have curly braces in this case on the left side of the equals sign.

On the right side, we have the object which we want to destructor or from which we want to extract

properties.

And then here, between the curly braces on the left side, you specify the names of the keys in that

object, which you want to extract, in which you want to store and separate variables.

So in my case here, that would be onload ingredients.

I know that this will exist as a key and props.

I'm calling it here and now I'm simply pulling that out and storing it in a separate onload ingredients

constant.

So this is now a separate constant.

And here we can just call onload ingredients and we can specify all loading regions as a dependency

now and now.

This will only rerun this effect if exactly this value changed.

So if anything else and props changed, this will not rerun only if dysfunction changed or if the entered

filter changed in these cases will send the request here and this request will get our data, then call

onload ingredients in the end.

And that should set our ingredients here.

Now, a request right now, however, is not taking the entered filter into account, it's fetching

all ingredients.

Of course, it should fetch filtered ingredients instead.

Thankfully, Firebase supports filtering.

We can append some very Perens which are stored in a separate variable here.

To the end of this, you are El.

And I want to have different groups depending on where we entered something or not, so if entered filter

length is equal to zero, then my career will be nothing.

I'll not add any query parameters.

So it's just an empty string.

Otherwise it will be a string for which I use back ticks here.

So these are not single quotes, but back ticks so that we can use string interpolation to dynamically

inject values here.

And then you should add questionmark order by written like that, equal double quotes opening and closing

and between the double quotes, the field for which one to falter.

In our case, that's the title field.

Then ampersand equal to like that, equal sign, double quotes opening and closing.

And now with string interpellation, which is done with Dollar Sign and then opening and closing Curly

Brace, Disvalue entered and entered filter.

This sets up query, which is never an empty string or this string here, and this is simply a syntax,

a combination of query Purim's understood by Firebase to in the end, filter the title field for the

value entered here.

We have to append does at the end of our request here so we can simply add plus Creary plus query here

in the end and that's ibut an empty string or that valid query set up.

Now to make this work we need to all make a tiny adjustment here on Firebase.

Go to rules in your database.

Now we need to add an entry here to unlock filtering and double quotes here after it is read right thing

and there add ingredients.

So basically the name you have as a node here, you are sending your data to ingredients and then the

value is no object yet and you end with opening and closing curly braces and then they're add another

string with double quotes, dot index on which is a command understood by Firebase.

And then this is an array again with a string value in there, which is basically the field name by

which you want to be able to filter.

So you need to add this setup here to your firebase rules with the setup we can filter for the title.

Now we can send requests here.

Now, a request should be sent whenever we type something here, so let's now save that go back to wrap

and you see, oh, we seem to be in an infinite loop again here.

So to leave it, let's comment out on those ingredients and safeties and reload what's causing this

infinite loop?