Let's implement a feature that we've talked about for quite a while, but have not actually got around
to putting together, so remember, we want to allow a user to type into the code editor and then if
they stop typing for about half a second or one second or so, we want to automatically take that code,
bundle it and execute it inside the preview window.
So we want this to all be automatic because we took out that bundle button or that kind of a submit
button that we had him previously.
And we also want to make sure that there is this slight delay between the user's last key press and
when we attempt to bundle the user's code, if we bundle with every key press, we're going to be doing
way too much bundling and eventually just burn up all the user's battery power if they're on a mobile
device or a laptop.
So we need to figure out some way to make sure that we only attempt to do a bundle after user type something
and then stops for about half a second.
So let's first begin by just getting reacquainted with some code related to this entire code ed stuff
and executing the code inside the preview window.
All the code for that is inside of our code cell data file.
So inside of here, remember, we've got the input piece of state, which is what every user is typing
into the code editor.
Then we've got some bundling logic right here.
So we bundle the user's input.
We then use the output to update our code piece of state.
And this code piece of state is what eventually goes into our preview window right here.
So what we really need to do is essentially make sure that whenever input is updated, we wait for about
half a second, if half a second goes by without any further changes.
We do that bundling logic just to make sure this is super clear.
Let's take a look at a diagram or two to kind of clarify this entire process.
All right, so here's the general idea, we've got time going from top to bottom so users can type in
the ED whenever they do.
We're going to update that input piece of state.
So if a user does many key presses very quickly, we're going to update the input piece of state many
times in a row.
So then we want to wait for about one second or so to pass without any updates to that input piece of
state.
And if this occurs, then we want to run our bundling logic.
This entire process is referred to as bouncing.
The bouncing is when we want to allow some function or some code to run.
As much as possible, and then only after some period of time elapses, we then want to do some other
process.
So here's the general idea on how we're going to implement this.
So once again, a user is going to type into the code editor the very first time they do.
We're going to update our input piece estate as usual, and then we're going to also set a timer in
our code using these set timeout function inside that set timeout function.
We're going to have some code that is going to bundle the user's code.
If a user then types in the editor again within the span of one second or sooner than one second, then
we're going to again update the input piece of states and then also cancel the previous timer.
So we're going to make sure that we do not execute this bundling logic that we had queued up to be executed
just a second ago or a moment ago.
We're then going to immediately set up another timer and we're going to repeat that process until eventually
one second goes by without us canceling the previous timer to once one second goes by, then our set
time out function will execute and we will run our bundling logic.
So let's give this a shot back in our code.
All right, so back inside of Code Cell, I'm going to first begin by importing the use effect hook
from react at the very top.
Then inside of my component, I'm going to set up use effect.
I'm going to run this U.S. function only whenever input changes, so I'm going to put input in for the
dependency list right there.
Then inside of you effect, I'm going to add in a set time out function.
And I'm going to say that I want to execute that function right there after one second, so I'll put
in one thousand milliseconds.
Then inside the settlement itself, I'm going to put our bundling logic, which is the CONSED output
away, bundle all that stuff.
And because we are now using a weight inside of the set time out function, I'll make sure that I mark
that inclosing function as async like so.
And then going to clean up the old unclick, we don't need that anymore.
Now, inside of Septime, time out, or as a result of that time out, we get back a timer, something
that says, hey, here's an identifier that says or kind of represents the pending timer that's going
to run in some amount of milliseconds.
So we need to somehow save a reference to that timer.
And then if we start to update input again, we need to make sure that we cancel that previous timer.
Let's take a quick pause right here, however, just to make sure this video doesn't go too long and
fix up the rest of this in just a moment.