In the last video we kind of solved our problem but also kind of not.
So again the issue here is that every single time that we re rendered track create screen we're getting
a different callback function created that causes us to call start watching again and again and again
and again.
Not ideal.
So in this video we're gonna figure out a slightly different way to approach this problem.
It's not going to be a complete solution but it's gonna kind of get us like 50 percent of the way there.
So back inside of a track create screen again.
The problem is all around that callback function.
We don't want to recreate that from scratch every single time that we call track create screen to avoid
doing so we're going to import another hook from the react library.
This hook is called use callback.
Now use callback is essentially designed to solve the exact issue that we're running into right now.
Let me show you how to use use callback and then that might help give you a better idea of how it's
going to solve our problems so right above where we call use location.
I can define a new variable called simply callback and I'm going to assign to this the result of use
callback as a first argument.
I'm going to put in our call callback function so that's that thing right there.
So I'm going to cut that and throw it into use callback then as a second argument.
Here's where the magic is.
I'm going to put in an array and I'm going to put in a list of kind of dependencies or variables that
I want to watch this array right here is just about identical to the array that we pass into use effect
any time any variable inside of here changes we're going to essentially rebuild that callback from scratch.
So for you and I the only time we ever want to rebuild that callback right there is when state DOT recording
changes.
So inside of that array I'll add in state DOT recording like so now I can take this callback and pass
it in as the second argument.
All right so what's going on here.
This is code is like good we want this right here.
But what does this really doing for us.
Let's take a look at a diagram.
OK.
So the entire goal of use callback is to limit the number of times that we create a new callback function
so let's imagine the very first time that we call use callback we pass we call use callback and we pass
in some callback function as the first argument.
So that might be some function that we call like version one of our callback function then as a second
argument we might pass in an array with the value of a string like Hi there.
So that's what goes on during maybe the very first render of our component the result of use callback
is it's going to essentially take that callback function right there and just return it.
So the result of that expression is our callback function so now we can imagine what happens during
the second time our component gets rendered well during the second time we might build up an entire
new version of our callback function.
So it's like callback B2 of our callback function totally new function in memory but as a second argument
let's imagine that we once again put in an array with a string of hi there because between render one
and render to the only value inside that array is identical.
In other words hasn't changed at all.
Rather than returning this new callback function that we just assembled used callback returns the first
version instead it says OK well your list of like dependencies right here these different values hasn't
changed.
So rather than building up a new function and returning it it's going to return the same exact function
from the first time we rendered our component the same function in memory so now we can can imagine
that maybe our component renders a third time and maybe during this third time we pass in the string
of by there instead.
So now the only value inside this array is different.
It's changed so because that value changed.
Use callback is going to say okay because that value change rather than passing back the same callback
we were working with before.
I'm not going to pass a return version 3 of that callbacks this diagram right here.
My mistake that box should actually say V3 So this solves exactly the problem.
We are running into it saying that OK at some point time we're going to creating this callback function
and we might not want to be recreating it from scratch every single time our component renders.
So instead it gives us the ability to throw in a function like just this first time.
And so long as that array of values right there doesn't change we're always going to get back the same
function in memory.
It's only when that value inside that array changes that we're going to get back a new function so think
about what that does to our useful creation hook now because we're saying only give me a new callback
function whenever recording changes we take the resulting callback we pass it into use location.
So now inside of our use effect inside of used location we're essentially going to be always working
with the exact same function in memory until the value of state DOT recording changes as soon as that
value changes.
We're then going to rerun that stuff right there and that means we're going to call start watching again
start watching is going to rerun and it's now going to call watch position async with the latest version
of our callback and all this only occurs when we get a new version of callback.
And the only way to get a new version of callback is if the value of state DOT recording changes if
that thing doesn't change right there then we're gonna get back the same callback that we passed in
last time.
And so our use effect function inside of use location will not run again so like I said this solves
our issue mostly.
OK.
So I'm going to make sure that I save this file and I'm going to make sure that I've got callback over
here so I'm going to tell you now if you save this like I said it's only a 50 percent solution.
This will still eventually result in a crash but nowhere near as quickly as what we current what I just
showed you a moment before.
So at this point you can decide to either add in callback right there or leave it out for just another
moment while we discuss the like last little change we have to make inside of here.
Either way I'm going to save with callback right there and with use callback over here as well you know
we can make sure that this saves without immediately crashing.
OK.
So time to save all go back over I'll go to try create I'll hit start recording now go to my terminal
and verify that I still get the changing values yep definitely do and back over here I am still able
to interact with the application so it definitely has not actually crashed this time around so I can
click stop and it stops recording and at that point time I should no longer see any changes to our list
of locations yet.
So now it's just stuck on 17 so that a doubt this definitely works.
It's a good solution but as I've said like four or five times now it only takes us like 50 percent of
the way there.
So let's take another quick pause.
We're going to come back the next video and discuss how we're going to get the remaining 50 percent
of this fixed in place and I'm also gonna make sure that it's really clear exactly why this is only
kind of a 50 percent solution so a quick pause and I'll see you in just a minute.