1
00:00:01,390 --> 00:00:03,910
Well, it looks like our search component is working out pretty well.

2
00:00:04,000 --> 00:00:09,520
However, you might notice that if we go back over to our application and take a look at the console,

3
00:00:09,640 --> 00:00:11,650
we now have an extra warning inside of here.

4
00:00:12,190 --> 00:00:15,480
We, of course, still have some warnings around, some cookie stuff, which is totally fine.

5
00:00:15,490 --> 00:00:16,240
We can ignore that.

6
00:00:16,450 --> 00:00:17,740
We have some unused variables.

7
00:00:17,850 --> 00:00:19,030
We find we can ignore that.

8
00:00:19,290 --> 00:00:25,360
But we have a new warning right here around react use effect has a missing dependency on this video.

9
00:00:25,420 --> 00:00:29,110
We're going to figure out why we are getting this message and we're going to walk through a solution

10
00:00:29,110 --> 00:00:29,530
to it.

11
00:00:30,130 --> 00:00:35,290
Now, I got to tell you right now, this video is optional in nature is can be really tough to get through.

12
00:00:35,350 --> 00:00:39,010
And we're going to look at a hard to solve problem around use effect.

13
00:00:39,520 --> 00:00:41,110
This is some really advanced stuff.

14
00:00:41,140 --> 00:00:41,950
I'm about to show you.

15
00:00:42,280 --> 00:00:46,570
So the reason it is optional is because it's going to be really, really hard content, essentially

16
00:00:46,570 --> 00:00:47,230
kind of hard stuff.

17
00:00:47,230 --> 00:00:49,750
To understand the topic I'm going to show you.

18
00:00:49,840 --> 00:00:53,110
We're going to eventually kind of naturally cover later on inside the course.

19
00:00:53,440 --> 00:00:54,610
This is just kind of a preview.

20
00:00:54,980 --> 00:00:58,580
So if all this user effects stuff is really confusing right now, don't sweat it.

21
00:00:58,600 --> 00:01:01,210
Just pause this video right now and continue on to the next one.

22
00:01:01,570 --> 00:01:03,970
Everything I've showed you up to this point is 100 percent accurate.

23
00:01:04,000 --> 00:01:05,980
And you really can continue on from here.

24
00:01:06,540 --> 00:01:08,980
But if you want to get this extra knowledge run news effect.

25
00:01:09,330 --> 00:01:09,600
Right.

26
00:01:09,640 --> 00:01:10,270
Stick around.

27
00:01:10,450 --> 00:01:11,020
Let's get to it.

28
00:01:12,210 --> 00:01:16,140
Now, this is gonna be a long video because I'm gonna try to show you everything you need to know inside

29
00:01:16,140 --> 00:01:18,330
this one video rather than split out into separate.

30
00:01:19,040 --> 00:01:19,260
OK.

31
00:01:19,320 --> 00:01:23,460
So back to this warning message right here, though, again, says something like U.S. fact has a missing

32
00:01:23,460 --> 00:01:28,020
dependancy and then blah, blah included or remove the dependancy array.

33
00:01:28,380 --> 00:01:30,090
First off, what is this really talking about?

34
00:01:30,810 --> 00:01:33,840
Well, we are making use of use of fact right here.

35
00:01:34,410 --> 00:01:39,090
And whenever you make use of U.S. fact, you will very frequently once refer to some variables that

36
00:01:39,090 --> 00:01:42,240
are declared as props or state inside of your component.

37
00:01:42,900 --> 00:01:44,790
We are already doing that with term right here.

38
00:01:44,910 --> 00:01:48,390
That is a piece of state that we are referring to inside of our use effect function.

39
00:01:49,200 --> 00:01:52,980
In the last video, we also just added in a reference to results, not length.

40
00:01:53,400 --> 00:01:54,960
Also a piece of state.

41
00:01:55,770 --> 00:02:03,600
Anytime that you refer to a prop or a piece of state inside of use effect react or specifically a rule

42
00:02:03,660 --> 00:02:08,700
built into it, create, react app or even more specifically, something called yes, lint is going

43
00:02:08,700 --> 00:02:14,700
to want you to reference any different prop or piece of state inside of the use effect.

44
00:02:14,730 --> 00:02:17,030
Dependency array, the defense.

45
00:02:17,080 --> 00:02:17,300
Right.

