1
00:00:01,030 --> 00:00:03,340
Let's take a look at a very simple way of solving this problem.

2
00:00:03,750 --> 00:00:08,650
I'm going to first begin by removing the first use effect that we just put together and then inside

3
00:00:08,650 --> 00:00:10,270
the other use effect at the very top.

4
00:00:10,270 --> 00:00:11,890
I'm going to put in a little if statement.

5
00:00:12,280 --> 00:00:14,260
I'm going to say if there is no bundled.

6
00:00:15,190 --> 00:00:20,620
Then I want to try to create a bundle right away, so I'm going to copy the crepe on the line and then

7
00:00:20,620 --> 00:00:21,590
immediately return.

8
00:00:22,360 --> 00:00:23,710
So think about what this will do.

9
00:00:24,370 --> 00:00:29,200
Remember, whenever we first render our code cell component to the screen, in theory we don't have

10
00:00:29,200 --> 00:00:30,160
a bundle in this bundle.

11
00:00:30,160 --> 00:00:32,020
Variable is going to show up as undefined.

12
00:00:32,770 --> 00:00:37,450
So if we then enter our use affect function and there is no bundle, we'll immediately attempt to create

13
00:00:37,450 --> 00:00:40,980
one and then return without setting up any timer or anything like that.

14
00:00:41,830 --> 00:00:45,570
Then at some future point in time, our bundle will be created.

15
00:00:45,580 --> 00:00:49,990
We'll get access to it, will render out the code cell and show the bundle inside the preview component.

16
00:00:50,770 --> 00:00:55,600
If a user then starts to change, the cell content will run this use effect again.

17
00:00:55,840 --> 00:00:57,850
But at that point in time, we have a bundle.

18
00:00:57,850 --> 00:01:03,400
So we'll not enter this if statement and instead we will instead engage our usual bouncing logic.

19
00:01:04,410 --> 00:01:05,950
Let's save this flip back over.

20
00:01:09,870 --> 00:01:14,400
And now I get some really good behavior, so the instant I refresh, I see the preview window appear

21
00:01:14,400 --> 00:01:15,160
rather quickly.

22
00:01:15,480 --> 00:01:19,170
I do see a little blink and there are little flash that is totally fine.

23
00:01:19,200 --> 00:01:21,060
That's a part of the initial bundling process.

24
00:01:21,330 --> 00:01:24,500
There's no seven hundred and fifty millisecond delay or anything like that.

25
00:01:25,170 --> 00:01:31,950
I can still do a console log and ensure that everything works as expected, of course, and it definitely

26
00:01:31,950 --> 00:01:32,280
does.

27
00:01:33,640 --> 00:01:37,750
OK, so this definitely works, but there's one downside to it, you might notice that we are now getting

28
00:01:37,750 --> 00:01:42,280
a warning message over here because we were making use of the bundle variable inside of our use effect

29
00:01:42,280 --> 00:01:42,760
function.

30
00:01:44,260 --> 00:01:48,280
And this LINTANG rule wants to make sure that we list out, bundle inside of our dependency array.

31
00:01:48,900 --> 00:01:50,950
So I encourage you not to add that in.

32
00:01:51,340 --> 00:01:57,010
If you add in bundle right here and you're going to enter into an infinite loop once again, just think

33
00:01:57,010 --> 00:02:00,760
about what's going to happen if we list out, bundle inside that dependency array.

34
00:02:01,270 --> 00:02:07,300
Whenever we complete creating a bundle, then we're going to rerun the use effect and the use effect

35
00:02:07,300 --> 00:02:10,090
function is going to attempt to create another bundle again.

36
00:02:11,020 --> 00:02:16,720
So we're going to get another bundle use effect, we'll see that bundle has changed and so it's going

37
00:02:16,720 --> 00:02:18,220
to cause effect again and so on.

38
00:02:18,400 --> 00:02:20,710
And so once again, we just enter an infinite loop.

39
00:02:21,820 --> 00:02:27,010
Nonetheless, we still do have this warning message, so a very easy way to deal with this is to just

40
00:02:27,010 --> 00:02:32,230
disable its lint or this dependency array and say don't tell us about any warnings, because in this

41
00:02:32,230 --> 00:02:34,170
case, we know what we are doing here.

42
00:02:34,210 --> 00:02:38,350
This is logic that we very much want and we don't want to do anything else.

43
00:02:38,830 --> 00:02:41,410
And we definitely do not want to add in bundled to our dependency array.

44
00:02:42,310 --> 00:02:47,230
So if we just want to disable lint, then on the line right above that dependancy array, we could put

45
00:02:47,230 --> 00:02:54,310
in a comment of, yes, lint disable next line, space reactance.

46
00:02:55,470 --> 00:02:57,720
Exhaustive dash depth's.

47
00:03:00,090 --> 00:03:04,470
That's going to turn off the dependency check on that line of code right there.

48
00:03:05,460 --> 00:03:06,210
We'll save this.

49
00:03:09,540 --> 00:03:11,160
And now we don't have any warning message.

50
00:03:12,800 --> 00:03:14,870
OK, so this looks like a reasonable solution.

51
00:03:16,040 --> 00:03:19,460
Well, now that we've got that solved, still a couple of other very small items I want to take a look

52
00:03:19,460 --> 00:03:21,880
at, so let's take a pause right here and move on in just a moment.