1
00:00:00,900 --> 00:00:03,240
Our new blog post is now definitely being created.

2
00:00:03,270 --> 00:00:05,340
But let me navigate back to the index screen.

3
00:00:05,400 --> 00:00:06,640
It's not actually visible.

4
00:00:07,140 --> 00:00:09,640
So the reason for this might actually be kind of obvious.

5
00:00:09,840 --> 00:00:15,030
If we go back to our index Green Dot J J.S. file remember we made use of that use effect function right

6
00:00:15,030 --> 00:00:20,870
there recall that U.S. fact means that anytime we render this component to the screen for the very first

7
00:00:20,870 --> 00:00:26,330
time we're going to run get blog posts and it's specifically that empty array that means we only want

8
00:00:26,330 --> 00:00:28,410
to run that function one time.

9
00:00:28,580 --> 00:00:34,220
So when we navigate between different screens with react navigation it might appear that the index screen

10
00:00:34,310 --> 00:00:37,110
is like going away and being completely destroyed.

11
00:00:37,130 --> 00:00:39,720
However the next screen still exists.

12
00:00:39,830 --> 00:00:45,740
It's technically still on our device somewhere so even though it looks like the index screen doesn't

13
00:00:45,740 --> 00:00:48,980
exist anymore technically it's still around.

14
00:00:48,980 --> 00:00:54,320
So when we navigate back to the index screen we're still looking at the exact same instance.

15
00:00:54,320 --> 00:00:59,060
So the U.S. fact call right here does not get invoked a second time and we never fetch that updated

16
00:00:59,060 --> 00:01:00,820
list of blog goes.

17
00:01:00,830 --> 00:01:03,020
So how are we going to deal with this.

18
00:01:03,020 --> 00:01:07,230
Well there's one way that we can solve it using react navigation very easily.

19
00:01:07,300 --> 00:01:12,290
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

20
00:01:12,290 --> 00:01:14,770
to use effect function right here.

21
00:01:14,840 --> 00:01:20,370
So we essentially want to make sure that we call get blog posts anytime that we first navigate to the

22
00:01:20,370 --> 00:01:26,150
screen and then anytime that the screen kind of like appears back as the primary screen on the device

23
00:01:26,360 --> 00:01:29,280
we want to call get blog post again.

24
00:01:29,300 --> 00:01:34,370
So to do so inside of use effect we will once again make use that navigation prop that we're getting

25
00:01:34,370 --> 00:01:44,370
access to right there and we're going to call navigation dot add listener did focus and then passing

26
00:01:44,420 --> 00:01:50,570
a second argument of an arrow function like so so this essentially tells react navigation that anytime

27
00:01:50,660 --> 00:01:57,140
this component index screen gains focus or is like the primary screen on the device then this callback

28
00:01:57,140 --> 00:01:59,190
function right here will be invoked.

29
00:01:59,240 --> 00:02:05,250
So inside of there we can add in another call to get blog posts.

30
00:02:05,290 --> 00:02:09,110
Now in total the first time we show it next screen do one fetch.

31
00:02:09,220 --> 00:02:13,090
And any time we return to the screen do another fetch as well.

32
00:02:13,120 --> 00:02:14,570
So that should solve our issue.

33
00:02:14,740 --> 00:02:18,280
Now just so you know the code that we have right here is not 100 percent complete.

34
00:02:18,280 --> 00:02:22,600
We're going to come back here and add in something in just a moment but this is enough to at least test

35
00:02:22,600 --> 00:02:23,620
this out.

36
00:02:23,790 --> 00:02:29,000
So going to save this file and then back over inside my application I'm going to create a another blog

37
00:02:29,000 --> 00:02:35,540
post I'll give it a title of simply four because this is like my fourth post and some content.

38
00:02:35,700 --> 00:02:39,280
And now when I tap on safe blog post I navigate back over.

39
00:02:39,370 --> 00:02:45,110
And as soon as that screen gains focus again we call get blog posts a second time and then I see my

40
00:02:45,110 --> 00:02:47,030
blog post appear on the screen.

41
00:02:47,060 --> 00:02:47,580
Very good.

42
00:02:48,410 --> 00:02:48,650
OK.

43
00:02:48,650 --> 00:02:51,440
Like I said this is not quite enough code right here.

44
00:02:51,440 --> 00:02:57,250
Just you know when we call add listener this returns something called a listener.