46
00:02:17,460 --> 00:02:18,750
Is this thing right here?

47
00:02:18,810 --> 00:02:21,840
It is the array that controls when use effect gets executed.

48
00:02:23,220 --> 00:02:29,300
So if you ever make reference to a piece of state or props, that rule wants you to see it listed inside

49
00:02:29,330 --> 00:02:29,840
of this array.

50
00:02:29,870 --> 00:02:34,220
And remember, that array is all about deciding when to rerun, are using fact function.

51
00:02:35,260 --> 00:02:39,230
Though right now, without worrying about why that warning message is there, let's just try adding

52
00:02:39,230 --> 00:02:40,790
in results, not length.

53
00:02:41,860 --> 00:02:44,830
And see if that makes a little warning message go away so I can put that in.

54
00:02:45,220 --> 00:02:46,630
Look back over and sure enough.

55
00:02:46,660 --> 00:02:47,620
Now the warning is gone.

56
00:02:48,370 --> 00:02:50,800
So why does that rule want us to put that in there?

57
00:02:51,340 --> 00:02:55,210
Well, as you're going to see in our next application or not, the next app, the next little widget

58
00:02:55,210 --> 00:02:57,280
we're about to work on, which is give me a little dropdown.

59
00:02:57,640 --> 00:03:02,980
There are some scenarios we're making use of use effect and not properly listing out all the pieces

60
00:03:02,980 --> 00:03:08,800
of state and props inside this array can lead to some really weird and hard to debug problems.

61
00:03:09,730 --> 00:03:15,040
So that rule, that warning that we just saw is all about helping you avoid those kind of hard to understand

62
00:03:15,040 --> 00:03:18,610
problems that can sometimes come up when you're making use of use effect.

63
00:03:19,370 --> 00:03:21,700
So you might look at this and say, hey, the warning went away.

64
00:03:21,710 --> 00:03:22,600
We're good to go.

65
00:03:22,630 --> 00:03:24,370
Everything is working out as expected.

66
00:03:24,910 --> 00:03:26,080
Well, not quite.

67
00:03:26,440 --> 00:03:31,570
You see, even though that rule is very well-intentioned and it does without a doubt, solve some other

68
00:03:31,570 --> 00:03:36,610
problems that might come up down the road, just arbitrarily adding in more elements inside this array

69
00:03:36,640 --> 00:03:39,370
can also lead to some nasty bugs as well.

70
00:03:39,850 --> 00:03:43,450
So either way, you kind of are running into bugs that you have to solve.

71
00:03:44,320 --> 00:03:48,970
Let me show you what the bug is that we just introduced by listing results, not length right here.

72
00:03:50,940 --> 00:03:51,240
All right.

73
00:03:51,330 --> 00:03:53,080
I'm going to open up my network request tab.

74
00:03:54,700 --> 00:03:56,320
And I'm going to refresh the page.

75
00:03:57,190 --> 00:04:01,090
Notice I'm sorted by X H.R. requests right here when I refresh the page.

76
00:04:01,240 --> 00:04:06,370
We immediately see one request issued over to the Wikipedia API, which is definitely what we want.

77
00:04:06,430 --> 00:04:09,850
Remember, that's the whole reason we just added some extra code into use effect.

78
00:04:10,300 --> 00:04:13,720
So we would get that initial search right away when our component first loaded up.

79
00:04:14,410 --> 00:04:21,520
However, you'll notice that now there is a second request being issued as well, that we get request

80
00:04:21,520 --> 00:04:22,030
number one.

81
00:04:22,480 --> 00:04:25,240
And then about a second later, there is request.

82
00:04:25,300 --> 00:04:25,990
Number two.

83
00:04:27,120 --> 00:04:29,070
If we take out that results, not length.

84
00:04:32,790 --> 00:04:34,870
And save this, that does not happen.

85
00:04:34,890 --> 00:04:36,420
We only have the one request.

86
00:04:36,960 --> 00:04:42,360
So by adding in results not linked and hopefully solving some problem or making that Warren go away,

87
00:04:42,600 --> 00:04:44,640
which could possibly lead to a bug down the road.

88
00:04:44,940 --> 00:04:47,760
Oh, we've really done is introduced a bug right now.

89
00:04:48,270 --> 00:04:49,130
So why is that?

