Our new blog post is now definitely being created.
But let me navigate back to the index screen.
It's not actually visible.
So the reason for this might actually be kind of obvious.
If we go back to our index Green Dot J J.S. file remember we made use of that use effect function right
there recall that U.S. fact means that anytime we render this component to the screen for the very first
time we're going to run get blog posts and it's specifically that empty array that means we only want
to run that function one time.
So when we navigate between different screens with react navigation it might appear that the index screen
is like going away and being completely destroyed.
However the next screen still exists.
It's technically still on our device somewhere so even though it looks like the index screen doesn't
exist anymore technically it's still around.
So when we navigate back to the index screen we're still looking at the exact same instance.
So the U.S. fact call right here does not get invoked a second time and we never fetch that updated
list of blog goes.
So how are we going to deal with this.
Well there's one way that we can solve it using react navigation very easily.
I'm going to once again I'm inside of index screened J.S. we're going to add in a little bit more code
to use effect function right here.
So we essentially want to make sure that we call get blog posts anytime that we first navigate to the
screen and then anytime that the screen kind of like appears back as the primary screen on the device
we want to call get blog post again.
So to do so inside of use effect we will once again make use that navigation prop that we're getting
access to right there and we're going to call navigation dot add listener did focus and then passing
a second argument of an arrow function like so so this essentially tells react navigation that anytime
this component index screen gains focus or is like the primary screen on the device then this callback
function right here will be invoked.
So inside of there we can add in another call to get blog posts.
Now in total the first time we show it next screen do one fetch.
And any time we return to the screen do another fetch as well.
So that should solve our issue.
Now just so you know the code that we have right here is not 100 percent complete.
We're going to come back here and add in something in just a moment but this is enough to at least test
this out.
So going to save this file and then back over inside my application I'm going to create a another blog
post I'll give it a title of simply four because this is like my fourth post and some content.
And now when I tap on safe blog post I navigate back over.
And as soon as that screen gains focus again we call get blog posts a second time and then I see my
blog post appear on the screen.
Very good.
OK.
Like I said this is not quite enough code right here.
Just you know when we call add listener this returns something called a listener.
So a listener anytime we create one we usually want to clean up after ourselves.
There is a chance that at some point time inside of our application we might decide to stop showing
the index screen altogether and essentially completely dismount or unbound our component and no longer
show it on the screen even.
Kind of like in the background as is currently the case in that scenario.
We don't want to have any dangling listeners like we have right here that would lead to a memory leak.
So in other words we just need to make sure that after we decide to stop showing this component we clean
up after this listener and tell react navigation Hey you don't need to tell us about changes to this
component anymore because it's no longer going to even be have a possibility of being displayed so to
clean up after that listener we can't return a function from our use effect function if we return a
function from use effect this function right here is going to be invoked only if our instance of index
screen is ever completely stopped showing on the screen.
And remember the next screen.
Just like whenever we navigate away from it that does not count as the index screen being removed from
the hierarchy.
Instead it just means hey it's just presently not visible so if we ever truly completely remove the
screen then this function right here will be invoked.
And so this function right here is the perfect location to do some cleanup after our component and essentially
turn off any listeners that we have created.
So inside of here we could call the listener dot remove like so and that essentially means soon as our
component is no longer visible.
One hundred percent.
Soon as it's completely off of our device then go ahead and cleanup OK.
So we don't technically have to do this listener step right here.
That's why we're able to run our code successfully.
But like I said it would eventually lead to a memory leak which would definitely off the ideal let's
test out one more time I'll save the file I'll go to the ad screen and I'll do a ad blog post 5 and
some content and yep looks like it's working just fine.
Okay that looks good.
So now our index screen is going to automatically update itself anytime someone navigates to it.
One thing I only mentioned here as a quick aside we could technically inside of ADD blog post add in
a call to our Jason server endpoint and get a updated list of all of our blog posts just as we did up
here and then dispatch the appropriate action.
So in other words we could have essentially just copy pasted that those two lines and throwing them
in like so now would have been essentially the equivalent thing to do.
But what we have now essentially is a little bit more foolproof because it means that any time we go
to the index screen whether it's because we're being redirected from add blog post or maybe edit blog
post or whatever else we're always going to make sure that we refresh our list which is probably what
we want.
Okay.
So let's save this.
We'll take a quick pause right here and move on to our next function that we need to update which is
delete blog posts in the next video.