1
00:00:01,140 --> 00:00:02,730
‫Let's now load some data

2
00:00:02,730 --> 00:00:06,810
‫into a React application for the very first time.

3
00:00:06,810 --> 00:00:08,880
‫However, in this lecture,

4
00:00:08,880 --> 00:00:12,360
‫let's start by doing it the wrong way basically,

5
00:00:12,360 --> 00:00:15,903
‫which is going to be a great learning experience.

6
00:00:17,430 --> 00:00:18,690
‫So in this section,

7
00:00:18,690 --> 00:00:22,410
‫we are going to go back to our usePopcorn application

8
00:00:22,410 --> 00:00:24,780
‫that we have been working on before.

9
00:00:24,780 --> 00:00:27,540
‫And so let's now grab the project folder

10
00:00:27,540 --> 00:00:30,663
‫and open it back up in VS code.

11
00:00:32,640 --> 00:00:36,330
‫All right, now here

12
00:00:36,330 --> 00:00:39,840
‫let's start by actually duplicating this file

13
00:00:39,840 --> 00:00:43,800
‫and then I'm gonna rename one of them to app version one.

14
00:00:43,800 --> 00:00:47,250
‫And so by doing this, we are not going to override the code

15
00:00:47,250 --> 00:00:48,720
‫that we have written before.

16
00:00:48,720 --> 00:00:51,063
‫And so you can keep it as a reference.

17
00:00:52,440 --> 00:00:55,920
‫Now, as we have learned before in the previous section,

18
00:00:55,920 --> 00:01:00,570
‫we should never update state in render logic, right?

19
00:01:00,570 --> 00:01:04,710
‫But now in this lecture, let's actually break that rule

20
00:01:04,710 --> 00:01:05,760
‫so that we can see

21
00:01:05,760 --> 00:01:09,330
‫why it actually exists in the first place.

22
00:01:09,330 --> 00:01:11,220
‫And breaking rules like this

23
00:01:11,220 --> 00:01:14,610
‫is actually a pretty great way of learning Reacts

24
00:01:14,610 --> 00:01:17,670
‫and also its rules even better.

25
00:01:17,670 --> 00:01:20,610
‫Now, the idea here is to fetch some movie data

26
00:01:20,610 --> 00:01:23,010
‫as soon as the app component here

27
00:01:23,010 --> 00:01:25,200
‫mounts for the very first time,

28
00:01:25,200 --> 00:01:28,053
‫so as soon as it has its initial render.

29
00:01:29,130 --> 00:01:33,667
‫So to fetch that data, we use the OMDb API,

30
00:01:34,740 --> 00:01:39,330
‫which is basically like an open version of IMDB.

31
00:01:39,330 --> 00:01:42,870
‫Now to get started, you need to get your own API key,

32
00:01:42,870 --> 00:01:46,110
‫which you can get for free just by clicking here

33
00:01:46,110 --> 00:01:48,090
‫and then filling out this form.

34
00:01:48,090 --> 00:01:52,047
‫And so immediately you will then get your free API key.

35
00:01:52,047 --> 00:01:55,140
‫Now then once you have that, you can just come back here

36
00:01:55,140 --> 00:01:59,343
‫to the main page so we can see how we can use this API.

37
00:02:00,660 --> 00:02:05,660
‫So our data requests should simply be sent to this URL.

38
00:02:05,700 --> 00:02:07,380
‫So just copy that.

39
00:02:07,380 --> 00:02:12,380
‫And then here, let's fetch the data using the fetch API.

40
00:02:13,110 --> 00:02:15,543
‫So using the fetch function like this.

41
00:02:17,070 --> 00:02:18,390
‫Now, right.

42
00:02:18,390 --> 00:02:21,450
‫Now, in case you're not familiar with the fetch function

43
00:02:21,450 --> 00:02:24,960
‫and on how to work with asynchronous JavaScript,

44
00:02:24,960 --> 00:02:27,450
‫then please go back to the beginning of the course

45
00:02:27,450 --> 00:02:30,660
‫and take a look at the JavaScript review section