90
00:04:49,140 --> 00:04:53,190
Why does adding in results, not length right here, result in the second request?

91
00:04:53,640 --> 00:04:57,750
Well, let's begin by just taking a look at a diagram in understanding why that second request is now

92
00:04:57,750 --> 00:04:58,410
being issued.

93
00:04:59,600 --> 00:05:00,410
All right, Tirico.

94
00:05:02,850 --> 00:05:07,600
So right now, we've got our initial component render when we first render our component to the screen.

95
00:05:07,650 --> 00:05:12,980
We've got these two pieces of state and we are referencing these things inside of that dependancy array.

96
00:05:13,060 --> 00:05:17,040
That's what we really call this array right here as the second argument to use effect.

97
00:05:17,670 --> 00:05:20,490
So we start off with term equal programming and results.

98
00:05:20,490 --> 00:05:21,630
Dot Delplanque equals zero.

99
00:05:22,350 --> 00:05:27,810
Then we immediately run that use effect function or really the function that we provide to use effect.

100
00:05:28,200 --> 00:05:30,600
That's this whole big function we've got inside of you right now.

101
00:05:32,230 --> 00:05:35,410
Inside of there, we say, OK, we've got a term of programming.

102
00:05:35,860 --> 00:05:38,890
We have no results, so let's go ahead and do our search.

103
00:05:40,720 --> 00:05:41,960
Do we do a search right away?

104
00:05:41,990 --> 00:05:46,520
We make that request and then after a very brief period of time, however long it takes to make that

105
00:05:46,700 --> 00:05:53,510
make that request, we get the response back and we update our results piece of state when we update

106
00:05:53,510 --> 00:05:57,560
that piece of state that causes a rerun order of our whole components, which is, of course, what

107
00:05:57,560 --> 00:05:57,920
we want.

108
00:05:57,950 --> 00:05:58,940
We want that to happen.

109
00:05:59,480 --> 00:06:03,680
When we do that, we render we build up our list re display that can put on the screen.

110
00:06:04,250 --> 00:06:08,570
However, immediately after updating that component, we now have some new state.

111
00:06:08,630 --> 00:06:15,250
So we've got term still equal to programming, but now results, not length, has a value of ten.

112
00:06:16,250 --> 00:06:17,900
Remember what we said about use effect?

113
00:06:18,460 --> 00:06:24,680
This array right here controls win the overall or this first argument function provide gets executed.

114
00:06:25,550 --> 00:06:30,920
Whatever elements we put in this array are going to cause that function to be executed again whenever

115
00:06:31,010 --> 00:06:33,740
at least one of these elements change.

116
00:06:35,100 --> 00:06:41,850
So after we fetch our data and results, not length is now updated to 10, REAC says, oh, results,

117
00:06:41,850 --> 00:06:42,680
not length changed.

118
00:06:42,960 --> 00:06:44,700
That is one of the elements inside this.

119
00:06:44,700 --> 00:06:45,030
Right.

120
00:06:45,210 --> 00:06:46,830
A element in that array has changed.

121
00:06:47,130 --> 00:06:50,550
That means we have to rerun that use effect function.

122
00:06:51,590 --> 00:06:54,860
So react is going to automatically rerun this function again.

123
00:06:56,450 --> 00:06:57,240
A little bit too far.

124
00:06:57,500 --> 00:06:59,940
It's going to rerun that function again now, this time.

125
00:07:00,480 --> 00:07:02,940
We have a term and we have some results.

126
00:07:03,390 --> 00:07:04,890
So we're going to go into this else case.

127
00:07:05,340 --> 00:07:06,640
We're going to set up a time out.

128
00:07:07,230 --> 00:07:12,420
And then after one second goes by without us typing anything in, we do another search.

129
00:07:12,720 --> 00:07:16,950
And that is why we see that second request appear in our network request log.

130
00:07:18,400 --> 00:07:19,990
That's why we are seeing two requests.

131
00:07:20,200 --> 00:07:24,880
It is because, well, we are making use of U.S. fact, one of those dependencies, we have lists inside

132
00:07:24,880 --> 00:07:25,390
their results.

133
00:07:25,400 --> 00:07:26,410
That length is changing.

134
00:07:26,440 --> 00:07:29,050
And so we're going to run that function a second time.

135
00:07:29,900 --> 00:07:35,680
So at this point, we have to kind of ask ourselves, is it worth listing results, not length inside

