At present, we've got this really nasty text area right here to allow a user to type in some amount
of code to eventually be executed, our next major kind of push or feature inside of our project is
going to be to replace this text area with a real code editor.
So I want to get something inside there that has some line numbers and lynching and maybe even something
like code formatting as well before we kick off.
Adding in the code editor itself, I want to very quickly make a small change to our project and just
give you a very quick demonstration.
The demonstration I'm going to give you is going to seem completely irrelevant.
But trust me, as soon as we start putting together our code editor, you're going to realize that we
are putting together this code editor in a very particular way for a very good reason.
So just trust me for a little bit.
So here's the small change I want to make, rather than having a submit button right here that a user
is going to click on to bundle their code, I instead want to attempt to bundle the user's code and
execute it with every single key press.
So as soon as the user presses on the keyboard, bundle, bundle, bundle and take those bundles, execute
them immediately inside that iframe.
As you can guess, this is a really bad idea.
We definitely don't want to do this.
Bundling code is pretty computationally intensive.
So we're going to be spending a lot of performance cycles just bundling the user's code, even though
they might add in another key press in like half a second.
Nonetheless, let's do this because like I said, it's going to help you understand why we are writing
out our code editor in a very particular way.
All right.
So to get started.
I'm going to go back over to my index file, I'm going to find that return statement down at the bottom.
The changes we're about to make, we're going to undo at the end of this video.
So if you want to make these changes, totally fine.
Otherwise, just stick around and watch what happens if we try to do this.
Eger bundling, so to speak.
I'm going to first begin by finding our button right there in a comment that out.
I'm then going to find our on change function.
I'm going to wrap that with another set of curly braces so we get a function body inside there and then
either before or after doesn't really make a difference.
That set input I'm going to manually call unclick.
Remember, that is the function that currently is doing our bundling and I'm going to provide to it
e not target value as well.
We're essentially just taking the whatever user just typed inside that text area and providing it directly
to unclick.
We get an air from that right away, that's just because UNCLICK is not expecting an argument, so I'm
going to go up to unclick.
Here it is right here.
I'm going to add in that argument, I'll call it input annotator as type string and then remember,
we are already using a variable with the same name inside a fetch plug in right here.
So this code, as it stands by Save It and run it again, we're going to do a bundling and execution
with every single key press.
So let's try this out and save everything for the back of the browser.
Now, Chrom, internally in this developer panel right here, has some tools that we can use to monitor
the performance of our application and this case, I don't quite care so much about the performance.
I'm on a very modern laptop right now, and so I can really type into this input just about as quickly
as I possibly can.
And I'm not going to see a really big performance penalty.
However, what is really evident is the amount of processing power that's going to be used as I start
typing inside their data rather than using the built in profiler tools.
I'm going to instead go up to be top level menu up here inside of Chrome, go to more tools and go to
task manager.
That's going to open up the task manager right here.
I can see the tab running my application right there.
I'm going to watch the amount of CPU power that is used as I start typing.
And as you can guess, yeah, it's going to be pretty intense.
OK, so I'm going to start typing inside and as I do, watch how much CPU is being used for doing this
very, very fast bundling.
So import react.
From react, maybe I'll import react, Dom.
From React Dom and a console log, maybe react, you can notice that as I'm typing out my code here,
my CPU usage is absolutely extraordinarily high.
Maybe then how do I react, Dom?
Render.
And I'll put it there, maybe an H1.
They hide their.
I think you kind of get the idea at this point, so with every single key press, we are spending a
tremendous amount of battery power.
We bundle that code and execute it.
The result is kind of neat because we can see everything update live on the screen.
For example, if I start updating the text inside that one, I can see the additional key presses appear
right away.
Definitely need to get that instant feedback.
However, if a user is running our application on some mobile device like, say, a laptop, and they're
relying upon battery power, as soon as a user starts typing inside of here, we're going to start chomping
through their battery really, really, really fast just because we are bundling our code way too frequently.
So, again, all this stuff is probably pretty obvious, but I want to make sure is super clear why
we probably want to throttle how often we are attempting to bundle our users code.
I don't want to always have to make our users click on some, like, bundle button, which is what we
had just a moment ago.
I want to allow them to just type everything and then eventually see the result appear automatically.
But I don't want to bundle instantly.
Instead, I want to allow users, maybe type type, type type, and then maybe only after they stop
typing for like say half a second, only do the bundle at that point in time.
That's what our real goal needs to be.
So, as I mentioned, this is all going to become very relevant as we start putting our code editor
together, so just keep all this stuff in mind and just remember it as we start putting the editor together.
Well, with that mind, let's take a pause here.
And as you guess, start working on that editor in the next video.