46
00:02:30,660 --> 00:02:34,110
‫where I talk about all that in great length.

47
00:02:34,110 --> 00:02:36,240
‫But anyway here now of course

48
00:02:36,240 --> 00:02:38,430
‫you need to place your own key.

49
00:02:38,430 --> 00:02:41,040
‫And actually I want to do this,

50
00:02:41,040 --> 00:02:44,223
‫so I want to place this key in a separate variable.

51
00:02:45,060 --> 00:02:47,460
‫So let's define that out here.

52
00:02:47,460 --> 00:02:52,460
‫So key and by now, after that long previous section

53
00:02:52,530 --> 00:02:56,130
‫you know why we should actually define a variable like this

54
00:02:56,130 --> 00:02:58,260
‫outside the component function.

55
00:02:58,260 --> 00:03:00,990
‫And the reason for that is that each time

56
00:03:00,990 --> 00:03:02,730
‫the component gets re-rendered

57
00:03:02,730 --> 00:03:05,970
‫this entire function here will be executed again.

58
00:03:05,970 --> 00:03:08,070
‫So basically all the render logic.

59
00:03:08,070 --> 00:03:10,380
‫And so if this variable definition here

60
00:03:10,380 --> 00:03:12,570
‫is part of that render logic

61
00:03:12,570 --> 00:03:16,980
‫it'll also be recreated each time data component renders,

62
00:03:16,980 --> 00:03:20,280
‫which is in this case, of course, not a big deal

63
00:03:20,280 --> 00:03:22,140
‫but it's good to already get

64
00:03:22,140 --> 00:03:24,960
‫into the habit of not doing that.

65
00:03:24,960 --> 00:03:27,210
‫So when you're just defining a variable like this

66
00:03:27,210 --> 00:03:31,050
‫that doesn't depend on anything that's inside the component,

67
00:03:31,050 --> 00:03:33,063
‫then just declare it outside.

68
00:03:34,230 --> 00:03:37,800
‫Now I'm just getting my own API key,

69
00:03:37,800 --> 00:03:41,190
‫but of course you should use your own one here.

70
00:03:41,190 --> 00:03:44,160
‫And now let's go back to the documentation page

71
00:03:44,160 --> 00:03:48,570
‫where we can see that we can query the API in two ways.

72
00:03:48,570 --> 00:03:51,630
‫So we can search for an ID or a title

73
00:03:51,630 --> 00:03:55,260
‫or we can actually search by some query string.

74
00:03:55,260 --> 00:03:57,513
‫And so that's actually what we will do here.

75
00:03:59,610 --> 00:04:03,090
‫So here let's use S and then equal.

76
00:04:03,090 --> 00:04:05,730
‫And then here you can type your favorite movie,

77
00:04:05,730 --> 00:04:08,880
‫which for me probably is "Interstellar".

78
00:04:08,880 --> 00:04:13,113
‫Not 100% sure of that, but it's definitely a great one.

79
00:04:14,580 --> 00:04:15,540
‫Okay.

80
00:04:15,540 --> 00:04:20,070
‫But anyway, now we need to handle the promise

81
00:04:20,070 --> 00:04:23,640
‫that the fetch function here returns inside.

82
00:04:23,640 --> 00:04:27,900
‫And of course here it's then, so inside a then method,

83
00:04:27,900 --> 00:04:30,450
‫which gets access to the response

84
00:04:30,450 --> 00:04:32,980
‫and then here we can convert that response

85
00:04:33,870 --> 00:04:38,793
‫to Json immediately, which will return another promise.

86
00:04:40,006 --> 00:04:42,060
‫And so we chain on another then

87
00:04:42,060 --> 00:04:46,170
‫and then here we get access to the data,

88
00:04:46,170 --> 00:04:49,653
‫which we can then for now log to the console.

89
00:04:50,490 --> 00:04:52,173
‫And for now, that's actually it.

90
00:04:53,160 --> 00:04:56,040
‫So let's see what we get here.

91
00:04:56,040 --> 00:04:57,570
‫Or of course we first need to

92
00:04:57,570 --> 00:04:59,613
‫actually start our application.