136
00:07:35,680 --> 00:07:35,870
there?

137
00:07:35,950 --> 00:07:37,840
Just to make a warning message go away.

138
00:07:38,230 --> 00:07:39,130
Is it worth it at all?

139
00:07:39,850 --> 00:07:41,290
Well, to be honest with you.

140
00:07:41,680 --> 00:07:44,740
Yes, it is usually worth following that warning message.

141
00:07:45,220 --> 00:07:46,600
Whenever you see that warning up here.

142
00:07:48,590 --> 00:07:52,060
Something inside your console that says, hey, you've got this missing dependancy.

143
00:07:52,250 --> 00:07:57,440
It is usually worth following that rule and solving it and taking whatever they're seeing right here

144
00:07:57,440 --> 00:07:59,210
and adding it into the dependancy array.

145
00:08:00,080 --> 00:08:05,930
However, as you are now seeing very actively by adding that in, we are introducing some other bug.

146
00:08:06,650 --> 00:08:12,650
So how can we somehow list out results not linked inside their make react happy or really this rule

147
00:08:12,680 --> 00:08:15,940
right here happy, but still not do the double fetching?

148
00:08:16,340 --> 00:08:17,180
That's the big question.

149
00:08:17,240 --> 00:08:20,600
How do we add the thing in but not introduce this additional bug?

150
00:08:21,260 --> 00:08:24,100
Well, to do so, this is really the kind of advance part.

151
00:08:24,100 --> 00:08:28,670
This video, like I mentioned, we're going have to make a pretty significant change to the structure

152
00:08:28,730 --> 00:08:30,140
of our search component.

153
00:08:30,590 --> 00:08:35,850
OK, so here's what we're going to do to have results, not length or really, I should say ResultSet

154
00:08:35,870 --> 00:08:36,560
linked list in there.

155
00:08:36,560 --> 00:08:39,320
It's more we're going to make sure that we don't have that warning message.

156
00:08:39,950 --> 00:08:41,630
So this is the kind of advanced part.

157
00:08:41,810 --> 00:08:43,720
Let's take a look at a diagram of what we're gonna do.

158
00:08:45,860 --> 00:08:52,160
OK, so we are going to solve this whole problem by introducing a second piece of state and the second

159
00:08:52,160 --> 00:08:55,700
piece of state is going to keep track of the deep balanced term.

160
00:08:55,730 --> 00:08:55,950
That's it.

161
00:08:55,950 --> 00:09:02,180
We're going to call it the defense term is essentially going to be our kind of time blagged search term.

162
00:09:02,690 --> 00:09:03,490
That doesn't make any sense.

163
00:09:03,510 --> 00:09:04,790
So let's kind of walk through this.

164
00:09:05,660 --> 00:09:09,650
So we're going to say that we have two pieces of state now at our initial component render.

165
00:09:09,920 --> 00:09:13,190
We're going to set term equal to programming as it is right now.

166
00:09:13,220 --> 00:09:14,630
So that is our default value.

167
00:09:14,970 --> 00:09:20,390
And we are going to introduce a second piece of state called D. Balanced term and have that also set

168
00:09:20,390 --> 00:09:21,020
to programming.

169
00:09:22,100 --> 00:09:25,760
We are then going to set up two separate use effect functions.

170
00:09:26,360 --> 00:09:28,370
One is going to watch de bounce term.

171
00:09:28,940 --> 00:09:30,690
The other is going to watch term.

172
00:09:30,830 --> 00:09:35,990
And when I say watch, I mean that we are going to list term as the dependency to one use effect and

173
00:09:35,990 --> 00:09:38,900
deep bounce term as a dependency to the other news effect.

174
00:09:40,250 --> 00:09:42,290
Inside the use effect for Debono term.

175
00:09:42,420 --> 00:09:46,980
That is where we are going to place our request logic inside of this use effect.

176
00:09:47,010 --> 00:09:50,520
We are going to put some request data fetching stuff inside their.

177
00:09:53,930 --> 00:09:57,740
Then let's imagine that a user type something out whenever a user type something.

178
00:09:57,890 --> 00:10:01,580
We're going to run some code to immediately update our term piece of state.

179
00:10:01,910 --> 00:10:06,380
So we're still going to have term being updated instantly exactly as we have it about right now.

