1
00:00:01,130 --> 00:00:04,880
In this video, we're going to make sure that we constrain the number of requests that are made over

2
00:00:04,880 --> 00:00:06,050
to that Google API.

3
00:00:06,550 --> 00:00:10,760
So whenever user types into that input, we don't want to make a request for every single key press.

4
00:00:11,030 --> 00:00:15,800
Instead, we want to wait for the user to stop typing for about five hundred milliseconds or so and

5
00:00:15,800 --> 00:00:17,360
then only after that pause.

6
00:00:17,570 --> 00:00:18,800
Are we going to make a request.

7
00:00:19,550 --> 00:00:23,240
The technique that we're going to use for this is going to be identical to what we did back in that

8
00:00:23,240 --> 00:00:26,150
little search application we put together a little bit ago.

9
00:00:26,720 --> 00:00:30,970
You might recall that there was an optional video during the Wikipedia search widget.

10
00:00:31,490 --> 00:00:37,460
If you did not watch that video, then I would recommend you pause this video right now and either go

11
00:00:37,460 --> 00:00:40,190
watch that one or just continue on with the course.

12
00:00:40,340 --> 00:00:41,960
So this is an optional video.

13
00:00:42,260 --> 00:00:43,970
You do not have to watch it if you don't want to.

14
00:00:44,250 --> 00:00:46,750
And I really only recommend you watch it if you already watch.

15
00:00:46,820 --> 00:00:49,670
The other option, one back on the Wikipedia application.

16
00:00:50,710 --> 00:00:50,930
OK.

17
00:00:50,980 --> 00:00:56,140
So if you're still here, I'm going to assume you watched the Wikipedia search de balance video, that

18
00:00:56,140 --> 00:00:56,670
optional one.

19
00:00:57,580 --> 00:01:01,510
Let's take a look at a diagram and just get a quick reminder on what we did over there and how we're

20
00:01:01,510 --> 00:01:03,580
going to apply it to this translate app.

21
00:01:04,900 --> 00:01:05,180
OK.

22
00:01:05,320 --> 00:01:10,890
So to add in this deep outsing feature, we're going to add in a second piece of state called de bounce

23
00:01:10,900 --> 00:01:11,360
text.

24
00:01:12,180 --> 00:01:15,220
We are then going to create two separate use effect functions.

25
00:01:15,760 --> 00:01:20,230
The first use effect function is going to run whenever the text prop changes.

26
00:01:21,130 --> 00:01:26,410
The second use effect function is only gonna run whenever the DB bounce text is of state changes.

27
00:01:28,560 --> 00:01:32,880
So first off, use effect number one, whenever the text prompt changes.

28
00:01:32,940 --> 00:01:38,190
So, in other words, whenever user types into that text input, we are going to set up a timer to update

29
00:01:38,190 --> 00:01:42,050
the debono piece bounce tax piece of state in five milliseconds.

30
00:01:42,960 --> 00:01:48,330
If the user types into that input again and causes a new value for the text prompt to flow into our

31
00:01:48,330 --> 00:01:52,860
component, we're then going to execute a cleanup function that is going to cancel the timer.

32
00:01:52,890 --> 00:01:53,940
We had previously set.

33
00:01:54,540 --> 00:01:58,860
So in other words, as the user types into that input, we're going to set up a timer and then cancel

34
00:01:58,860 --> 00:02:03,750
it, set up a timer, cancel it, set up a timer, cancel it until the user types, and then pauses

35
00:02:03,810 --> 00:02:05,160
for five hundred milliseconds.

36
00:02:06,030 --> 00:02:10,980
As soon as they pause for that five milliseconds, we will go ahead and execute the update to the D.

37
00:02:10,980 --> 00:02:15,150
Bounced tax piece of state that will update Debono text over here.

38
00:02:15,690 --> 00:02:17,190
And that will cause our use effect.

39
00:02:17,190 --> 00:02:20,700
Number two, to execute inside of use effect number two.

40
00:02:20,910 --> 00:02:24,600
We're going to make a request over to the Google API with the D.

41
00:02:24,600 --> 00:02:27,750
Bounced tax piece of state as the thing that we want to translate.

42
00:02:28,890 --> 00:02:29,350
So that's it.

43
00:02:29,440 --> 00:02:33,910
It really all revolves around the same idea of setting up a timer and canceling it whenever the user

44
00:02:33,940 --> 00:02:34,820
makes another update.

45
00:02:34,840 --> 00:02:38,950
Very quickly, let's go back over to our editor and put this into practice right away.

46
00:02:40,920 --> 00:02:41,070
OK.

47
00:02:41,180 --> 00:02:45,710
So back over here, the first thing we'll do is create a new piece of state called.

48
00:02:46,760 --> 00:02:48,150
D bounced Xed.

49
00:02:48,770 --> 00:02:52,350
And we'll get the set d balanced text setter as well.

50
00:02:54,000 --> 00:02:59,350
And the default value for this is going to be the text grop when our component is first created.

51
00:02:59,380 --> 00:03:00,930
We are going to receive a text prop.

52
00:03:01,330 --> 00:03:04,720
We're going to use that as the default value or divans text.

53
00:03:07,320 --> 00:03:11,370
Next up, we're going to create a use effect function, the use effect, hope that we're going to right

54
00:03:11,370 --> 00:03:16,620
out here is going to be for implementing the number one use effect inside this diagram, the inside

55
00:03:16,620 --> 00:03:16,860
of it.