45
00:02:57,650 --> 00:03:02,360
So a listener anytime we create one we usually want to clean up after ourselves.

46
00:03:02,450 --> 00:03:06,740
There is a chance that at some point time inside of our application we might decide to stop showing

47
00:03:06,740 --> 00:03:12,560
the index screen altogether and essentially completely dismount or unbound our component and no longer

48
00:03:12,560 --> 00:03:14,300
show it on the screen even.

49
00:03:14,330 --> 00:03:18,580
Kind of like in the background as is currently the case in that scenario.

50
00:03:18,590 --> 00:03:24,430
We don't want to have any dangling listeners like we have right here that would lead to a memory leak.

51
00:03:24,440 --> 00:03:29,600
So in other words we just need to make sure that after we decide to stop showing this component we clean

52
00:03:29,600 --> 00:03:33,950
up after this listener and tell react navigation Hey you don't need to tell us about changes to this

53
00:03:33,950 --> 00:03:41,000
component anymore because it's no longer going to even be have a possibility of being displayed so to

54
00:03:41,000 --> 00:03:48,940
clean up after that listener we can't return a function from our use effect function if we return a

55
00:03:48,940 --> 00:03:54,520
function from use effect this function right here is going to be invoked only if our instance of index

56
00:03:54,520 --> 00:03:58,000
screen is ever completely stopped showing on the screen.

57
00:03:58,240 --> 00:03:59,710
And remember the next screen.

58
00:03:59,710 --> 00:04:04,870
Just like whenever we navigate away from it that does not count as the index screen being removed from

59
00:04:04,870 --> 00:04:06,550
the hierarchy.

60
00:04:06,580 --> 00:04:12,220
Instead it just means hey it's just presently not visible so if we ever truly completely remove the

61
00:04:12,220 --> 00:04:15,010
screen then this function right here will be invoked.

62
00:04:15,190 --> 00:04:20,770
And so this function right here is the perfect location to do some cleanup after our component and essentially

63
00:04:20,770 --> 00:04:23,200
turn off any listeners that we have created.

64
00:04:23,280 --> 00:04:30,340
So inside of here we could call the listener dot remove like so and that essentially means soon as our

65
00:04:30,340 --> 00:04:31,800
component is no longer visible.

66
00:04:31,830 --> 00:04:32,630
One hundred percent.

67
00:04:32,650 --> 00:04:37,940
Soon as it's completely off of our device then go ahead and cleanup OK.

68
00:04:37,970 --> 00:04:40,350
So we don't technically have to do this listener step right here.

69
00:04:40,350 --> 00:04:42,570
That's why we're able to run our code successfully.

70
00:04:42,570 --> 00:04:48,890
But like I said it would eventually lead to a memory leak which would definitely off the ideal let's

71
00:04:48,920 --> 00:04:57,710
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

72
00:04:57,710 --> 00:05:02,130
some content and yep looks like it's working just fine.

73
00:05:02,190 --> 00:05:03,440
Okay that looks good.

74
00:05:03,450 --> 00:05:09,360
So now our index screen is going to automatically update itself anytime someone navigates to it.

75
00:05:09,450 --> 00:05:14,760
One thing I only mentioned here as a quick aside we could technically inside of ADD blog post add in

76
00:05:14,820 --> 00:05:20,700
a call to our Jason server endpoint and get a updated list of all of our blog posts just as we did up

77
00:05:20,700 --> 00:05:23,670
here and then dispatch the appropriate action.

78
00:05:23,670 --> 00:05:29,040
So in other words we could have essentially just copy pasted that those two lines and throwing them

79
00:05:29,100 --> 00:05:34,270
in like so now would have been essentially the equivalent thing to do.

80
00:05:34,710 --> 00:05:39,600
But what we have now essentially is a little bit more foolproof because it means that any time we go

81
00:05:39,600 --> 00:05:44,970
to the index screen whether it's because we're being redirected from add blog post or maybe edit blog

82
00:05:44,970 --> 00:05:49,920
post or whatever else we're always going to make sure that we refresh our list which is probably what

83
00:05:49,920 --> 00:05:50,430
we want.

84
00:05:51,150 --> 00:05:51,450
Okay.

85
00:05:51,510 --> 00:05:52,190
So let's save this.

86
00:05:52,180 --> 00:05:57,240
We'll take a quick pause right here and move on to our next function that we need to update which is

87
00:05:57,240 --> 00:05:59,210
delete blog posts in the next video.