1 00:00:01,070 --> 00:00:04,610 Let's implement a feature that we've talked about for quite a while, but have not actually got around 2 00:00:04,610 --> 00:00:09,920 to putting together, so remember, we want to allow a user to type into the code editor and then if 3 00:00:09,920 --> 00:00:15,200 they stop typing for about half a second or one second or so, we want to automatically take that code, 4 00:00:15,200 --> 00:00:17,460 bundle it and execute it inside the preview window. 5 00:00:17,870 --> 00:00:22,790 So we want this to all be automatic because we took out that bundle button or that kind of a submit 6 00:00:22,790 --> 00:00:23,990 button that we had him previously. 7 00:00:24,380 --> 00:00:29,300 And we also want to make sure that there is this slight delay between the user's last key press and 8 00:00:29,300 --> 00:00:34,010 when we attempt to bundle the user's code, if we bundle with every key press, we're going to be doing 9 00:00:34,010 --> 00:00:38,540 way too much bundling and eventually just burn up all the user's battery power if they're on a mobile 10 00:00:38,540 --> 00:00:39,590 device or a laptop. 11 00:00:40,380 --> 00:00:45,680 So we need to figure out some way to make sure that we only attempt to do a bundle after user type something 12 00:00:45,830 --> 00:00:47,700 and then stops for about half a second. 13 00:00:48,260 --> 00:00:53,660 So let's first begin by just getting reacquainted with some code related to this entire code ed stuff 14 00:00:53,660 --> 00:00:56,090 and executing the code inside the preview window. 15 00:00:56,750 --> 00:01:00,200 All the code for that is inside of our code cell data file. 16 00:01:00,890 --> 00:01:05,630 So inside of here, remember, we've got the input piece of state, which is what every user is typing 17 00:01:05,630 --> 00:01:06,740 into the code editor. 18 00:01:07,550 --> 00:01:09,850 Then we've got some bundling logic right here. 19 00:01:09,980 --> 00:01:11,900 So we bundle the user's input. 20 00:01:12,470 --> 00:01:15,440 We then use the output to update our code piece of state. 21 00:01:15,800 --> 00:01:20,060 And this code piece of state is what eventually goes into our preview window right here. 22 00:01:21,450 --> 00:01:25,890 So what we really need to do is essentially make sure that whenever input is updated, we wait for about 23 00:01:25,890 --> 00:01:29,030 half a second, if half a second goes by without any further changes. 24 00:01:29,100 --> 00:01:32,320 We do that bundling logic just to make sure this is super clear. 25 00:01:32,340 --> 00:01:35,490 Let's take a look at a diagram or two to kind of clarify this entire process. 26 00:01:36,520 --> 00:01:41,620 All right, so here's the general idea, we've got time going from top to bottom so users can type in 27 00:01:41,620 --> 00:01:43,150 the ED whenever they do. 28 00:01:43,180 --> 00:01:45,300 We're going to update that input piece of state. 29 00:01:45,670 --> 00:01:50,260 So if a user does many key presses very quickly, we're going to update the input piece of state many 30 00:01:50,260 --> 00:01:50,980 times in a row. 31 00:01:51,650 --> 00:01:56,710 So then we want to wait for about one second or so to pass without any updates to that input piece of 32 00:01:56,710 --> 00:01:57,100 state. 33 00:01:57,580 --> 00:02:00,790 And if this occurs, then we want to run our bundling logic. 34 00:02:01,270 --> 00:02:04,060 This entire process is referred to as bouncing. 35 00:02:04,300 --> 00:02:07,990 The bouncing is when we want to allow some function or some code to run. 36 00:02:08,970 --> 00:02:14,460 As much as possible, and then only after some period of time elapses, we then want to do some other 37 00:02:14,460 --> 00:02:15,060 process. 38 00:02:16,170 --> 00:02:18,540 So here's the general idea on how we're going to implement this. 39 00:02:18,900 --> 00:02:23,100 So once again, a user is going to type into the code editor the very first time they do. 40 00:02:23,130 --> 00:02:28,920 We're going to update our input piece estate as usual, and then we're going to also set a timer in 41 00:02:28,920 --> 00:02:33,470 our code using these set timeout function inside that set timeout function. 42 00:02:33,480 --> 00:02:36,030 We're going to have some code that is going to bundle the user's code. 43 00:02:36,900 --> 00:02:43,200 If a user then types in the editor again within the span of one second or sooner than one second, then 44 00:02:43,200 --> 00:02:48,450 we're going to again update the input piece of states and then also cancel the previous timer. 45 00:02:48,760 --> 00:02:53,670 So we're going to make sure that we do not execute this bundling logic that we had queued up to be executed 46 00:02:53,670 --> 00:02:55,610 just a second ago or a moment ago. 47 00:02:56,340 --> 00:03:01,140 We're then going to immediately set up another timer and we're going to repeat that process until eventually 48 00:03:01,140 --> 00:03:07,770 one second goes by without us canceling the previous timer to once one second goes by, then our set 49 00:03:07,770 --> 00:03:11,130 time out function will execute and we will run our bundling logic. 50 00:03:11,940 --> 00:03:13,980 So let's give this a shot back in our code. 51 00:03:15,220 --> 00:03:21,520 All right, so back inside of Code Cell, I'm going to first begin by importing the use effect hook 52 00:03:21,520 --> 00:03:22,810 from react at the very top. 53 00:03:24,820 --> 00:03:28,210 Then inside of my component, I'm going to set up use effect. 54 00:03:31,830 --> 00:03:37,500 I'm going to run this U.S. function only whenever input changes, so I'm going to put input in for the 55 00:03:37,500 --> 00:03:38,880 dependency list right there. 56 00:03:40,400 --> 00:03:44,630 Then inside of you effect, I'm going to add in a set time out function. 57 00:03:47,410 --> 00:03:52,360 And I'm going to say that I want to execute that function right there after one second, so I'll put 58 00:03:52,360 --> 00:03:53,890 in one thousand milliseconds. 59 00:03:56,990 --> 00:04:01,610 Then inside the settlement itself, I'm going to put our bundling logic, which is the CONSED output 60 00:04:01,610 --> 00:04:02,960 away, bundle all that stuff. 61 00:04:04,850 --> 00:04:09,110 And because we are now using a weight inside of the set time out function, I'll make sure that I mark 62 00:04:09,110 --> 00:04:11,480 that inclosing function as async like so. 63 00:04:13,020 --> 00:04:17,040 And then going to clean up the old unclick, we don't need that anymore. 64 00:04:18,490 --> 00:04:23,860 Now, inside of Septime, time out, or as a result of that time out, we get back a timer, something 65 00:04:23,860 --> 00:04:28,690 that says, hey, here's an identifier that says or kind of represents the pending timer that's going 66 00:04:28,690 --> 00:04:30,490 to run in some amount of milliseconds. 67 00:04:30,950 --> 00:04:33,450 So we need to somehow save a reference to that timer. 68 00:04:33,700 --> 00:04:38,210 And then if we start to update input again, we need to make sure that we cancel that previous timer. 69 00:04:38,830 --> 00:04:43,570 Let's take a quick pause right here, however, just to make sure this video doesn't go too long and 70 00:04:43,570 --> 00:04:45,300 fix up the rest of this in just a moment.