1 00:00:01,010 --> 00:00:05,450 When we call that time out, we get back and identify her for the timer we are creating, so I'm going 2 00:00:05,450 --> 00:00:09,430 to take that identifier and assign it to a variable that I will call timer. 3 00:00:10,150 --> 00:00:12,950 Now, we need to make sure that we somehow clear this timer. 4 00:00:12,950 --> 00:00:16,129 We need to make sure we cancel it if a user ever updates input again. 5 00:00:16,540 --> 00:00:20,000 So for this, we can use a built in feature of the use effect function. 6 00:00:20,330 --> 00:00:23,510 Remember, something you could do instead of use effect is return a function. 7 00:00:24,170 --> 00:00:29,780 If you return a function, then it will be called automatically the next time use effect is called. 8 00:00:30,800 --> 00:00:35,540 So we can make sure that inside there we execute our logic to cancel the previous timer that we had 9 00:00:35,540 --> 00:00:35,930 set up. 10 00:00:36,900 --> 00:00:41,580 So inside the cleanup function, we'll put in a clear time out of timer like so. 11 00:00:42,620 --> 00:00:45,680 So let's save this, go back over and do a quick test. 12 00:00:47,080 --> 00:00:51,520 Now, I should be able to start typing out maybe a console log right here and I can type as much as 13 00:00:51,520 --> 00:00:56,470 I want, and it's only after I stop typing for one second that that is actually executed. 14 00:00:56,680 --> 00:01:01,330 You can see about one second after I stopped typing inside that string, I saw the console log. 15 00:01:02,090 --> 00:01:06,640 I'll try changing it to say a number type type type, type, type, delete, delete, delete, whatever 16 00:01:06,640 --> 00:01:07,270 I want to do. 17 00:01:07,510 --> 00:01:10,600 And then after I stop for one second, then we see the execution. 18 00:01:11,490 --> 00:01:15,120 All right, so it looks like this is working perfectly now, one thing I want to mention is that if 19 00:01:15,120 --> 00:01:18,690 you want to, you can definitely adjust this time right here from one second. 20 00:01:18,930 --> 00:01:23,730 If you want to execute a user's code more frequently, you can take it down to maybe five hundred milliseconds. 21 00:01:24,180 --> 00:01:27,330 And now that just means that if a user starts typing. 22 00:01:28,690 --> 00:01:30,580 And then pauses for half a second. 23 00:01:30,640 --> 00:01:35,620 We're going to immediately execute their code, so you might decide that you want to execute users code 24 00:01:35,620 --> 00:01:36,520 very frequently. 25 00:01:36,760 --> 00:01:42,940 But if you do, just remember that if you start to allow a user to just pause for half a second while, 26 00:01:42,940 --> 00:01:47,800 maybe some invalid syntax is inside the editor, well, you're going to try to execute that and the 27 00:01:47,800 --> 00:01:49,930 users plug and end up seeing a nasty error message. 28 00:01:50,480 --> 00:01:52,590 So you might want to allow a greater delay. 29 00:01:52,630 --> 00:01:54,900 But again, it's totally up to you or me. 30 00:01:54,910 --> 00:01:57,650 I think that five hundred milliseconds is totally reasonable. 31 00:01:58,000 --> 00:02:00,390 Maybe I'll split the difference and go to seven fifty. 32 00:02:00,400 --> 00:02:02,770 But again, it's really up to your personal preference. 33 00:02:03,750 --> 00:02:08,850 OK, so this looks good now it looks like everything is working as expected, but we're going to see 34 00:02:08,850 --> 00:02:14,550 if we start testing out some advanced features of our code editor that maybe we broke something along 35 00:02:14,550 --> 00:02:14,910 the way. 36 00:02:15,120 --> 00:02:16,900 So let's take a quick pause right here. 37 00:02:16,950 --> 00:02:20,910 We're going to kind of do a quick spiel or a quick rundown of our code editor, make sure everything 38 00:02:20,910 --> 00:02:22,290 is still working as expected. 39 00:02:22,410 --> 00:02:25,250 And yeah, there might be something we need to go back and fix up. 40 00:02:25,530 --> 00:02:28,010 So let's take a pause right here and continue in just a moment.