93
00:05:00,810 --> 00:05:04,020
‫So make sure you are in the right project folder here

94
00:05:04,020 --> 00:05:05,883
‫and then type npm start.

95
00:05:07,200 --> 00:05:09,633
‫So that should then open up the new tab here.

96
00:05:10,500 --> 00:05:13,650
‫And indeed, there it is.

97
00:05:13,650 --> 00:05:15,880
‫So let's check out our console

98
00:05:17,010 --> 00:05:18,930
‫and let's just reload quickly.

99
00:05:18,930 --> 00:05:21,390
‫And indeed you see that React was able

100
00:05:21,390 --> 00:05:23,823
‫to fetch the data from the API.

101
00:05:24,720 --> 00:05:27,420
‫So we are just interested in the search here.

102
00:05:27,420 --> 00:05:31,170
‫And so all the movies here are in fact about "Interstellar",

103
00:05:31,170 --> 00:05:34,830
‫which means that our query here is already working.

104
00:05:34,830 --> 00:05:37,200
‫Now as we learned in the previous section,

105
00:05:37,200 --> 00:05:40,770
‫this data fetching that we're doing right here is actually

106
00:05:40,770 --> 00:05:45,180
‫introducing a side effect into the component's render logic.

107
00:05:45,180 --> 00:05:48,930
‫So it is clearly an interaction with the outside world,

108
00:05:48,930 --> 00:05:52,410
‫which should never be allowed in render logic.

109
00:05:52,410 --> 00:05:54,540
‫So again, all this code that is here

110
00:05:54,540 --> 00:05:57,270
‫at the top level of the function is of course

111
00:05:57,270 --> 00:06:00,870
‫code that will run as the component first mounts

112
00:06:00,870 --> 00:06:03,600
‫and therefore it is called render logic.

113
00:06:03,600 --> 00:06:07,470
‫And so again, here we should have no side effects.

114
00:06:07,470 --> 00:06:08,700
‫I mean, in this example

115
00:06:08,700 --> 00:06:11,070
‫where we only log something to the console,

116
00:06:11,070 --> 00:06:13,800
‫it actually appears to work just fine,

117
00:06:13,800 --> 00:06:16,713
‫but watch what happens if we set some state here.

118
00:06:17,790 --> 00:06:18,900
‫And to do that

119
00:06:18,900 --> 00:06:23,900
‫let's actually first get rid of our temporary data here.

120
00:06:23,940 --> 00:06:26,310
‫So this movie data and watched data

121
00:06:26,310 --> 00:06:31,140
‫we only used as a template for the previous section,

122
00:06:31,140 --> 00:06:33,090
‫but now let's get rid of that.

123
00:06:33,090 --> 00:06:35,070
‫And so as I was just saying,

124
00:06:35,070 --> 00:06:37,833
‫let's now here actually set state.

125
00:06:39,720 --> 00:06:42,690
‫So that list of movies that we get from the API

126
00:06:42,690 --> 00:06:46,260
‫we now want to get it into our movie state.

127
00:06:46,260 --> 00:06:49,890
‫And so that's at data.search.

128
00:06:49,890 --> 00:06:53,130
‫Give it a save and beautiful.

129
00:06:53,130 --> 00:06:58,130
‫So we got some data from the API now showing up in our UI,

130
00:06:58,560 --> 00:07:02,733
‫but watch what happens when we check out the network tab.

131
00:07:04,080 --> 00:07:06,840
‫So you see that it's basically running

132
00:07:06,840 --> 00:07:10,800
‫an infinite number of requests here, so it keeps going

133
00:07:10,800 --> 00:07:13,230
‫and it never really stops.

134
00:07:13,230 --> 00:07:15,630
‫So every second our app is firing off

135
00:07:15,630 --> 00:07:18,570
‫multiple fetch requests to this API,

136
00:07:18,570 --> 00:07:22,470
‫which of course is a really, really bad idea.

137
00:07:22,470 --> 00:07:24,300
‫So why do you think that is?

138
00:07:24,300 --> 00:07:26,640
‫Why do you think all these fetch requests

