In the last video we ran into a little bug when we tried to print out the number of locations that we
picked up.
So if I go over to track create we're going to and then hit start recording.
We're going to very quickly see 0 zero zero console logged out at our terminal once per second.
So that means that inside of our location context here it is right here.
It means that our ad location where we tried to add into our list of locations that we're tracking for
our user is not functioning correctly.
So in this video we're going to try to figure out what is going on.
I'm going to point out the source of the problem right away.
I'm going to tell you why this is not functioning correctly but really understanding why it's not functioning
correctly is going to take a little bit of time.
So inside of my use location not J.S. file here is use location.
Remember this is our custom hook at the very bottom.
We called use effect right there.
So this use effect call.
That is the source of our troubles.
This is why we are seeing 0 0 0 every time we get that console log.
So like I said I'll tell you exactly where our code is malfunctioning but that doesn't really explain
why it's malfunctioning.
Understanding why this use effect call is not working as expected is going to be just a little bit challenging.
So to help you understand why this is not working correctly we're going to take a look at a look at
a little side example very quickly.
So we're going to go to a Web site called Code Penn which is a very small online I.D. We're going to
write out a quick example using react on the web.
So like normal react J.S. we're doing this just help you understand some very subtle issues that come
into play when we make use of use effect.
So let's go over to code Penn and write out a very quick example.
All right I'm gonna go to code Penn Io once here and going to create a new Penn.
You should be able to create a pen without signing in at all.
If you want to create an account and sign it.
That's totally fine as well.
So inside of here we're going to build out a very simple counter application with react J.S..
We're gonna write just a little bit of code here.
So just bear with me for a moment.
First off inside this each team l panel I'm gonna put a div with an idea of root then I'm going to collapse
a CSF section like so and right next to J.S. I'm going to click on that little gear and we're going
to wire up react to this code an idea very quickly under the javascript tab.
I'm going to select a javascript pretty process pre processor of babble and then in the search box right
here I'm going to search first for react and click it and then react dash Dom and click that as well.
So I've now got two script entries inside of here one for react and one for react Dom I'll then go ahead
and save and close.
All right so now we're going to write out a very small react component to say const app inside of there
I'm going to return a div.
So again we're not writing react native code right now.
This is react for the web inside of you're going to put two button elements the first one is gonna say
increment and the second one I'll say decrement so as my guests we're gonna make a little counter.
After that I'm going to place current count and that's going to eventually print out our current count
like whatever our counter value is.
So let's make sure that we initialize some piece of state called counter and we'll track it and try
to incremented in decrement at any time we click on those buttons so to create a piece of state will
say const counter and set counter.
And that's going to come from.
React dot use state and I'll put in an initial value of zero.
Now one thing I want to point out really quickly inside of a code pen environment we don't get any import
statements.
So if we want to make access or refer to react or anything like that we say simply react.
And then the function that we want to call.
So that's why I'm saying react out you state right here as opposed to a import statement the very top
OK.
So we've now got the counter variable.
Let's now make sure that this component shows up on the screen because right now our screen is empty.
This is the result down here at the big white box so to render this component to the screen will say
react Dom.
Notice how it's capital D O M render my ab component and we'll we're going to pass in a reference to
the H T.M. elements that we want to render that thing too.
So it'll be document dot query selector with LB root like so and then after that I should see my two
buttons and the current count appear all right now let's just very quickly make sure that whenever we
tap on these buttons we increment or decrement our counter variable.
So on the first button I'll say on click.
So whenever someone clicks this thing I want to run set counter and I want to increase its value to
counter plus 1 then on decrement I'll say on click set counter counter minus one okay.
So just a very simple counter.
If I now hit increment Yep goes up decrement Yep goes down.
Nothing too crazy.
So here's where things are gonna start to get really weird and this is where we're going to see a bug
very similar to the one we have inside of our application start to materialize right after our you state
call.
I'm going to set up a use effect hook sung as they react use effect.
Once again we're saying react use effect as opposed to just use effect because we don't have any import
statements here and I'll put in an arrow function to run and just like we have back inside of our use
location file I'm going to pass in an array as a second element I'm not going to put in a value inside
there I'm going to leave it empty so as a second argument I'll put in empty array like so.
So we've repeated many times throughout this case course we've said Oh yeah.
Empty array means.
This function runs just one time when this component first shows on the screen.
So then inside of here we're going to set up a little set interval call.
So I'll say set interval I'll pass in an arrow function and I want to run that function once every second.
So I'll put it as the second argument to set interval 1000 milliseconds like so.
So now this inner function right here is going to run once per second.
So what are we going to do inside there.
Well something very simple.
I just want to console logout they counter variable.
That's it.
So inside there I'll put in console dot log counter so now think about what our component is doing on
the one hand we've got the printout of the current count on the screen simultaneously.
We're gonna get a console log once per second of whatever the value of counter is now to see the value
of that console log.
We can either hit console down here at the bottom left hand side and see a console appear alternatively
what's a little bit easier is if you open up your developer console and move it over to the side it's
just a bit easier to read over here right away you can see that I'm getting that console that log once
per second that's why that number right there is going up.
It means that I'm just getting the same value console logged out again and again and again OK.
So now here's the weird part.
Here's the entire point of this little example.
I'm not going to start to change the value of counter so click on increment and look at increment like
that value counter right there.
Yep.
It's gone all the way up to 20.
However take a look at the console log the console log is still printing out 0 so on the screen I can
very easily see current count of 20 like that variable right there.
Hundred percent is being printed out inside of my j x block and it definitely without a doubt has a
value of 20.
But according to the set interval and the console log right there the value of counter is still 0 so
something is really strange here Something just does not make sense in the least this artifact right
here this kind of interesting kind of bug looking thing is the same issue that we have inside of our
component back over here or inside of our hook of use location.
We've got a very similar issue going on.
So if we can understand in this a very small example why this is occurring it might help us fix up this
used location hook as well and get it to behave as expected.
So let's take a quick pause right here.
When we come back the next video we're going to really examine this little example and understand how
we can have one count of value right here one counter value on the screen and a different counter value
being console logged over there as well so quick pause and we'll figure this out in just a moment.