In this video, we're going to make sure that we constrain the number of requests that are made over
to that Google API.
So whenever user types into that input, we don't want to make a request for every single key press.
Instead, we want to wait for the user to stop typing for about five hundred milliseconds or so and
then only after that pause.
Are we going to make a request.
The technique that we're going to use for this is going to be identical to what we did back in that
little search application we put together a little bit ago.
You might recall that there was an optional video during the Wikipedia search widget.
If you did not watch that video, then I would recommend you pause this video right now and either go
watch that one or just continue on with the course.
So this is an optional video.
You do not have to watch it if you don't want to.
And I really only recommend you watch it if you already watch.
The other option, one back on the Wikipedia application.
OK.
So if you're still here, I'm going to assume you watched the Wikipedia search de balance video, that
optional one.
Let's take a look at a diagram and just get a quick reminder on what we did over there and how we're
going to apply it to this translate app.
OK.
So to add in this deep outsing feature, we're going to add in a second piece of state called de bounce
text.
We are then going to create two separate use effect functions.
The first use effect function is going to run whenever the text prop changes.
The second use effect function is only gonna run whenever the DB bounce text is of state changes.
So first off, use effect number one, whenever the text prompt changes.
So, in other words, whenever user types into that text input, we are going to set up a timer to update
the debono piece bounce tax piece of state in five milliseconds.
If the user types into that input again and causes a new value for the text prompt to flow into our
component, we're then going to execute a cleanup function that is going to cancel the timer.
We had previously set.
So in other words, as the user types into that input, we're going to set up a timer and then cancel
it, set up a timer, cancel it, set up a timer, cancel it until the user types, and then pauses
for five hundred milliseconds.
As soon as they pause for that five milliseconds, we will go ahead and execute the update to the D.
Bounced tax piece of state that will update Debono text over here.
And that will cause our use effect.
Number two, to execute inside of use effect number two.
We're going to make a request over to the Google API with the D.
Bounced tax piece of state as the thing that we want to translate.
So that's it.
It really all revolves around the same idea of setting up a timer and canceling it whenever the user
makes another update.
Very quickly, let's go back over to our editor and put this into practice right away.
OK.
So back over here, the first thing we'll do is create a new piece of state called.
D bounced Xed.
And we'll get the set d balanced text setter as well.
And the default value for this is going to be the text grop when our component is first created.
We are going to receive a text prop.
We're going to use that as the default value or divans text.
Next up, we're going to create a use effect function, the use effect, hope that we're going to right
out here is going to be for implementing the number one use effect inside this diagram, the inside
of it.
We're going to set up that timer to update Debono text in five milliseconds.
And we'll make sure that we also return that cleanup function that cancels that timer.
If the user makes an update to that text prop.
So I'm going to define another use effect.
We want to rerun this this hook whenever the Texas prop changes, so I will put in that array and list
out text inside their.
Next up, we will define our timer, so we'll say Timer Idee is set time out.
And I want to run this function right here.
After five hundred milliseconds, so I'll put in five hundred like so.
Then inside that timer, as soon as this function right here actually executes.
So at the five hour milliseconds goes by, we don't cancel this timer.
We want to update our D bounced tax piece of state to whatever text currently is.
So we will say set D bounced text to text.
And then finally.
If the text piece of state changes before that find her milliseconds elapses, we want to cancel that
timer.
So we'll make sure that we return a cleanup function.
And inside there, we will clear our time out of Taimur I.D..
OK, so let's use effect number one.
Now we can implement use a fact number to use effect number two, all we want to do is make the request
using the D bounced text piece of state.
And for that, well, we can really reuse the use effect function that we put together in last video.
So this is already making request.
All we have to do is make sure that it makes request using the D bounce tax piece of state.
We'll find inside the actual requests you were making here where we provide the Q parameter as text
and update that to D bounced.
Text.
And then finally, we're going to make sure that we only run this function.
This use effect, when did bounce text changes.
So we'll go down to that dependancy array.
And update, text to be bounced text.
Now, do we have to do all the same bouncing stuff for language?
Well, probably not, because a user is not going to be changing that language so quickly that we'd
want to limit the number of requests we make.
It's really just the typing action that we would want to somehow limit.
All right.
Let's save this.
Look back over and do a quick test.
We should build to type inside of you or something like hi there.
We don't see any requests being made until we stop typing for five hundred milliseconds.
And so it looks like now I'm only making that one request.
Perfect.
We can also change language and we immediately see the request is made as well, which is definitely
what we want.
We don't want to pause for five milliseconds to wait to do the translation when the user changes the
language.
We can change the language as much as you want and then maybe update the text.
So it's something like, hi there, my friend.
Yep, we got that nice pausing there and then only after the user stops typing.
Do we see the updated translation.
OK.
Let's say this works out pretty well.
Well, that's pretty much it for our little translation widget.
And overall, I would say that is, well, the last widget we needed to put together.
Now, the last thing we do inside this app is put together this navigation bar at the top that will
allow a user to look at all the different widgets that we have now put together.
Let's start to discuss navigation in the next video.