1
00:00:01,330 --> 00:00:04,090
Everything appears to be working, but we do have some warning message.

2
00:00:04,540 --> 00:00:06,400
Let's take care of these warnings really quickly.

3
00:00:06,939 --> 00:00:09,060
First, we'll take care of the second two we see on here.

4
00:00:09,070 --> 00:00:13,120
So these are just saying that we imported something into our action, Graeter's index, not as file,

5
00:00:13,210 --> 00:00:14,700
but we never actually made use of it.

6
00:00:15,160 --> 00:00:16,740
This was a little mistake on my part.

7
00:00:16,750 --> 00:00:21,260
We imported the bundle start action and the bundle of complete action and we just never made use them.

8
00:00:21,670 --> 00:00:22,960
Let's go back over to our action.

9
00:00:22,960 --> 00:00:23,500
Graeter's.

10
00:00:24,520 --> 00:00:25,780
Index dots file.

11
00:00:26,830 --> 00:00:30,400
At the very top, I'm going to remove one, they'll start in Bundall complete.

12
00:00:32,470 --> 00:00:39,060
So I'll save that, go back over refresh and I just got one morning, so this one says that we are calling

13
00:00:39,060 --> 00:00:44,080
it use effect inside of our code cell component, but we have a missing dependancy in there.

14
00:00:44,860 --> 00:00:48,580
Well, let's go take a look at our code cell component again and figure out what this is talking about.

15
00:00:49,670 --> 00:00:50,930
All right, so here's Kozel.

16
00:00:52,380 --> 00:00:53,670
Here's our U.S. fact function.

17
00:00:54,690 --> 00:00:58,140
And inside of your we are making use of this bundle function.

18
00:00:59,020 --> 00:01:03,730
So we are making use of some value inside of you as a fact, but we did not actually add that value

19
00:01:03,730 --> 00:01:06,940
into the dependancy array and that's where the warning is coming from.

20
00:01:07,360 --> 00:01:13,060
That LINTANG message wants to make sure that if we ever tried to create or generate or otherwise access

21
00:01:13,060 --> 00:01:18,850
some kind of value inside of a react component, we have to add that thing into the dependancy array

22
00:01:19,030 --> 00:01:21,390
if we're going to make use of it inside of use effect.

23
00:01:22,120 --> 00:01:25,480
So to fix up that warning message, we would add in create bundle.

24
00:01:28,960 --> 00:01:34,030
Now, just you know, this is only applicable for values that we use inside of us effect if they are

25
00:01:34,300 --> 00:01:39,880
defined or declared inside the compound itself or received as props, if we make use of some kind of

26
00:01:39,880 --> 00:01:45,060
imported thing inside of a U.S. function, we do not have to add it into our dependency array.

27
00:01:45,550 --> 00:01:51,730
So we only have to add in things right here if they are declared or received as a problem.

28
00:01:53,370 --> 00:01:58,860
OK, let's save this put back over refresh and we'll very quickly see that the warning message has gone

29
00:01:58,860 --> 00:01:59,820
away, very good.

30
00:02:00,090 --> 00:02:02,870
But you'll also notice another kind of interesting issue.

31
00:02:03,510 --> 00:02:07,980
It looks like our preview windows, both them right now are blinking every now and then.

32
00:02:08,580 --> 00:02:09,780
So why is that?

33
00:02:10,530 --> 00:02:13,300
Well, this is a little kind of challenging issue I mentioned.

34
00:02:13,380 --> 00:02:14,850
So let's figure out what is going on here.

35
00:02:16,500 --> 00:02:21,240
All right, so remember, first off, what this dependency array thing is all about, whenever one of

36
00:02:21,240 --> 00:02:26,880
these different values changes between renters react is going to call our use effect function, the

37
00:02:26,880 --> 00:02:31,080
fact right now that we keep on seeing that blinking of the preview window about every seven hundred

38
00:02:31,080 --> 00:02:36,630
and fifty milliseconds, that kind of indicates that we are calling this fact function way too often.

39
00:02:37,110 --> 00:02:41,070
And chances are because we just the only change we made was to add and creep on the right here.

40
00:02:41,350 --> 00:02:44,250
Chances are it's cause because we added in bundle.

41
00:02:45,200 --> 00:02:51,560
So right now, the issue we have appears to be that this bundle function is being passed in and is changing

42
00:02:51,560 --> 00:02:55,550
for some reason with every single render of our code cell components.

43
00:02:56,420 --> 00:03:02,000
Well, remember, Bundle itself is not the actual action creator that we had defined back inside of

44
00:03:02,000 --> 00:03:04,020
our action creator's file instead.

45
00:03:04,070 --> 00:03:06,900
This is a bound version of that action creator.

46
00:03:07,280 --> 00:03:10,160
We bind that action creator inside of our use actions hook.

47
00:03:10,520 --> 00:03:13,280
Let's go and open up that use actions hook very quickly as well.

48
00:03:14,030 --> 00:03:16,370
So inside of our hooks directory Alphonsus actions.

49
00:03:19,660 --> 00:03:25,630
So whenever we call use actions, any time we are taking our dispatch function, we're taking all of

50
00:03:25,630 --> 00:03:30,160
our different action creatures and we are binding them all together and then returning the result,

51
00:03:30,710 --> 00:03:34,500
that means that every single time we call use actions, we are getting back.

52
00:03:34,540 --> 00:03:40,870
A slightly different version of the Cretz Bundle action creator is we're binding it with every single

53
00:03:40,990 --> 00:03:42,220
Virender of a component.

54
00:03:43,580 --> 00:03:48,110
So that's what's going on right now, every time we call use actions, we get back a slightly different