180
00:10:07,130 --> 00:10:12,830
However, rather than having a timer setup to make our request, we are going to instead set up a timer

181
00:10:13,040 --> 00:10:16,700
to update the D balanced term piece of state instead.

182
00:10:17,300 --> 00:10:18,320
That's the big difference here.

183
00:10:18,350 --> 00:10:24,210
We are introducing a new piece of state that is only going to be updated after user stops typing four

184
00:10:24,230 --> 00:10:26,690
five hundred milliseconds or a thousand or whatever it is.

185
00:10:27,750 --> 00:10:32,670
Whenever a user type something, update term right away and set up a timer to update DB outs term.

186
00:10:33,680 --> 00:10:37,760
If a user then type something again, just in the next instant, we're going to cancel that previous

187
00:10:37,760 --> 00:10:39,590
timer to update denounced term.

188
00:10:41,980 --> 00:10:42,700
That one right there.

189
00:10:43,420 --> 00:10:48,880
We're going to update our term piece of state and then set up another timer to update denounced term

190
00:10:49,680 --> 00:10:52,330
if a user then stops typing for five hundred milliseconds.

191
00:10:53,110 --> 00:10:57,310
We will execute the timer that we had set up to update that demotes term piece of state.

192
00:10:57,770 --> 00:11:01,660
So we will update denounced term, but we'll update it to maybe you say programming books.

193
00:11:03,440 --> 00:11:06,260
And then because we updated the debono term piece of states.

194
00:11:07,390 --> 00:11:08,560
We're going to Khosravi render.

195
00:11:09,460 --> 00:11:14,260
And we're going to have that use effect that we set up over here to watch the Dean bounce term piece

196
00:11:14,260 --> 00:11:14,700
of states.

197
00:11:14,740 --> 00:11:15,760
We're going have that thing run.

198
00:11:17,240 --> 00:11:20,050
Because we update that piece of states and we're going to fetch some data.

199
00:11:21,230 --> 00:11:24,380
OK, so this diagram here confusing, hard to follow.

200
00:11:24,650 --> 00:11:28,100
So let's write out some code and really see this entire thing in action.

201
00:11:28,130 --> 00:11:29,450
That's what's really gonna help us out.

202
00:11:30,350 --> 00:11:30,560
All right.

203
00:11:30,590 --> 00:11:36,920
So back inside of our editor at the very top of our file, right after our term declaration right here,

204
00:11:37,720 --> 00:11:42,950
we're going to set up D bounced term and set the bounce term.

205
00:11:44,850 --> 00:11:47,950
And we'll give it a default value of whatever term is.

206
00:11:48,590 --> 00:11:51,490
So we could provide a default value here of programming.

207
00:11:53,140 --> 00:11:53,560
As well.

208
00:11:53,620 --> 00:11:54,280
Totally fine.

209
00:11:54,670 --> 00:11:58,330
But if we ever wanted to change the default value that we show inside there, we would have to change

210
00:11:58,330 --> 00:11:59,380
it in two locations.

211
00:11:59,770 --> 00:12:01,900
Then said we'll to save a little bit typing here.

212
00:12:01,930 --> 00:12:04,150
Now we only have to change the default value right there.

213
00:12:04,390 --> 00:12:07,120
And that would change the default value of DB ounce term as well.

214
00:12:07,770 --> 00:12:09,940
And just, you know, D bounced in general.

215
00:12:10,030 --> 00:12:13,990
That is kind of a reference to what we are doing here, where we set up a timer to change something

216
00:12:14,290 --> 00:12:16,930
and then cancel it if we make another change that too soon.

217
00:12:16,990 --> 00:12:18,670
That's what Deve ounces really talking about.

218
00:12:19,960 --> 00:12:21,310
All right, so now we've got that put together.

219
00:12:21,640 --> 00:12:24,340
We're not going to set up two separate use effects.

220
00:12:24,910 --> 00:12:27,820
One use effect is going to watch de bounce term.

221
00:12:28,270 --> 00:12:32,080
And whenever we have a change to debono term, we're going to make a request.

222
00:12:32,830 --> 00:12:36,610
We're going to have another use effect that is going to watch updates to term.

223
00:12:37,030 --> 00:12:41,650
And whenever we have an update to term, we're going to create that timer to update Debono term.

