Let's take a look at a very simple way of solving this problem.
I'm going to first begin by removing the first use effect that we just put together and then inside
the other use effect at the very top.
I'm going to put in a little if statement.
I'm going to say if there is no bundled.
Then I want to try to create a bundle right away, so I'm going to copy the crepe on the line and then
immediately return.
So think about what this will do.
Remember, whenever we first render our code cell component to the screen, in theory we don't have
a bundle in this bundle.
Variable is going to show up as undefined.
So if we then enter our use affect function and there is no bundle, we'll immediately attempt to create
one and then return without setting up any timer or anything like that.
Then at some future point in time, our bundle will be created.
We'll get access to it, will render out the code cell and show the bundle inside the preview component.
If a user then starts to change, the cell content will run this use effect again.
But at that point in time, we have a bundle.
So we'll not enter this if statement and instead we will instead engage our usual bouncing logic.
Let's save this flip back over.
And now I get some really good behavior, so the instant I refresh, I see the preview window appear
rather quickly.
I do see a little blink and there are little flash that is totally fine.
That's a part of the initial bundling process.
There's no seven hundred and fifty millisecond delay or anything like that.
I can still do a console log and ensure that everything works as expected, of course, and it definitely
does.
OK, so this definitely works, but there's one downside to it, you might notice that we are now getting
a warning message over here because we were making use of the bundle variable inside of our use effect
function.
And this LINTANG rule wants to make sure that we list out, bundle inside of our dependency array.
So I encourage you not to add that in.
If you add in bundle right here and you're going to enter into an infinite loop once again, just think
about what's going to happen if we list out, bundle inside that dependency array.
Whenever we complete creating a bundle, then we're going to rerun the use effect and the use effect
function is going to attempt to create another bundle again.
So we're going to get another bundle use effect, we'll see that bundle has changed and so it's going
to cause effect again and so on.
And so once again, we just enter an infinite loop.
Nonetheless, we still do have this warning message, so a very easy way to deal with this is to just
disable its lint or this dependency array and say don't tell us about any warnings, because in this
case, we know what we are doing here.
This is logic that we very much want and we don't want to do anything else.
And we definitely do not want to add in bundled to our dependency array.
So if we just want to disable lint, then on the line right above that dependancy array, we could put
in a comment of, yes, lint disable next line, space reactance.
Exhaustive dash depth's.
That's going to turn off the dependency check on that line of code right there.
We'll save this.
And now we don't have any warning message.
OK, so this looks like a reasonable solution.
Well, now that we've got that solved, still a couple of other very small items I want to take a look
at, so let's take a pause right here and move on in just a moment.