Well, it looks like our search component is working out pretty well.
However, you might notice that if we go back over to our application and take a look at the console,
we now have an extra warning inside of here.
We, of course, still have some warnings around, some cookie stuff, which is totally fine.
We can ignore that.
We have some unused variables.
We find we can ignore that.
But we have a new warning right here around react use effect has a missing dependency on this video.
We're going to figure out why we are getting this message and we're going to walk through a solution
to it.
Now, I got to tell you right now, this video is optional in nature is can be really tough to get through.
And we're going to look at a hard to solve problem around use effect.
This is some really advanced stuff.
I'm about to show you.
So the reason it is optional is because it's going to be really, really hard content, essentially
kind of hard stuff.
To understand the topic I'm going to show you.
We're going to eventually kind of naturally cover later on inside the course.
This is just kind of a preview.
So if all this user effects stuff is really confusing right now, don't sweat it.
Just pause this video right now and continue on to the next one.
Everything I've showed you up to this point is 100 percent accurate.
And you really can continue on from here.
But if you want to get this extra knowledge run news effect.
Right.
Stick around.
Let's get to it.
Now, this is gonna be a long video because I'm gonna try to show you everything you need to know inside
this one video rather than split out into separate.
OK.
So back to this warning message right here, though, again, says something like U.S. fact has a missing
dependancy and then blah, blah included or remove the dependancy array.
First off, what is this really talking about?
Well, we are making use of use of fact right here.
And whenever you make use of U.S. fact, you will very frequently once refer to some variables that
are declared as props or state inside of your component.
We are already doing that with term right here.
That is a piece of state that we are referring to inside of our use effect function.
In the last video, we also just added in a reference to results, not length.
Also a piece of state.
Anytime that you refer to a prop or a piece of state inside of use effect react or specifically a rule
built into it, create, react app or even more specifically, something called yes, lint is going
to want you to reference any different prop or piece of state inside of the use effect.
Dependency array, the defense.
Right.
Is this thing right here?
It is the array that controls when use effect gets executed.
So if you ever make reference to a piece of state or props, that rule wants you to see it listed inside
of this array.
And remember, that array is all about deciding when to rerun, are using fact function.
Though right now, without worrying about why that warning message is there, let's just try adding
in results, not length.
And see if that makes a little warning message go away so I can put that in.
Look back over and sure enough.
Now the warning is gone.
So why does that rule want us to put that in there?
Well, as you're going to see in our next application or not, the next app, the next little widget
we're about to work on, which is give me a little dropdown.
There are some scenarios we're making use of use effect and not properly listing out all the pieces
of state and props inside this array can lead to some really weird and hard to debug problems.
So that rule, that warning that we just saw is all about helping you avoid those kind of hard to understand
problems that can sometimes come up when you're making use of use effect.
So you might look at this and say, hey, the warning went away.
We're good to go.
Everything is working out as expected.
Well, not quite.
You see, even though that rule is very well-intentioned and it does without a doubt, solve some other
problems that might come up down the road, just arbitrarily adding in more elements inside this array
can also lead to some nasty bugs as well.
So either way, you kind of are running into bugs that you have to solve.
Let me show you what the bug is that we just introduced by listing results, not length right here.
All right.
I'm going to open up my network request tab.
And I'm going to refresh the page.
Notice I'm sorted by X H.R. requests right here when I refresh the page.
We immediately see one request issued over to the Wikipedia API, which is definitely what we want.
Remember, that's the whole reason we just added some extra code into use effect.
So we would get that initial search right away when our component first loaded up.
However, you'll notice that now there is a second request being issued as well, that we get request
number one.
And then about a second later, there is request.
Number two.
If we take out that results, not length.
And save this, that does not happen.
We only have the one request.
So by adding in results not linked and hopefully solving some problem or making that Warren go away,
which could possibly lead to a bug down the road.
Oh, we've really done is introduced a bug right now.
So why is that?
Why does adding in results, not length right here, result in the second request?
Well, let's begin by just taking a look at a diagram in understanding why that second request is now
being issued.
All right, Tirico.
So right now, we've got our initial component render when we first render our component to the screen.
We've got these two pieces of state and we are referencing these things inside of that dependancy array.
That's what we really call this array right here as the second argument to use effect.
So we start off with term equal programming and results.
Dot Delplanque equals zero.
Then we immediately run that use effect function or really the function that we provide to use effect.
That's this whole big function we've got inside of you right now.
Inside of there, we say, OK, we've got a term of programming.
We have no results, so let's go ahead and do our search.
Do we do a search right away?
We make that request and then after a very brief period of time, however long it takes to make that
make that request, we get the response back and we update our results piece of state when we update
that piece of state that causes a rerun order of our whole components, which is, of course, what
we want.
We want that to happen.
When we do that, we render we build up our list re display that can put on the screen.
However, immediately after updating that component, we now have some new state.
So we've got term still equal to programming, but now results, not length, has a value of ten.
Remember what we said about use effect?
This array right here controls win the overall or this first argument function provide gets executed.
Whatever elements we put in this array are going to cause that function to be executed again whenever
at least one of these elements change.
So after we fetch our data and results, not length is now updated to 10, REAC says, oh, results,
not length changed.
That is one of the elements inside this.
Right.
A element in that array has changed.
That means we have to rerun that use effect function.
So react is going to automatically rerun this function again.
A little bit too far.
It's going to rerun that function again now, this time.
We have a term and we have some results.
So we're going to go into this else case.
We're going to set up a time out.
And then after one second goes by without us typing anything in, we do another search.
And that is why we see that second request appear in our network request log.
That's why we are seeing two requests.
It is because, well, we are making use of U.S. fact, one of those dependencies, we have lists inside
their results.
That length is changing.
And so we're going to run that function a second time.
So at this point, we have to kind of ask ourselves, is it worth listing results, not length inside
there?
Just to make a warning message go away.
Is it worth it at all?
Well, to be honest with you.
Yes, it is usually worth following that warning message.
Whenever you see that warning up here.
Something inside your console that says, hey, you've got this missing dependancy.
It is usually worth following that rule and solving it and taking whatever they're seeing right here
and adding it into the dependancy array.
However, as you are now seeing very actively by adding that in, we are introducing some other bug.
So how can we somehow list out results not linked inside their make react happy or really this rule
right here happy, but still not do the double fetching?
That's the big question.
How do we add the thing in but not introduce this additional bug?
Well, to do so, this is really the kind of advance part.
This video, like I mentioned, we're going have to make a pretty significant change to the structure
of our search component.
OK, so here's what we're going to do to have results, not length or really, I should say ResultSet
linked list in there.
It's more we're going to make sure that we don't have that warning message.
So this is the kind of advanced part.
Let's take a look at a diagram of what we're gonna do.
OK, so we are going to solve this whole problem by introducing a second piece of state and the second
piece of state is going to keep track of the deep balanced term.
That's it.
We're going to call it the defense term is essentially going to be our kind of time blagged search term.
That doesn't make any sense.
So let's kind of walk through this.
So we're going to say that we have two pieces of state now at our initial component render.
We're going to set term equal to programming as it is right now.
So that is our default value.
And we are going to introduce a second piece of state called D. Balanced term and have that also set
to programming.
We are then going to set up two separate use effect functions.
One is going to watch de bounce term.
The other is going to watch term.
And when I say watch, I mean that we are going to list term as the dependency to one use effect and
deep bounce term as a dependency to the other news effect.
Inside the use effect for Debono term.
That is where we are going to place our request logic inside of this use effect.
We are going to put some request data fetching stuff inside their.
Then let's imagine that a user type something out whenever a user type something.
We're going to run some code to immediately update our term piece of state.
So we're still going to have term being updated instantly exactly as we have it about right now.
However, rather than having a timer setup to make our request, we are going to instead set up a timer
to update the D balanced term piece of state instead.
That's the big difference here.
We are introducing a new piece of state that is only going to be updated after user stops typing four
five hundred milliseconds or a thousand or whatever it is.
Whenever a user type something, update term right away and set up a timer to update DB outs term.
If a user then type something again, just in the next instant, we're going to cancel that previous
timer to update denounced term.
That one right there.
We're going to update our term piece of state and then set up another timer to update denounced term
if a user then stops typing for five hundred milliseconds.
We will execute the timer that we had set up to update that demotes term piece of state.
So we will update denounced term, but we'll update it to maybe you say programming books.
And then because we updated the debono term piece of states.
We're going to Khosravi render.
And we're going to have that use effect that we set up over here to watch the Dean bounce term piece
of states.
We're going have that thing run.
Because we update that piece of states and we're going to fetch some data.
OK, so this diagram here confusing, hard to follow.
So let's write out some code and really see this entire thing in action.
That's what's really gonna help us out.
All right.
So back inside of our editor at the very top of our file, right after our term declaration right here,
we're going to set up D bounced term and set the bounce term.
And we'll give it a default value of whatever term is.
So we could provide a default value here of programming.
As well.
Totally fine.
But if we ever wanted to change the default value that we show inside there, we would have to change
it in two locations.
Then said we'll to save a little bit typing here.
Now we only have to change the default value right there.
And that would change the default value of DB ounce term as well.
And just, you know, D bounced in general.
That is kind of a reference to what we are doing here, where we set up a timer to change something
and then cancel it if we make another change that too soon.
That's what Deve ounces really talking about.
All right, so now we've got that put together.
We're not going to set up two separate use effects.
One use effect is going to watch de bounce term.
And whenever we have a change to debono term, we're going to make a request.
We're going to have another use effect that is going to watch updates to term.
And whenever we have an update to term, we're going to create that timer to update Debono term.
So two separate use effects.
Let's put together the use effect around term first.
We'll create a news effect.
Or the dependancy array we'll put in term like so.
And then we're going to put together that deep bounce logic.
So we're going to get a.
Amer Idee l come from set time out.
We'll put in a delay of 1000.
And whenever we execute this function right here, we are going to update our deep, balanced term.
It will say set deep balanced term to term.
And we will return a cleanup function that is going to cancel that Taimur.
We'll do a clear time out with Taimur I.D..
Yes, that is part one.
So I'm going to take this now or really, if we're taking that, let's go back over toward diagramed
very quickly and see what part of that diagram this use effect solves.
Back over here.
That use fact we just put together is really about this series of actions right here.
So now, anytime that we update term, thanks to user typing inside that input, we're going to set
up a timer to update downstream bounce term.
And if the user then Emili type something else, we're going to cancel the previous timer.
We're going to make our update to term.
But just as we're done before, we're going to set up a new timer to update Debono term.
We are watching term, we set up the timer to update Devens term.
And if a user updates term again, very quickly, we will cancel that time out that we just set and
create a new timer.
So this is what is going to implement the kind of D balancing action and make sure that we do not try
to do our searches immediately.
That's it, USIE fact number one.
We're now going to put together our second use effect function.
Now, the second U.S. fact is me, pretty much similar to the existing one we put together in the previous
videos.
I'm going to write out separately just to make sure everything is crystal clear.
We'll put together use effect.
Inside of your.
As a second argument, we only want to run this thing whenever the component is first rendered or d
bounce term changes.
So we will put D bounce term inside their.
So then inside of here, we want to make a request and we want to search for the term de bounce.
Term.
So for that, we will take the entire search function.
We had defined down here.
I've got the entire search function along with set results right after it.
I'm going to cut that whole thing.
And then put it into the U.S. fact we just put together.
We're going to change as our search right here to use D bounced term instead.
And then finally, remember all we did right here with the search function, we just defined a function
that could be executed.
So we still have to actually execute it whenever this arrow function runs.
The only reason we defined search as a separate function member is because we cannot use async wait
syntax directly inside of a USIE fact functions.
We can't mark the inclosing function right there as async.
That's the only reason we had created the separate function.
So after our search function.
We will call search immediately.
Then finally.
I'm going to clean up the entire use effect function that we had previously defined down here.
To take the entire thing and delete it.
Now, at this point time, I would encourage you to pause the video and just study and just read some
of the code that we have now put together.
So if you start to take a look at this thing, you're going to see, OK.
We've got one use effect that is going to run any time.
Term changes in term is going to change any time user types into that input.
Any time this use effect changes, we're going to queue up a a change to denounce term that is going
to execute in one second.
If a user changes term again too quickly, we will clear the previous time out and set up another timer.
Whenever a change to set down the term actually goes through and is processed, we're going to run the
second use effect we had put together.
Whenever this one runs, we are going to call search that's going to make a request.
Well, then take some results and update our results.
Piece of state.
The other key thing to remember to remember here.
Is that use effect?
This one right here, the second we put together is going to run when ever our component first shows
up on the screen, even though we've got this deep bounce term inside of you.
Remember, U.S. fact, no matter what, always runs.
Whenever we first render our component, whenever we first render our component on screen, we're going
to immediately execute a search.
OK.
So let's save this now.
Let's go back over and test it out.
So I think I've got a little typo.
In my coat, and I could kind of see that I made a misspelling right here in C, I have D bounced.
I've got the C in the incorrect place.
I'm going to fix that typo set.
D bounced term.
That's better.
All save this and then flip back over.
Now, if we open up our console, we're going to see that we do not have any Waring's around use effect
or dependency arrays or anything like that.
And if we refresh our application and take a look at the network request tab, we've only made one single
request.
Now we can start to change this search term, gonna change it from programming over to book.
I want you to make sure that you change whatever term you have here to a distinctly different word as
well.
So I can change programming.
I can type it out really quickly.
Book.
And then after one seconds.
That's the D bouncing action.
We see that additional request has been issued.
Now, why is it important for us to change this to a completely different word?
Well, if we only type out these same word once again, we will be eventually running this set down
term.
We will update our D bounce term piece of state.
But if we write out the exact same word again.
React is going to say, oh, you've got the same word for demotes term.
So it's not going to rerun the use effect function.
So that's why it's critical to make sure that you type out a different word here to actually test making
a second request to watch this.
I have book right now.
If I type in book again really quickly, no additional request has been made because my D bounced term
piece of state is unchanged.
I have to write out some different term here to actually have a search be done.
That's actually fantastic.
It means that if a user types out the same thing once again, we're not going to do another search,
which would really just be inefficient.
They'll put in programming now.
And I do see the additional request made.
And if I put in programming again, no additional request.
OK, so that is it.
Like I said, this was a confusing video.
Understand?
Understanding what is going on with his debate and stuff and bounce term challenging.
It is hard, though, if at this point this stuff is really confusing, really crazy.
Do not sweat it.
Really.
Do not sweat it.
This is some really advanced stuff here.
And I personally would not expect any react engineer to really understand immediately what's going on
unless they are pretty advanced, immediate or advanced engineer.
So someone with some very practical work experience who has been working with react for a while.
I would really not expect to begin or to understand why we created two separate pieces of states.
Having said that, if you do understand what's going on.
Fantastic.
You're in a great spot.
Congratulations, I suppose.
All right, so that is it for our search widget.
So we're not going to take a pause here.
We're gonna come back.
Next video and start to move on to our next widget.