224
00:12:41,710 --> 00:12:43,030
So two separate use effects.

225
00:12:43,900 --> 00:12:47,530
Let's put together the use effect around term first.

226
00:12:49,640 --> 00:12:50,670
We'll create a news effect.

227
00:12:52,340 --> 00:12:54,500
Or the dependancy array we'll put in term like so.

228
00:12:55,640 --> 00:12:58,020
And then we're going to put together that deep bounce logic.

229
00:12:58,680 --> 00:12:59,970
So we're going to get a.

230
00:13:02,210 --> 00:13:05,300
Amer Idee l come from set time out.

231
00:13:07,820 --> 00:13:09,520
We'll put in a delay of 1000.

232
00:13:10,950 --> 00:13:16,510
And whenever we execute this function right here, we are going to update our deep, balanced term.

233
00:13:16,810 --> 00:13:20,120
It will say set deep balanced term to term.

234
00:13:22,950 --> 00:13:26,080
And we will return a cleanup function that is going to cancel that Taimur.

235
00:13:28,300 --> 00:13:32,260
We'll do a clear time out with Taimur I.D..

236
00:13:33,830 --> 00:13:34,810
Yes, that is part one.

237
00:13:36,520 --> 00:13:40,090
So I'm going to take this now or really, if we're taking that, let's go back over toward diagramed

238
00:13:40,090 --> 00:13:43,780
very quickly and see what part of that diagram this use effect solves.

239
00:13:44,620 --> 00:13:45,250
Back over here.

240
00:13:45,490 --> 00:13:50,230
That use fact we just put together is really about this series of actions right here.

241
00:13:50,860 --> 00:13:54,580
So now, anytime that we update term, thanks to user typing inside that input, we're going to set

242
00:13:54,580 --> 00:13:56,170
up a timer to update downstream bounce term.

243
00:13:56,860 --> 00:14:00,340
And if the user then Emili type something else, we're going to cancel the previous timer.

244
00:14:00,910 --> 00:14:03,010
We're going to make our update to term.

245
00:14:03,250 --> 00:14:08,050
But just as we're done before, we're going to set up a new timer to update Debono term.

246
00:14:09,260 --> 00:14:12,860
We are watching term, we set up the timer to update Devens term.

247
00:14:13,880 --> 00:14:18,650
And if a user updates term again, very quickly, we will cancel that time out that we just set and

248
00:14:18,650 --> 00:14:19,490
create a new timer.

249
00:14:20,300 --> 00:14:24,660
So this is what is going to implement the kind of D balancing action and make sure that we do not try

250
00:14:24,660 --> 00:14:26,120
to do our searches immediately.

251
00:14:27,200 --> 00:14:28,550
That's it, USIE fact number one.

252
00:14:28,850 --> 00:14:31,220
We're now going to put together our second use effect function.

253
00:14:31,600 --> 00:14:35,300
Now, the second U.S. fact is me, pretty much similar to the existing one we put together in the previous

254
00:14:35,300 --> 00:14:35,780
videos.

255
00:14:36,080 --> 00:14:38,690
I'm going to write out separately just to make sure everything is crystal clear.

256
00:14:39,810 --> 00:14:41,130
We'll put together use effect.

257
00:14:43,950 --> 00:14:44,640
Inside of your.

258
00:14:45,650 --> 00:14:51,650
As a second argument, we only want to run this thing whenever the component is first rendered or d

259
00:14:51,650 --> 00:14:52,730
bounce term changes.

260
00:14:53,300 --> 00:14:55,760
So we will put D bounce term inside their.

261
00:14:59,550 --> 00:15:04,450
So then inside of here, we want to make a request and we want to search for the term de bounce.

262
00:15:04,510 --> 00:15:04,870
Term.

263
00:15:06,020 --> 00:15:08,270
So for that, we will take the entire search function.

264
00:15:08,420 --> 00:15:10,300
We had defined down here.

265
00:15:12,450 --> 00:15:15,590
I've got the entire search function along with set results right after it.

266
00:15:15,930 --> 00:15:16,970
I'm going to cut that whole thing.

267
00:15:18,480 --> 00:15:20,420
And then put it into the U.S. fact we just put together.

268
00:15:24,620 --> 00:15:29,990
We're going to change as our search right here to use D bounced term instead.

269
00:15:32,310 --> 00:15:36,280
And then finally, remember all we did right here with the search function, we just defined a function