56
00:03:16,950 --> 00:03:20,700
We're going to set up that timer to update Debono text in five milliseconds.

57
00:03:20,970 --> 00:03:24,630
And we'll make sure that we also return that cleanup function that cancels that timer.

58
00:03:24,900 --> 00:03:27,030
If the user makes an update to that text prop.

59
00:03:28,700 --> 00:03:30,590
So I'm going to define another use effect.

60
00:03:33,620 --> 00:03:39,980
We want to rerun this this hook whenever the Texas prop changes, so I will put in that array and list

61
00:03:39,980 --> 00:03:41,300
out text inside their.

62
00:03:42,860 --> 00:03:49,680
Next up, we will define our timer, so we'll say Timer Idee is set time out.

63
00:03:52,410 --> 00:03:54,370
And I want to run this function right here.

64
00:03:55,180 --> 00:03:58,300
After five hundred milliseconds, so I'll put in five hundred like so.

65
00:04:00,750 --> 00:04:04,890
Then inside that timer, as soon as this function right here actually executes.

66
00:04:04,950 --> 00:04:07,830
So at the five hour milliseconds goes by, we don't cancel this timer.

67
00:04:08,400 --> 00:04:13,410
We want to update our D bounced tax piece of state to whatever text currently is.

68
00:04:13,500 --> 00:04:18,060
So we will say set D bounced text to text.

69
00:04:19,710 --> 00:04:20,380
And then finally.

70
00:04:21,620 --> 00:04:27,350
If the text piece of state changes before that find her milliseconds elapses, we want to cancel that

71
00:04:27,350 --> 00:04:27,740
timer.

72
00:04:28,130 --> 00:04:30,230
So we'll make sure that we return a cleanup function.

73
00:04:31,780 --> 00:04:35,810
And inside there, we will clear our time out of Taimur I.D..

74
00:04:38,790 --> 00:04:40,620
OK, so let's use effect number one.

75
00:04:41,380 --> 00:04:46,170
Now we can implement use a fact number to use effect number two, all we want to do is make the request

76
00:04:46,230 --> 00:04:48,510
using the D bounced text piece of state.

77
00:04:49,400 --> 00:04:53,820
And for that, well, we can really reuse the use effect function that we put together in last video.

78
00:04:55,190 --> 00:04:56,770
So this is already making request.

79
00:04:57,000 --> 00:05:01,290
All we have to do is make sure that it makes request using the D bounce tax piece of state.

80
00:05:02,190 --> 00:05:07,770
We'll find inside the actual requests you were making here where we provide the Q parameter as text

81
00:05:07,860 --> 00:05:09,840
and update that to D bounced.

82
00:05:09,900 --> 00:05:10,380
Text.

83
00:05:11,790 --> 00:05:14,460
And then finally, we're going to make sure that we only run this function.

84
00:05:14,510 --> 00:05:17,840
This use effect, when did bounce text changes.

85
00:05:18,700 --> 00:05:20,310
So we'll go down to that dependancy array.

86
00:05:21,290 --> 00:05:24,800
And update, text to be bounced text.

87
00:05:25,800 --> 00:05:28,840
Now, do we have to do all the same bouncing stuff for language?

88
00:05:29,050 --> 00:05:33,850
Well, probably not, because a user is not going to be changing that language so quickly that we'd

89
00:05:33,850 --> 00:05:35,530
want to limit the number of requests we make.

90
00:05:35,920 --> 00:05:38,970
It's really just the typing action that we would want to somehow limit.

91
00:05:40,000 --> 00:05:40,210
All right.

92
00:05:40,330 --> 00:05:41,050
Let's save this.

93
00:05:41,500 --> 00:05:43,360
Look back over and do a quick test.

94
00:05:45,620 --> 00:05:48,230
We should build to type inside of you or something like hi there.

95
00:05:48,560 --> 00:05:52,760
We don't see any requests being made until we stop typing for five hundred milliseconds.

96
00:05:53,340 --> 00:05:55,790
And so it looks like now I'm only making that one request.

97
00:05:56,240 --> 00:05:56,690
Perfect.

98
00:05:57,380 --> 00:06:02,900
We can also change language and we immediately see the request is made as well, which is definitely

99
00:06:02,900 --> 00:06:03,440
what we want.

100
00:06:03,470 --> 00:06:08,030
We don't want to pause for five milliseconds to wait to do the translation when the user changes the

101
00:06:08,030 --> 00:06:08,570
language.

102
00:06:09,470 --> 00:06:13,010
We can change the language as much as you want and then maybe update the text.

103
00:06:13,070 --> 00:06:15,200
So it's something like, hi there, my friend.

104
00:06:16,300 --> 00:06:19,570
Yep, we got that nice pausing there and then only after the user stops typing.

105
00:06:19,660 --> 00:06:21,310
Do we see the updated translation.

106
00:06:22,440 --> 00:06:22,630
OK.

107
00:06:22,760 --> 00:06:24,200
Let's say this works out pretty well.

108
00:06:25,080 --> 00:06:27,950
Well, that's pretty much it for our little translation widget.

109
00:06:28,340 --> 00:06:32,360
And overall, I would say that is, well, the last widget we needed to put together.

110
00:06:32,870 --> 00:06:37,430
Now, the last thing we do inside this app is put together this navigation bar at the top that will

111
00:06:37,430 --> 00:06:41,000
allow a user to look at all the different widgets that we have now put together.

112
00:06:41,810 --> 00:06:44,960
Let's start to discuss navigation in the next video.