1
00:00:01,609 --> 00:00:06,260
Bundling inside of application is now working out pretty well, but there are a couple of odd things

2
00:00:06,260 --> 00:00:06,710
about it.

3
00:00:06,720 --> 00:00:10,310
So we're going to spend the rest of this section going through a couple of very small items.

4
00:00:10,490 --> 00:00:15,470
Each of these might seem really inconsequential, but honestly, it is these extra little attention

5
00:00:15,470 --> 00:00:18,680
to detail items that really make a awesome application.

6
00:00:19,440 --> 00:00:23,360
What we have right now, it definitely works, but there are some really easy improvements we could

7
00:00:23,360 --> 00:00:23,770
add in.

8
00:00:23,780 --> 00:00:26,570
It just takes just a little bit of time to understand each of them.

9
00:00:27,050 --> 00:00:29,940
So let's go over the first very small improvement in this video.

10
00:00:30,650 --> 00:00:33,320
OK, so I'm going to refresh the page here really quickly.

11
00:00:33,530 --> 00:00:38,810
And I just want you to notice some interesting behavior whenever we refresh the preview window initially

12
00:00:38,810 --> 00:00:39,940
is just not there.

13
00:00:40,250 --> 00:00:43,800
And then after a very brief pause in time, we then see it flash very quickly.

14
00:00:43,850 --> 00:00:45,800
So watch this and refresh.

15
00:00:46,490 --> 00:00:47,270
It's not there.

16
00:00:47,990 --> 00:00:48,770
Then a flash.

17
00:00:49,340 --> 00:00:50,630
It's not there.

18
00:00:50,630 --> 00:00:52,190
It comes in, then a flash.

19
00:00:52,760 --> 00:00:54,280
And that's definitely very repeatable.

20
00:00:54,680 --> 00:00:58,070
So let's take a look at a quick diagram and just understand why that is occurring.

21
00:00:59,230 --> 00:01:01,260
OK, so here's what's going on inside of application.

22
00:01:01,690 --> 00:01:04,080
First we refresh the page, our application loads up.

23
00:01:04,720 --> 00:01:08,500
We then dispatch a couple of different actions inside of our students file.

24
00:01:08,770 --> 00:01:10,570
Two of those are creating code cells.

25
00:01:11,800 --> 00:01:16,000
Those actions get processed by our code or excuse me, our cell reducer.

26
00:01:17,020 --> 00:01:20,740
That creates two different code cells that causes our state to update.

27
00:01:21,700 --> 00:01:26,770
That new state is provided to our list component and then eventually we see it to code cells appear

28
00:01:26,770 --> 00:01:27,340
on the screen.

29
00:01:28,970 --> 00:01:33,440
So we're now displaying two different code cell components and inside those code cell components, remember,

30
00:01:33,440 --> 00:01:38,060
we've got that exact function that is this effect right here.

31
00:01:38,690 --> 00:01:43,700
The only goal of this USIE function is to wait for about seven hundred and fifty milliseconds and then

32
00:01:43,700 --> 00:01:46,640
eventually attempt to create a bundle for this particular cell.

33
00:01:48,210 --> 00:01:53,790
So when we show the code cell component, initially we set up a timer to attempt to bundle our code

34
00:01:53,790 --> 00:01:55,910
in seven hundred and fifty milliseconds.

35
00:01:55,920 --> 00:02:01,020
And remember, while we are waiting for this initial bundle, we are not showing the preview window

36
00:02:01,020 --> 00:02:02,140
on the screen at all.

37
00:02:02,190 --> 00:02:02,970
There's nothing there.

38
00:02:03,240 --> 00:02:05,880
Remember, we put in that check inside of our lock down here.

39
00:02:05,880 --> 00:02:09,449
We said if we don't have a bundle, just don't show the preview component.

40
00:02:10,229 --> 00:02:15,200
That explains why we initially do not see the preview window appear for a very small period of time.

41
00:02:15,720 --> 00:02:20,850
It's because we are waiting these seven hundred and fifty milliseconds to do our first initial bundle

42
00:02:20,850 --> 00:02:21,310
attempt.

43
00:02:22,020 --> 00:02:27,930
So here's the problem that wait right there during our initial render of our application is not necessary.

44
00:02:28,320 --> 00:02:33,330
We want to show a user some bundled output as soon as possible when they first load up our application.

45
00:02:33,330 --> 00:02:37,260
We want to show that preview window instantly if we can, and we want to get some bundled code in there

46
00:02:37,260 --> 00:02:39,060
as quick as we possibly can.

47
00:02:39,750 --> 00:02:45,480
So this initial delay around our use affect function and all that bounce logic is just not necessary.

48
00:02:45,840 --> 00:02:50,310
If we are rendering our code cell component for the very first time, we don't want to wait seven hundred

