1
00:00:01,110 --> 00:00:03,900
‫In this video, let's change the page title

2
00:00:03,900 --> 00:00:07,563
‫in the browser to the movie that we are currently watching.

3
00:00:09,240 --> 00:00:13,050
‫So to show you, let's, again, come to our demo here.

4
00:00:13,050 --> 00:00:16,800
‫And so watch what happens here to the browser tab title

5
00:00:16,800 --> 00:00:18,843
‫as I click on one of the movies.

6
00:00:20,190 --> 00:00:23,760
‫So you see that now, the title of the page is equal

7
00:00:23,760 --> 00:00:26,790
‫to the movie that we are currently checking out.

8
00:00:26,790 --> 00:00:29,040
‫And if I then click on another one,

9
00:00:29,040 --> 00:00:32,673
‫then, of course, that changes to the new movie.

10
00:00:33,630 --> 00:00:36,480
‫All right, and so let's do the same thing

11
00:00:36,480 --> 00:00:38,163
‫in our application as well.

12
00:00:39,000 --> 00:00:41,670
‫Now, to start, as we see, the initial title

13
00:00:41,670 --> 00:00:44,700
‫of the page is actually usePopcorn.

14
00:00:44,700 --> 00:00:49,320
‫So the name of the application and not just React app.

15
00:00:49,320 --> 00:00:54,320
‫So let's come into our public folder and in index.html,

16
00:00:54,690 --> 00:00:58,580
‫let's just change the title here to usePopcorn,

17
00:01:01,110 --> 00:01:05,583
‫give it a save, and then immediately, it changed up here.

18
00:01:07,410 --> 00:01:10,950
‫Okay, but anyway, let's now actually try

19
00:01:10,950 --> 00:01:13,020
‫to implement changing the title

20
00:01:13,020 --> 00:01:15,690
‫to the currently watched movie.

21
00:01:15,690 --> 00:01:18,480
‫So how are we going to do that?

22
00:01:18,480 --> 00:01:22,020
‫Well, changing the page title in the browser,

23
00:01:22,020 --> 00:01:26,850
‫so outside here of the application, is a side effect

24
00:01:26,850 --> 00:01:29,370
‫because we are very clearly going

25
00:01:29,370 --> 00:01:31,950
‫to interact with the outside world,

26
00:01:31,950 --> 00:01:34,200
‫so basically with the world outside

27
00:01:34,200 --> 00:01:36,180
‫of our React application.

28
00:01:36,180 --> 00:01:41,180
‫And so again, this is then considered a side effect.

29
00:01:41,250 --> 00:01:43,860
‫So what this means is that we will want

30
00:01:43,860 --> 00:01:48,860
‫to register a side effect using, again, the useEffect hook.

31
00:01:49,110 --> 00:01:52,050
‫Now, where exactly are we going to do that?

32
00:01:52,050 --> 00:01:55,890
‫So in which component are we going to use useEffect,

33
00:01:55,890 --> 00:01:58,230
‫or in other words, in which component

34
00:01:58,230 --> 00:02:02,220
‫do we actually want to register the side effect?

35
00:02:02,220 --> 00:02:06,450
‫Well, thinking about it, we want this title here to change

36
00:02:06,450 --> 00:02:09,630
‫as soon as we click on one of these movies,

37
00:02:09,630 --> 00:02:13,230
‫which will then trigger the movie details component here

38
00:02:13,230 --> 00:02:16,980
‫to mount, and so it's in exactly that situation

39
00:02:16,980 --> 00:02:20,280
‫where we want to change the browser title here.

40
00:02:20,280 --> 00:02:24,423
‫And so that component is where we want that effect.

41
00:02:26,190 --> 00:02:29,163
‫So let's come to movie detail.

42
00:02:31,830 --> 00:02:35,130
‫And yeah, so this is the component.

43
00:02:35,130 --> 00:02:38,043
‫And so let's simply add another effect here.

44
00:02:40,650 --> 00:02:43,590
‫So we should always use different effects

45
00:02:43,590 --> 00:02:45,570
‫for different things.

46
00:02:45,570 --> 00:02:49,020
‫So basically, that each effect has only one purpose,

47
00:02:49,020 --> 00:02:51,003
‫so it only does one thing.

48
00:02:53,490 --> 00:02:55,290
‫So this will be our effect,

49
00:02:55,290 --> 00:02:58,683
‫and then we want to run that effect on mount.