55
00:03:48,110 --> 00:03:49,280
version of Great Bundle.

56
00:03:50,280 --> 00:03:55,110
Because we have added that into this dependency array resources that we have provided a different function

57
00:03:55,110 --> 00:03:55,510
right here.

58
00:03:55,770 --> 00:03:58,860
And so it's going to queue up this U.S. fact function to run again.

59
00:03:59,700 --> 00:04:04,320
When you see the effect runs again, we're going to create our Bundall in about seven hundred and fifty

60
00:04:04,320 --> 00:04:06,950
milliseconds after that bundle is created.

61
00:04:07,410 --> 00:04:12,930
We then are going to re render our code cell component, which once again causes us to get a slightly

62
00:04:12,930 --> 00:04:18,540
different version of xrayed bundle that causes use the fact to run again and we go into an infinite

63
00:04:18,540 --> 00:04:18,930
loop.

64
00:04:20,430 --> 00:04:25,740
So to fix up this issue, all we need to do is make sure that we do not consistently provide a slightly

65
00:04:25,740 --> 00:04:27,530
different version of Create Bundle right here.

66
00:04:28,200 --> 00:04:33,930
We want to only bind our action creator one single time when our application first runs and then never

67
00:04:33,930 --> 00:04:35,580
really bind it again after that.

68
00:04:36,240 --> 00:04:39,480
So to do so, we'll go back over to our use actions hook.

69
00:04:40,570 --> 00:04:45,880
And then we're going to use another hook that is built into react itself, so I'm going to import at

70
00:04:45,880 --> 00:04:46,510
the very top.

71
00:04:47,610 --> 00:04:48,720
Use Memmo.

72
00:04:50,510 --> 00:04:57,080
From React, the U.S. memo hook is used to solve one of the things it does, it's used in many different

73
00:04:57,080 --> 00:05:01,090
locations, but in this case, we can use it to solve the exact problem we have right here.

74
00:05:01,280 --> 00:05:06,260
We only want to bind our action is really one single time and we never really want to bind them under

75
00:05:06,260 --> 00:05:08,000
any circumstance or anything like that.

76
00:05:08,360 --> 00:05:13,190
We could very easily accomplish this by maybe making use of a U.S. state hook and the use effect and

77
00:05:13,190 --> 00:05:17,450
then only bind our action creators and our component first renders another way we could do the exact

78
00:05:17,450 --> 00:05:19,780
same thing is by making use of use memo.

79
00:05:20,330 --> 00:05:24,020
So let me let's first write out just a little bit of code and then describe exactly what it's doing

80
00:05:24,740 --> 00:05:26,420
underneath our existing return statement.

81
00:05:26,450 --> 00:05:27,560
I'm going to do a return.

82
00:05:29,580 --> 00:05:35,460
Use memo, I'm going to provide it a function as the first argument and then as a second function,

83
00:05:35,460 --> 00:05:36,120
I'm going to put in.

84
00:05:37,680 --> 00:05:39,180
Inside of an array dispatch.

85
00:05:40,160 --> 00:05:44,690
I'll then cut that entire line right there and paste it inside of use memo.

86
00:05:46,070 --> 00:05:49,770
And that's it, that's all we need to do, so let's use Memmo doing here.

87
00:05:50,180 --> 00:05:56,930
Well, again, use memo is almost kind of like a used state and a use effect put together whenever dispatch

88
00:05:56,930 --> 00:06:02,660
right here changes or whenever something inside of this array changes react is going to rerun that function.

89
00:06:04,170 --> 00:06:09,030
So I'm going to take the return value from that function and provide it as the overall return from the

90
00:06:09,030 --> 00:06:14,870
use memo hook, that calculation is only done one single time, the very first time we call this memo.

91
00:06:14,880 --> 00:06:19,390
And then it's only ever repeated whenever something inside that array right there changes.

92
00:06:20,010 --> 00:06:23,580
So, again, very similar to like use effect and you state kind of put together.

93
00:06:24,780 --> 00:06:28,830
So overall, this means that we're only going to attempt to bind all of our action creatures one single

94
00:06:28,830 --> 00:06:29,250
time.

95
00:06:30,440 --> 00:06:34,850
So that means that back inside of our code cell components, our bundle function right here, that's

96
00:06:34,850 --> 00:06:36,500
going to be a stable function.

97
00:06:36,650 --> 00:06:41,150
No matter how many times we call to use actions, we're always going to get back the exact same function

98
00:06:41,150 --> 00:06:41,640
in memory.

99
00:06:42,380 --> 00:06:47,060
So now React will no longer think that great bundle is changing and it's no longer going to attempt

100
00:06:47,060 --> 00:06:50,090
to call or use effect again and again and again.

101
00:06:52,500 --> 00:06:55,890
Now, one last thing I want to mention here is we put in dispatch to this array.

102
00:06:56,280 --> 00:07:00,660
That's just because once again, remember what I mentioned at the very start of this video inside of

103
00:07:00,660 --> 00:07:04,830
a dependency array, we only have to list out things that are used inside of a function like this.

104
00:07:04,950 --> 00:07:09,030
If they are a value that is declared inside the component or received as props.

105
00:07:09,810 --> 00:07:14,370
In this case, action creators does not have to be added in because it is imported at the top of the

106
00:07:14,370 --> 00:07:14,730
file.

107
00:07:16,610 --> 00:07:22,940
OK, so let's save all this look back over refresh, and now we are no longer going to see our preview

108
00:07:22,940 --> 00:07:24,260
windows blinking anymore.

109
00:07:24,710 --> 00:07:25,160
Very good.

110
00:07:26,510 --> 00:07:29,950
OK, so six great, let's take a pause right here and continue on in just a moment.