49
00:02:50,310 --> 00:02:51,230
fifty milliseconds.

50
00:02:51,450 --> 00:02:54,600
We want to bundle the user's code right then instantly.

51
00:02:56,480 --> 00:02:58,490
So there's a couple of ways that we could achieve this.

52
00:02:58,760 --> 00:03:01,620
Let's take a look at one or two that are going to seem pretty obvious.

53
00:03:02,390 --> 00:03:06,860
The first thing you might think would be, all right, we want to always attempt to bundle a user's

54
00:03:06,860 --> 00:03:07,490
code instantly.

55
00:03:07,490 --> 00:03:08,170
No problem.

56
00:03:08,180 --> 00:03:10,340
Let's add in a second effect hook.

57
00:03:10,780 --> 00:03:12,920
We could add in a second use effect.

58
00:03:14,950 --> 00:03:18,940
And say that we only want to run this thing one time when our component is first rendered.

59
00:03:19,240 --> 00:03:21,040
So we'd put on empty array right there.

60
00:03:22,240 --> 00:03:23,170
Then inside of your.

61
00:03:24,160 --> 00:03:30,160
We can attempt to create our bundle without any timer or anything like that, so as you probably guessed,

62
00:03:30,160 --> 00:03:33,840
this means as soon as we start to show Kozel greater bundle right away.

63
00:03:34,030 --> 00:03:34,660
And that's it.

64
00:03:35,620 --> 00:03:36,400
We're going to save this.

65
00:03:37,510 --> 00:03:43,000
Look back over to a quick refresh and now we'll see almost instantly the preview window appears.

66
00:03:43,340 --> 00:03:46,980
However, after a brief pause, we still get a second flash of that window.

67
00:03:47,590 --> 00:03:51,910
So although it seems like this might be a reasonable solution, it turns out that this is kind of potentially

68
00:03:51,910 --> 00:03:53,560
even worse than what we had before.

69
00:03:53,710 --> 00:03:56,470
Let's take a look at another diagram and really understand what's happening now.

70
00:03:58,540 --> 00:04:04,090
So everything is going on exactly the same, all these different steps are occurring exactly as they

71
00:04:04,090 --> 00:04:08,560
were before, but now we've just got this extra use effect hook that's going to attempt to bundle a

72
00:04:08,560 --> 00:04:09,530
user's code immediately.

73
00:04:10,120 --> 00:04:14,710
So when we first show code cell, we're going to call that first use effect.

74
00:04:14,710 --> 00:04:16,810
We're going to attempt to bundle the user's code right away.

75
00:04:17,200 --> 00:04:20,589
But then we're also going to bundle their code a second time.

76
00:04:21,190 --> 00:04:26,350
Seven hundred and fifty milliseconds later, because we're still running that second use effect hook.

77
00:04:27,220 --> 00:04:29,590
So this is kind of the worst of both worlds.

78
00:04:29,590 --> 00:04:33,790
We are now attempting to bundle the user's code right away, but we're also doing it again.

79
00:04:33,790 --> 00:04:35,470
Seven hundred and fifty milliseconds later.

80
00:04:35,980 --> 00:04:40,120
This is definitely a very poor solution because remember, a user might eventually have many different

81
00:04:40,120 --> 00:04:41,260
code cells on the screen.

82
00:04:41,410 --> 00:04:44,920
And when they first come to our application, we're now saying that we're going to bundle all those

83
00:04:44,920 --> 00:04:47,140
different cells twice at the very start.

84
00:04:47,440 --> 00:04:51,130
And that just means that, well, that's going be a pretty big performance penalty.

85
00:04:51,370 --> 00:04:55,960
At the end of the day, bundling a user's code is always going to take some good amount of processing

86
00:04:55,960 --> 00:04:56,350
power.

87
00:04:56,650 --> 00:05:00,850
So first thing, we're bundling twice as much as necessary at application startup.

88
00:05:01,000 --> 00:05:05,410
A user is just going to come to our app and think it's a really laggy application because the very first

89
00:05:05,410 --> 00:05:08,260
instant they come to it, we're going to be doing a lot of work.

90
00:05:09,170 --> 00:05:14,240
So we need to think of some way to kind of do something similar, but we don't want to do both Bundall

91
00:05:14,240 --> 00:05:14,620
attempts.

92
00:05:14,630 --> 00:05:16,490
We want to only do a bundle instantly.

93
00:05:17,880 --> 00:05:23,550
And then only attempt to rebundle once a user has actually made a change to a cell.

94
00:05:24,200 --> 00:05:25,110
So let's take a pause right here.

95
00:05:25,110 --> 00:05:29,490
Now that we probably really understand the issue, come back to the next video and take a look at a

96
00:05:29,490 --> 00:05:30,570
possible solution.