Now that we've got a better idea of what's going on let's figure out how to solve this issue.
So to solve this I want to remind you inside of U.S. location what the purpose of that second argument
to use effect is.
Remember we can pass in no argument an empty array or an array with some number of things inside of
it.
The way this array right here works is anytime any value inside there changes in between renders of
our component the use effect function is going to be called again.
So in other words anytime should it track changes we're going to rerun that function right there now
whenever we pass in some value here we can obviously put in like a boolean or a number or a string.
And if we pass those in react is gonna do a comparison of their values.
So it's going to say okay de true flip to false or did the number one go to two or did a string of high
there go to buy there.
Those are very obvious comparisons and very obvious changes but we can also put in more complex values
inside of here as well.
So we could also put in a value like an array or an object or even a function when we put in these more
complex values the comparison done by react is a little bit more complicated react behind the scenes
essentially says is this the exact same function in memory like Is this the same object where the same
function or the exact same array.
It doesn't look at what is actually inside of that function or what's inside the object or what's inside
the array.
It just checks to see if it's the exact same thing if it is the same thing then react is not going to
rerun that function right there.
But if it's a different function or a different array or different object being passed inside this array
then react says Okay time to rerun that function so we can use this feature to our advantage.
So going to flip back over to a quick diagram and help you understand what we're going to do.
Okay.
So once again during our first render we create one version of our callback with the reference to recording
and by default recording is false.
So we then pass that down into a use location use effect runs we call start watching and start watching
now has a reference to this callback that we just created.
Now let's imagine what happens when recording flips to true when recording goes to true.
Our track rate screen is then going to re render itself.
So we get a second render inside during that second render we now have a recording value of true.
And at that point time we then create a second callback function.
A second version a totally different function in memory.
This callback function right here.
Hundred percent different than the callback function we created during the first render.
And just to be really clear about this I'm talking about the callback function that we create inside
of track create screen that one right there.
So we are creating a totally separate version of that function in memory.
So what we can do is pass that thing down into use location as we currently are but we can now add that
new callback to that array inside of easy effect because that is a totally different callback function
in memory react is going to say oh there's a new value of callback I guess that means that we should
rerun the U.S. fact function so effectively back inside of use location.
We take that brand new callback the new callback that we just assembled inside of track create screen
and we can put it in as another value inside of that array like so now.
Quick note do not save this code right here.
I'm going put a big comment.
Don't save.
There's a real big issue with this.
This is going to solve the issue kind of.
But it opens us up to a really nasty bug.
So don't save your code right here and as a matter of fact I would encourage you to just delete it because
that's not going to be like the final thing we put inside of here nonetheless.
We can kind of imagine that this solves our issue now every single time that we render our track create
screen.
We're building up a brand new version of our callback function passing inside of here and giving it
to use effect.
So now whenever react takes a look at that array between re renders of our component it's going to say
oh brand new function totally dissimilar from the last one we got.
It's a different function in memory.
So it's react is going to say Time to rerun that function when this function gets ran start watching
is going to be invoked again.
So a second time third time fourth time whatever and that second time third time whatever.
Start watching is going to run and now we are going to have callback right here callback is going to
be a reference to the latest version of callback that we just passed in as opposed to a reference to
like the first version we passed in so why does this not work.
Well it doesn't work because we're essentially saying that every single time we re render track create
screen we're building up a new version of this callback function right here we're passing it in and
that means every single time that track rate screen updates we are rerunning that code right there.
Some of the words we are calling start watching many many many times.
So let me show you what's going to happen.
If I were to save this song to save this I will go back over.
I'm going to go to track create screen and hit start recording and then I going to go to my terminal.
Remember I stole the console log of the number of locations that I have.
So back over here I can now see that.
Sure enough I'm getting a console log of the correct number of locations and is going six seven eight
blah blah blah.
Now here's the problem every single time that we see one is console logs.
That means that essentially our entire application is re rendering itself.
So that means track rate screen is being re executed.
It's building up a new version of that callback function passing it into use location.
And now we are calling the code inside of here again and again and again and again and again.
And that means that we're starting this watching process and calling watch position async like many
many many times per second.
And so the net result of that is inevitably at some point time our application is going to crash and
as a matter of fact if I start to like try to tap on stop like I'm clicking on stop right now nothing's
happening.
I can try to click on track list flow.
Nothing's happening.
So our application has crashed because we are calling watch position async.
Many many many many times per second.
And eventually like I said leads to a crash.
So although this kind of solves our issue it also kind of doesn't.
We are getting our update correctly but we're just calling the code inside of here way too often so
at some point time if I flip back over my terminal I'm eventually gonna see a really nasty error message
over here and then at some point time after like a couple more seconds I'm going to eventually get a
crash and I'll have to restart my bundler so clearly although this kind of works it still doesn't really
work.
Okay.
There we go.
Yeah.
That's a nice error message.
So clearly again works but not ideal there's still a little bit more we have to do.
Let's take another quick pause right here.
Come back in the next video and get a better idea of how to solve this problem.