50
00:03:00,570 --> 00:03:03,213
‫Okay, and now it's very easy.

51
00:03:04,770 --> 00:03:08,490
‫So we can just change the title of the page in the browser

52
00:03:08,490 --> 00:03:11,793
‫by setting document.title.

53
00:03:13,230 --> 00:03:15,723
‫And for now, let's just use something else here.

54
00:03:17,070 --> 00:03:20,250
‫And you see that actually, it already changed

55
00:03:20,250 --> 00:03:23,730
‫to TEST right here, but let's just reload.

56
00:03:23,730 --> 00:03:26,160
‫And so then it goes back to usePopcorn

57
00:03:26,160 --> 00:03:30,150
‫and then when I click, it changed to TEST.

58
00:03:30,150 --> 00:03:31,440
‫Nice.

59
00:03:31,440 --> 00:03:33,900
‫So that's already working, but of course,

60
00:03:33,900 --> 00:03:36,033
‫we now want the actual title there.

61
00:03:37,839 --> 00:03:39,700
‫So let's use a template literal

62
00:03:40,950 --> 00:03:42,640
‫and then I will just write Movie

63
00:03:44,400 --> 00:03:48,063
‫and then the actual title of the movie.

64
00:03:49,050 --> 00:03:51,630
‫Give it a save and immediately,

65
00:03:51,630 --> 00:03:56,460
‫we get Inception here and here in the title.

66
00:03:56,460 --> 00:03:58,143
‫But again, let's just reload.

67
00:03:59,820 --> 00:04:04,050
‫And you see that now, it actually says undefined.

68
00:04:04,050 --> 00:04:07,950
‫So why is that? That looks very weird, right?

69
00:04:07,950 --> 00:04:11,400
‫But let's think about it because after we do that,

70
00:04:11,400 --> 00:04:13,113
‫it will actually make sense.

71
00:04:14,130 --> 00:04:18,840
‫So our effect here will right now only be executed

72
00:04:18,840 --> 00:04:22,590
‫as the component first mounts, right?

73
00:04:22,590 --> 00:04:26,550
‫Now, at that point, so when the component first mounts,

74
00:04:26,550 --> 00:04:28,743
‫what is the title going to be?

75
00:04:29,700 --> 00:04:32,400
‫And remember how actually, we already inspected

76
00:04:32,400 --> 00:04:35,283
‫that earlier, but let's just do that again.

77
00:04:39,000 --> 00:04:43,800
‫So logging to the console, here, we notice,

78
00:04:43,800 --> 00:04:46,110
‫well, actually, we don't notice anything,

79
00:04:46,110 --> 00:04:51,110
‫so let's just reload, then clear this, then click.

80
00:04:51,720 --> 00:04:55,230
‫And so you see that initially, the title is undefined,

81
00:04:55,230 --> 00:04:57,780
‫which is because in the beginning,

82
00:04:57,780 --> 00:05:00,690
‫this movie object is still empty,

83
00:05:00,690 --> 00:05:03,360
‫and only after the movie actually arrives

84
00:05:03,360 --> 00:05:06,570
‫from the API, the component will re-render

85
00:05:06,570 --> 00:05:08,550
‫and then we have the correct title

86
00:05:08,550 --> 00:05:10,893
‫that is then logged to the console.

87
00:05:12,720 --> 00:05:17,220
‫So moving back to our effect, basically, what happens here

88
00:05:17,220 --> 00:05:21,240
‫is that again, in the beginning, the title is undefined.

89
00:05:21,240 --> 00:05:24,930
‫And so since this effect only runs exactly once,

90
00:05:24,930 --> 00:05:26,490
‫when the component mounts,

91
00:05:26,490 --> 00:05:29,220
‫it will just stay undefined forever.

92
00:05:29,220 --> 00:05:31,290
‫So when the component re-renders

93
00:05:31,290 --> 00:05:34,680
‫with the correct movie object and the correct title,

94
00:05:34,680 --> 00:05:38,130
‫our effect will right now not react to that.

95
00:05:38,130 --> 00:05:40,593
‫So it will not be re-executed.

96
00:05:41,700 --> 00:05:46,700
‫Now, luckily for us, we already know how to fix that, right?

97
00:05:46,830 --> 00:05:50,220
‫So we just have to include this title variable here

98
00:05:50,220 --> 00:05:52,410
‫in the dependency array.