270
00:15:36,280 --> 00:15:37,570
that could be executed.

271
00:15:38,090 --> 00:15:41,710
So we still have to actually execute it whenever this arrow function runs.

272
00:15:42,190 --> 00:15:46,420
The only reason we defined search as a separate function member is because we cannot use async wait

273
00:15:46,420 --> 00:15:50,020
syntax directly inside of a USIE fact functions.

274
00:15:50,050 --> 00:15:52,430
We can't mark the inclosing function right there as async.

275
00:15:52,750 --> 00:15:55,000
That's the only reason we had created the separate function.

276
00:15:56,160 --> 00:15:57,870
So after our search function.

277
00:15:59,180 --> 00:16:01,190
We will call search immediately.

278
00:16:02,890 --> 00:16:03,460
Then finally.

279
00:16:04,760 --> 00:16:09,360
I'm going to clean up the entire use effect function that we had previously defined down here.

280
00:16:10,100 --> 00:16:12,390
To take the entire thing and delete it.

281
00:16:13,850 --> 00:16:18,950
Now, at this point time, I would encourage you to pause the video and just study and just read some

282
00:16:18,950 --> 00:16:20,480
of the code that we have now put together.

283
00:16:22,870 --> 00:16:25,200
So if you start to take a look at this thing, you're going to see, OK.

284
00:16:25,270 --> 00:16:28,600
We've got one use effect that is going to run any time.

285
00:16:28,690 --> 00:16:32,620
Term changes in term is going to change any time user types into that input.

286
00:16:33,190 --> 00:16:40,570
Any time this use effect changes, we're going to queue up a a change to denounce term that is going

287
00:16:40,570 --> 00:16:42,010
to execute in one second.

288
00:16:42,850 --> 00:16:47,890
If a user changes term again too quickly, we will clear the previous time out and set up another timer.

289
00:16:49,400 --> 00:16:55,400
Whenever a change to set down the term actually goes through and is processed, we're going to run the

290
00:16:55,400 --> 00:16:57,310
second use effect we had put together.

291
00:16:58,870 --> 00:17:04,150
Whenever this one runs, we are going to call search that's going to make a request.

292
00:17:04,600 --> 00:17:07,120
Well, then take some results and update our results.

293
00:17:07,120 --> 00:17:07,810
Piece of state.

294
00:17:08,770 --> 00:17:10,750
The other key thing to remember to remember here.

295
00:17:12,240 --> 00:17:13,720
Is that use effect?

296
00:17:14,070 --> 00:17:18,630
This one right here, the second we put together is going to run when ever our component first shows

297
00:17:18,630 --> 00:17:21,810
up on the screen, even though we've got this deep bounce term inside of you.

298
00:17:21,810 --> 00:17:24,780
Remember, U.S. fact, no matter what, always runs.

299
00:17:25,020 --> 00:17:29,790
Whenever we first render our component, whenever we first render our component on screen, we're going

300
00:17:29,790 --> 00:17:31,740
to immediately execute a search.

301
00:17:32,970 --> 00:17:33,120
OK.

302
00:17:33,310 --> 00:17:34,200
So let's save this now.

303
00:17:35,070 --> 00:17:36,930
Let's go back over and test it out.

304
00:17:37,630 --> 00:17:39,180
So I think I've got a little typo.

305
00:17:40,490 --> 00:17:46,660
In my coat, and I could kind of see that I made a misspelling right here in C, I have D bounced.

306
00:17:46,700 --> 00:17:48,580
I've got the C in the incorrect place.

307
00:17:48,630 --> 00:17:49,950
I'm going to fix that typo set.

308
00:17:49,970 --> 00:17:51,040
D bounced term.

309
00:17:51,470 --> 00:17:51,890
That's better.

310
00:17:52,920 --> 00:17:55,140
All save this and then flip back over.

311
00:17:56,230 --> 00:18:01,240
Now, if we open up our console, we're going to see that we do not have any Waring's around use effect

312
00:18:01,270 --> 00:18:03,190
or dependency arrays or anything like that.

313
00:18:03,850 --> 00:18:08,890
And if we refresh our application and take a look at the network request tab, we've only made one single

314
00:18:08,890 --> 00:18:09,430
request.

315
00:18:10,420 --> 00:18:16,210
Now we can start to change this search term, gonna change it from programming over to book.

