Everything appears to be working, but we do have some warning message.
Let's take care of these warnings really quickly.
First, we'll take care of the second two we see on here.
So these are just saying that we imported something into our action, Graeter's index, not as file,
but we never actually made use of it.
This was a little mistake on my part.
We imported the bundle start action and the bundle of complete action and we just never made use them.
Let's go back over to our action.
Graeter's.
Index dots file.
At the very top, I'm going to remove one, they'll start in Bundall complete.
So I'll save that, go back over refresh and I just got one morning, so this one says that we are calling
it use effect inside of our code cell component, but we have a missing dependancy in there.
Well, let's go take a look at our code cell component again and figure out what this is talking about.
All right, so here's Kozel.
Here's our U.S. fact function.
And inside of your we are making use of this bundle function.
So we are making use of some value inside of you as a fact, but we did not actually add that value
into the dependancy array and that's where the warning is coming from.
That LINTANG message wants to make sure that if we ever tried to create or generate or otherwise access
some kind of value inside of a react component, we have to add that thing into the dependancy array
if we're going to make use of it inside of use effect.
So to fix up that warning message, we would add in create bundle.
Now, just you know, this is only applicable for values that we use inside of us effect if they are
defined or declared inside the compound itself or received as props, if we make use of some kind of
imported thing inside of a U.S. function, we do not have to add it into our dependency array.
So we only have to add in things right here if they are declared or received as a problem.
OK, let's save this put back over refresh and we'll very quickly see that the warning message has gone
away, very good.
But you'll also notice another kind of interesting issue.
It looks like our preview windows, both them right now are blinking every now and then.
So why is that?
Well, this is a little kind of challenging issue I mentioned.
So let's figure out what is going on here.
All right, so remember, first off, what this dependency array thing is all about, whenever one of
these different values changes between renters react is going to call our use effect function, the
fact right now that we keep on seeing that blinking of the preview window about every seven hundred
and fifty milliseconds, that kind of indicates that we are calling this fact function way too often.
And chances are because we just the only change we made was to add and creep on the right here.
Chances are it's cause because we added in bundle.
So right now, the issue we have appears to be that this bundle function is being passed in and is changing
for some reason with every single render of our code cell components.
Well, remember, Bundle itself is not the actual action creator that we had defined back inside of
our action creator's file instead.
This is a bound version of that action creator.
We bind that action creator inside of our use actions hook.
Let's go and open up that use actions hook very quickly as well.
So inside of our hooks directory Alphonsus actions.
So whenever we call use actions, any time we are taking our dispatch function, we're taking all of
our different action creatures and we are binding them all together and then returning the result,
that means that every single time we call use actions, we are getting back.
A slightly different version of the Cretz Bundle action creator is we're binding it with every single
Virender of a component.
So that's what's going on right now, every time we call use actions, we get back a slightly different
version of Great Bundle.
Because we have added that into this dependency array resources that we have provided a different function
right here.
And so it's going to queue up this U.S. fact function to run again.
When you see the effect runs again, we're going to create our Bundall in about seven hundred and fifty
milliseconds after that bundle is created.
We then are going to re render our code cell component, which once again causes us to get a slightly
different version of xrayed bundle that causes use the fact to run again and we go into an infinite
loop.
So to fix up this issue, all we need to do is make sure that we do not consistently provide a slightly
different version of Create Bundle right here.
We want to only bind our action creator one single time when our application first runs and then never
really bind it again after that.
So to do so, we'll go back over to our use actions hook.
And then we're going to use another hook that is built into react itself, so I'm going to import at
the very top.
Use Memmo.
From React, the U.S. memo hook is used to solve one of the things it does, it's used in many different
locations, but in this case, we can use it to solve the exact problem we have right here.
We only want to bind our action is really one single time and we never really want to bind them under
any circumstance or anything like that.
We could very easily accomplish this by maybe making use of a U.S. state hook and the use effect and
then only bind our action creators and our component first renders another way we could do the exact
same thing is by making use of use memo.
So let me let's first write out just a little bit of code and then describe exactly what it's doing
underneath our existing return statement.
I'm going to do a return.
Use memo, I'm going to provide it a function as the first argument and then as a second function,
I'm going to put in.
Inside of an array dispatch.
I'll then cut that entire line right there and paste it inside of use memo.
And that's it, that's all we need to do, so let's use Memmo doing here.
Well, again, use memo is almost kind of like a used state and a use effect put together whenever dispatch
right here changes or whenever something inside of this array changes react is going to rerun that function.
So I'm going to take the return value from that function and provide it as the overall return from the
use memo hook, that calculation is only done one single time, the very first time we call this memo.
And then it's only ever repeated whenever something inside that array right there changes.
So, again, very similar to like use effect and you state kind of put together.
So overall, this means that we're only going to attempt to bind all of our action creatures one single
time.
So that means that back inside of our code cell components, our bundle function right here, that's
going to be a stable function.
No matter how many times we call to use actions, we're always going to get back the exact same function
in memory.
So now React will no longer think that great bundle is changing and it's no longer going to attempt
to call or use effect again and again and again.
Now, one last thing I want to mention here is we put in dispatch to this array.
That's just because once again, remember what I mentioned at the very start of this video inside of
a dependency array, we only have to list out things that are used inside of a function like this.
If they are a value that is declared inside the component or received as props.
In this case, action creators does not have to be added in because it is imported at the top of the
file.
OK, so let's save all this look back over refresh, and now we are no longer going to see our preview
windows blinking anymore.
Very good.
OK, so six great, let's take a pause right here and continue on in just a moment.