99
00:05:52,410 --> 00:05:54,810
‫And so then, if we give it a save,

100
00:05:54,810 --> 00:05:59,340
‫then you see that it actually changed to the correct title.

101
00:05:59,340 --> 00:06:00,693
‫Let's just try that again.

102
00:06:01,560 --> 00:06:04,950
‫So first, we get undefined and then we get Inception

103
00:06:04,950 --> 00:06:08,220
‫which, again, is because now, our effect

104
00:06:08,220 --> 00:06:11,910
‫is basically listening for this variable to change.

105
00:06:11,910 --> 00:06:16,323
‫And when it does change, then our effect is executed again.

106
00:06:17,310 --> 00:06:18,840
‫Now, there's just one problem,

107
00:06:18,840 --> 00:06:21,300
‫which is that we actually don't want

108
00:06:21,300 --> 00:06:24,243
‫to see the undefined here in the beginning.

109
00:06:25,350 --> 00:06:29,700
‫So we don't want temporarily to be our movie set

110
00:06:29,700 --> 00:06:33,570
‫to undefined, but we can simply fix that by writing,

111
00:06:33,570 --> 00:06:38,163
‫if there is no title, then just return.

112
00:06:41,010 --> 00:06:46,010
‫So try that again and yeah, that's fixed now.

113
00:06:46,260 --> 00:06:49,230
‫Now, also because we did this here,

114
00:06:49,230 --> 00:06:53,220
‫so we specified the title, we can now move to another movie,

115
00:06:53,220 --> 00:06:56,820
‫and it will then automatically change the title up here

116
00:06:56,820 --> 00:06:58,770
‫which, if we hadn't done this,

117
00:06:58,770 --> 00:07:00,270
‫this actually wouldn't happen.

118
00:07:01,380 --> 00:07:04,353
‫So let's just remove it just so I can show you.

119
00:07:06,120 --> 00:07:06,953
‫And...

120
00:07:08,430 --> 00:07:11,970
‫Well, now, actually, we never see anything

121
00:07:11,970 --> 00:07:15,033
‫because we have this early return here.

122
00:07:16,860 --> 00:07:18,303
‫So let's try that again.

123
00:07:19,830 --> 00:07:23,070
‫Okay, and now again, as I click another one,

124
00:07:23,070 --> 00:07:26,970
‫we see that the title stays at undefined.

125
00:07:26,970 --> 00:07:29,580
‫So this component here has re-rendered

126
00:07:29,580 --> 00:07:32,130
‫and so the title has changed, but of course,

127
00:07:32,130 --> 00:07:34,770
‫our effect did not react to that.

128
00:07:34,770 --> 00:07:37,020
‫And again, that's because we are missing

129
00:07:37,020 --> 00:07:42,020
‫this critical dependency in the dependency array.

130
00:07:42,240 --> 00:07:46,170
‫But now with this, it does actually work.

131
00:07:46,170 --> 00:07:49,260
‫Great, there's just one final problem,

132
00:07:49,260 --> 00:07:53,190
‫which is that, when we go back, then you see

133
00:07:53,190 --> 00:07:56,253
‫that the movie actually stays here in the title.

134
00:07:57,330 --> 00:08:01,140
‫So let's do another one, then, of course, it is correct.

135
00:08:01,140 --> 00:08:05,850
‫But again, if we go back, then the title will stay here.

136
00:08:05,850 --> 00:08:09,300
‫So it will not go back to just usePopcorn

137
00:08:09,300 --> 00:08:11,280
‫as we would probably want.

138
00:08:11,280 --> 00:08:14,190
‫So it doesn't make any sense that now here,

139
00:08:14,190 --> 00:08:16,230
‫we still have the Inception movie

140
00:08:16,230 --> 00:08:19,380
‫while we are no longer seeing that movie.

141
00:08:19,380 --> 00:08:21,510
‫So how could we change that?

142
00:08:21,510 --> 00:08:24,810
‫I mean, nowhere in our code we are actually telling React

143
00:08:24,810 --> 00:08:28,980
‫to go back to the usePopcorn title, right?

144
00:08:28,980 --> 00:08:32,460
‫And right now, we actually don't know how to do that yet

145
00:08:32,460 --> 00:08:34,920
‫because for that, we will first need to learn

146
00:08:34,920 --> 00:08:37,740
‫about the concept of cleaning up.

147
00:08:37,740 --> 00:08:40,983
‫And so let's do that right in the next lecture.