139
00:07:26,640 --> 00:07:28,410
‫are being fired off?

140
00:07:28,410 --> 00:07:31,230
‫Well, the reason is that setting the state here

141
00:07:31,230 --> 00:07:33,630
‫in the render logic will then immediately

142
00:07:33,630 --> 00:07:37,320
‫cause the component to re-render itself again.

143
00:07:37,320 --> 00:07:40,680
‫So that's just how state works, right?

144
00:07:40,680 --> 00:07:43,500
‫However, as the component is re-rendered,

145
00:07:43,500 --> 00:07:46,650
‫the function here of course is executed again,

146
00:07:46,650 --> 00:07:48,570
‫which then will fetch again,

147
00:07:48,570 --> 00:07:51,720
‫which in turn will set the movies again as well.

148
00:07:51,720 --> 00:07:55,530
‫And then this whole thing starts over and over again.

149
00:07:55,530 --> 00:07:59,160
‫So as the state instead the component is re-rendered again,

150
00:07:59,160 --> 00:08:00,600
‫which then will fetch again,

151
00:08:00,600 --> 00:08:02,400
‫which will set the movies again.

152
00:08:02,400 --> 00:08:06,657
‫And so this really is an infinite loop of state setting

153
00:08:06,657 --> 00:08:08,880
‫and then the component re-rendering.

154
00:08:08,880 --> 00:08:10,680
‫And so this is the reason why

155
00:08:10,680 --> 00:08:14,613
‫it is really not allowed to set state in render logic.

156
00:08:15,630 --> 00:08:18,360
‫So let's quickly set this back here

157
00:08:18,360 --> 00:08:22,470
‫so that we don't have a million requests here.

158
00:08:22,470 --> 00:08:25,233
‫And so as we reload, then it stops.

159
00:08:26,670 --> 00:08:29,730
‫And let's just see another example here quickly.

160
00:08:29,730 --> 00:08:33,450
‫So let's say we did set watched immediately here

161
00:08:33,450 --> 00:08:37,350
‫in the top level code to some empty array

162
00:08:37,350 --> 00:08:39,843
‫and then actually we do get a real error.

163
00:08:41,760 --> 00:08:43,263
‫I mean, let's reload that.

164
00:08:45,360 --> 00:08:49,680
‫And yeah, here we are now reloading all the time again

165
00:08:49,680 --> 00:08:51,390
‫the data from the API.

166
00:08:51,390 --> 00:08:52,590
‫But what matters here is that

167
00:08:52,590 --> 00:08:55,770
‫we get the error of too many re-renders.

168
00:08:55,770 --> 00:08:59,400
‫And so that's now because of this state setting right here.

169
00:08:59,400 --> 00:09:02,670
‫So if we're really setting the state here in the top level

170
00:09:02,670 --> 00:09:05,700
‫even without being inside a then handler

171
00:09:05,700 --> 00:09:07,950
‫then immediately React will complain

172
00:09:07,950 --> 00:09:09,480
‫that there are too many renders,

173
00:09:09,480 --> 00:09:12,870
‫which means that we again entered that infinite loop

174
00:09:12,870 --> 00:09:16,170
‫where updating state will cause a component to re-render,

175
00:09:16,170 --> 00:09:18,240
‫which will cause the state to be set

176
00:09:18,240 --> 00:09:20,523
‫and so on into infinity.

177
00:09:21,450 --> 00:09:24,090
‫So let's of course get rid of that.

178
00:09:24,090 --> 00:09:25,890
‫Let's reload here.

179
00:09:25,890 --> 00:09:28,560
‫And so now we are again good.

180
00:09:28,560 --> 00:09:32,100
‫However, we do actually want to set the state here.

181
00:09:32,100 --> 00:09:34,530
‫So we do want set movies here,

182
00:09:34,530 --> 00:09:37,710
‫but without all the problems that we just saw.

183
00:09:37,710 --> 00:09:40,050
‫And so how can we do that?

184
00:09:40,050 --> 00:09:43,200
‫Well, that's where we need the use effect hook

185
00:09:43,200 --> 00:09:45,633
‫which we will learn about in the next lecture.