316
00:18:16,930 --> 00:18:21,070
I want you to make sure that you change whatever term you have here to a distinctly different word as

317
00:18:21,070 --> 00:18:21,370
well.

318
00:18:22,000 --> 00:18:22,870
So I can change programming.

319
00:18:22,900 --> 00:18:24,040
I can type it out really quickly.

320
00:18:24,430 --> 00:18:24,730
Book.

321
00:18:25,290 --> 00:18:26,610
And then after one seconds.

322
00:18:26,860 --> 00:18:28,000
That's the D bouncing action.

323
00:18:28,270 --> 00:18:30,820
We see that additional request has been issued.

324
00:18:31,600 --> 00:18:34,870
Now, why is it important for us to change this to a completely different word?

325
00:18:35,470 --> 00:18:41,700
Well, if we only type out these same word once again, we will be eventually running this set down

326
00:18:41,740 --> 00:18:41,970
term.

327
00:18:41,980 --> 00:18:44,200
We will update our D bounce term piece of state.

328
00:18:44,590 --> 00:18:46,690
But if we write out the exact same word again.

329
00:18:47,010 --> 00:18:50,300
React is going to say, oh, you've got the same word for demotes term.

330
00:18:50,350 --> 00:18:53,130
So it's not going to rerun the use effect function.

331
00:18:53,200 --> 00:18:57,370
So that's why it's critical to make sure that you type out a different word here to actually test making

332
00:18:57,400 --> 00:18:59,500
a second request to watch this.

333
00:18:59,590 --> 00:19:00,730
I have book right now.

334
00:19:01,090 --> 00:19:06,850
If I type in book again really quickly, no additional request has been made because my D bounced term

335
00:19:06,850 --> 00:19:08,770
piece of state is unchanged.

336
00:19:09,340 --> 00:19:12,940
I have to write out some different term here to actually have a search be done.

337
00:19:13,390 --> 00:19:14,380
That's actually fantastic.

338
00:19:14,410 --> 00:19:18,160
It means that if a user types out the same thing once again, we're not going to do another search,

339
00:19:18,220 --> 00:19:19,930
which would really just be inefficient.

340
00:19:20,710 --> 00:19:21,820
They'll put in programming now.

341
00:19:22,690 --> 00:19:24,310
And I do see the additional request made.

342
00:19:24,390 --> 00:19:27,850
And if I put in programming again, no additional request.

343
00:19:28,900 --> 00:19:29,950
OK, so that is it.

344
00:19:31,000 --> 00:19:33,070
Like I said, this was a confusing video.

345
00:19:33,370 --> 00:19:33,960
Understand?

346
00:19:34,150 --> 00:19:38,170
Understanding what is going on with his debate and stuff and bounce term challenging.

347
00:19:38,380 --> 00:19:42,940
It is hard, though, if at this point this stuff is really confusing, really crazy.

348
00:19:43,240 --> 00:19:43,990
Do not sweat it.

349
00:19:44,110 --> 00:19:44,540
Really.

350
00:19:44,590 --> 00:19:45,460
Do not sweat it.

351
00:19:45,790 --> 00:19:47,710
This is some really advanced stuff here.

352
00:19:47,840 --> 00:19:53,320
And I personally would not expect any react engineer to really understand immediately what's going on

353
00:19:53,380 --> 00:19:56,710
unless they are pretty advanced, immediate or advanced engineer.

354
00:19:56,740 --> 00:20:00,790
So someone with some very practical work experience who has been working with react for a while.

355
00:20:01,180 --> 00:20:05,900
I would really not expect to begin or to understand why we created two separate pieces of states.

356
00:20:06,790 --> 00:20:08,560
Having said that, if you do understand what's going on.

357
00:20:08,590 --> 00:20:09,280
Fantastic.

358
00:20:09,310 --> 00:20:10,270
You're in a great spot.

359
00:20:11,540 --> 00:20:13,010
Congratulations, I suppose.

360
00:20:13,850 --> 00:20:16,070
All right, so that is it for our search widget.

361
00:20:16,280 --> 00:20:17,480
So we're not going to take a pause here.

362
00:20:17,580 --> 00:20:18,060
We're gonna come back.

363
00:20:18,080 --> 00:20:20,840
Next video and start to move on to our next widget.