1
00:00:01,440 --> 00:00:05,670
Let's solve this last issue of having no results appear on the screen for the first second.

2
00:00:06,540 --> 00:00:12,570
So to fix this up, we're just going to add in a couple of little checks into our hook back inside of

3
00:00:12,570 --> 00:00:13,140
U.S. fact.

4
00:00:13,200 --> 00:00:14,640
Here's where we set up that time out.

5
00:00:14,700 --> 00:00:16,350
Here's a we return our function.

6
00:00:16,990 --> 00:00:21,660
So we really have to do inside of here is detect whether or not this is the first time our component

7
00:00:21,720 --> 00:00:22,530
is being rendered.

8
00:00:23,040 --> 00:00:27,690
If it is the very first time we're going to skip doing any kind of time out or anything like that,

9
00:00:28,110 --> 00:00:34,020
we're just going to do a search immediately then for every additional type or every additional time

10
00:00:34,020 --> 00:00:35,580
that this USIE fact function is called.

11
00:00:35,910 --> 00:00:40,500
If we know for certain that this is not the first time that the components are rendered, then we will

12
00:00:40,500 --> 00:00:43,500
go ahead and set the time out and return that cleanup function.

13
00:00:44,160 --> 00:00:47,520
So effectively, here's what we're gonna do right above where we set up the time out.

14
00:00:47,610 --> 00:00:53,640
We'll say if there is a term present and we have no results yet.

15
00:00:53,880 --> 00:00:55,730
So not results, not length.

16
00:00:57,040 --> 00:01:01,720
So this right here for in this case, that probably means that this is the first time that we are rendering

17
00:01:01,750 --> 00:01:05,080
our component and we probably want to do a search right away.

18
00:01:06,420 --> 00:01:07,110
Otherwise.

19
00:01:07,620 --> 00:01:13,740
Well, we if we do have a term or do not have a term, whatever it is, and if we do already have some

20
00:01:13,740 --> 00:01:19,490
results, then we probably want to set up our time out and return the cleanup function.

21
00:01:20,120 --> 00:01:24,480
We're going to take that whole block right there at it and put it into the L statement.

22
00:01:27,370 --> 00:01:27,610
All right.

23
00:01:27,700 --> 00:01:30,310
Let's now save this and see how we're doing.

24
00:01:31,640 --> 00:01:36,580
Now we go back over, we can refresh the page and we'll see that the request is issued instantly.

25
00:01:37,160 --> 00:01:41,780
There is a slight delay in actually completing the request, but you can see the request up here or

26
00:01:42,050 --> 00:01:45,970
it initiated inside of my network request log right away after I refresh the page.

27
00:01:47,540 --> 00:01:52,970
If I then start to change the search term, I still get that same kind of delay that we had before.

28
00:01:53,120 --> 00:01:56,300
That same kind of bouncing is what we actually call this.

29
00:01:56,660 --> 00:01:59,360
That delays or throttles the number of requests that are going out.

30
00:02:00,360 --> 00:02:02,460
All right, well, let's see if this is looking pretty good now.

31
00:02:03,670 --> 00:02:05,380
Well, that is it for use effect.

32
00:02:05,710 --> 00:02:10,690
Now, remember, we are going to come back and use USIE fact many other times inside this course, even

33
00:02:10,690 --> 00:02:12,280
in the next Ital widget we put together.

34
00:02:12,610 --> 00:02:14,880
So everything that we've learned here still gonna be applicable.

35
00:02:14,890 --> 00:02:18,880
Still going to use a lot of it, though, if it's still a little bit nebulous, a little bit confusing.

36
00:02:19,120 --> 00:02:19,660
Don't sweat it.

37
00:02:19,690 --> 00:02:21,640
You are going to get a lot of practice with it.

38
00:02:22,270 --> 00:02:24,370
So quick pause right here and I'll see you in just a minute.