1 00:00:01,460 --> 00:00:07,220 With that additional knowledge around the use effect function, we can now properly clean up or cancel 2 00:00:07,250 --> 00:00:08,120 that time out. 3 00:00:08,960 --> 00:00:12,830 So at the very bottom of our use effect function, we're going to return an arrow function. 4 00:00:13,270 --> 00:00:17,840 And inside of there we'll do a clear time out of time out. 5 00:00:18,060 --> 00:00:19,010 I.D. like some. 6 00:00:21,950 --> 00:00:22,250 All right. 7 00:00:22,730 --> 00:00:26,230 Let's first take another look at our diagram and just clarify what we are now doing. 8 00:00:27,290 --> 00:00:32,780 Now, whenever a user first clicks or types inside of that input, we are going to immediately set a 9 00:00:32,780 --> 00:00:34,670 timer to search in five hundred milliseconds. 10 00:00:34,970 --> 00:00:36,860 And we return that cleanup function. 11 00:00:37,320 --> 00:00:39,320 We not function does not get invoked right away. 12 00:00:39,920 --> 00:00:45,080 Instead, the next time a user type something, we're gonna cancel the previous timer and set up another 13 00:00:45,080 --> 00:00:45,260 one. 14 00:00:45,770 --> 00:00:49,850 If the user types something again, cancel a previous timer, set up another one, we're gonna repeat 15 00:00:49,850 --> 00:00:55,940 this process over and over and over again until five hundred milliseconds goes by without USIE fact 16 00:00:55,940 --> 00:00:56,750 being invoked. 17 00:00:57,350 --> 00:00:59,060 So those five milliseconds go by. 18 00:00:59,480 --> 00:01:01,760 We're going to execute that timer automatically. 19 00:01:02,480 --> 00:01:03,720 We do our search, the API. 20 00:01:03,770 --> 00:01:08,270 We update our results piece of state and we should see our results appear on the screen. 21 00:01:09,200 --> 00:01:10,400 Let's now give this a shot. 22 00:01:11,400 --> 00:01:12,390 All right, so back over here. 23 00:01:13,640 --> 00:01:15,320 I'm going to open up my network request tab. 24 00:01:17,830 --> 00:01:19,820 And then I'll start to type inside of your. 25 00:01:21,230 --> 00:01:27,290 And as I typed everything out, I don't see any requests being issued until after I typed out last character. 26 00:01:27,590 --> 00:01:29,530 And five hundred milliseconds elapse. 27 00:01:30,480 --> 00:01:31,250 Let's try that again. 28 00:01:31,370 --> 00:01:32,300 I'll delete everything. 29 00:01:33,380 --> 00:01:33,950 Program. 30 00:01:35,020 --> 00:01:35,590 There we go. 31 00:01:35,740 --> 00:01:36,910 Five milliseconds after. 32 00:01:37,480 --> 00:01:38,650 If I type too slowly. 33 00:01:40,830 --> 00:01:45,570 You can see that still do get that immediate search, but only if I type really slow. 34 00:01:47,960 --> 00:01:52,680 If we want to, we can also adjust that five hundred millisecond time out so we can make it say one 35 00:01:52,680 --> 00:01:53,430 second instead. 36 00:01:54,000 --> 00:01:59,740 If we make it one second now, we're gonna have that much more time to type something in before the 37 00:01:59,740 --> 00:02:00,660 search is triggered. 38 00:02:01,270 --> 00:02:05,490 Now, I can do pro and see how slowly I'm typing now. 39 00:02:05,610 --> 00:02:11,610 We're not wasting any requests until a second after we finally do our search and see results on the 40 00:02:11,610 --> 00:02:11,970 screen. 41 00:02:13,160 --> 00:02:14,210 All right, so it looks pretty good. 42 00:02:14,810 --> 00:02:20,720 Now, there is one downside to how we have written out our code inside of your so far, the one downside 43 00:02:20,810 --> 00:02:28,190 at present is that we do not do any initial search until after one second the lapses when our application 44 00:02:28,190 --> 00:02:28,880 first starts up. 45 00:02:29,450 --> 00:02:34,380 We can see that very easily if we just go back where the browser and refresh the page to notice. 46 00:02:34,380 --> 00:02:38,330 And now it takes one second before we do that initial search with programming. 47 00:02:39,340 --> 00:02:40,590 This definitely works. 48 00:02:40,680 --> 00:02:45,900 It kind of solves the problem of making too many requests when a user is typing, but it's not perfect. 49 00:02:46,110 --> 00:02:51,060 We now have this kind of annoying delay that is preventing content from appearing on the screen right 50 00:02:51,060 --> 00:02:51,390 away. 51 00:02:52,830 --> 00:02:56,430 So looks like we still have one last little problem to solve. 52 00:02:56,760 --> 00:02:58,710 Let's take care of that in the next video.