1
00:00:01,110 --> 00:00:03,390
‫Next up, we also need to clean up

2
00:00:03,390 --> 00:00:05,070
‫our data fetching.

3
00:00:05,070 --> 00:00:08,640
‫Because right now, we're actually creating way too many

4
00:00:08,640 --> 00:00:12,003
‫HTTP requests as we search for movies.

5
00:00:13,320 --> 00:00:15,750
‫And to show you what I mean by that,

6
00:00:15,750 --> 00:00:18,900
‫let's make our window here a bit bigger.

7
00:00:18,900 --> 00:00:21,093
‫Let's come to our network tab again.

8
00:00:22,290 --> 00:00:25,470
‫Let's add some throttling here

9
00:00:25,470 --> 00:00:28,833
‫and then make sure that you're here, in the fetch tab only.

10
00:00:29,670 --> 00:00:34,670
‫Then let's clear all the requests that had been made before.

11
00:00:34,680 --> 00:00:38,103
‫And then I will just very quickly search for a movie here.

12
00:00:39,960 --> 00:00:41,220
‫All right.

13
00:00:41,220 --> 00:00:43,890
‫And so here we can now see all the requests

14
00:00:43,890 --> 00:00:45,900
‫that have been made.

15
00:00:45,900 --> 00:00:47,160
‫So basically we see

16
00:00:47,160 --> 00:00:51,180
‫that we made one request for each keystroke.

17
00:00:51,180 --> 00:00:56,010
‫So it started here, then in or whatever, then incept

18
00:00:56,010 --> 00:00:59,010
‫and all the way until the final word.

19
00:00:59,010 --> 00:01:00,870
‫Now the problem with that is,

20
00:01:00,870 --> 00:01:04,710
‫that this created all these different requests

21
00:01:04,710 --> 00:01:07,380
‫that were basically happening at the same time.

22
00:01:07,380 --> 00:01:09,030
‫And that has two problems.

23
00:01:09,030 --> 00:01:12,330
‫First of all, having so many requests at the same time

24
00:01:12,330 --> 00:01:14,460
‫will slow each of them down.

25
00:01:14,460 --> 00:01:17,520
‫And second, this means that we will end up downloading

26
00:01:17,520 --> 00:01:19,260
‫way too much data.

27
00:01:19,260 --> 00:01:21,750
‫Because we're actually not even interested

28
00:01:21,750 --> 00:01:24,540
‫in the data for all of these other queries.

29
00:01:24,540 --> 00:01:27,450
‫But still, they were downloaded here.

30
00:01:27,450 --> 00:01:30,510
‫Now in this case, it's very, very little data.

31
00:01:30,510 --> 00:01:33,300
‫So that's not going to have any impact.

32
00:01:33,300 --> 00:01:34,770
‫But in another application,

33
00:01:34,770 --> 00:01:37,230
‫this might actually become a problem.

34
00:01:37,230 --> 00:01:40,230
‫And so let's now learn how we can clean up,

35
00:01:40,230 --> 00:01:42,600
‫basically our fetch requests,

36
00:01:42,600 --> 00:01:46,650
‫so that, as soon as a new request is fired off,

37
00:01:46,650 --> 00:01:48,840
‫the previous one will stop.

38
00:01:48,840 --> 00:01:50,820
‫So it will get canceled.

39
00:01:50,820 --> 00:01:54,480
‫And actually, I forgot to mention the third big problem

40
00:01:54,480 --> 00:01:56,880
‫with having all of these requests

41
00:01:56,880 --> 00:01:58,530
‫happening at the same time,

42
00:01:58,530 --> 00:02:02,430
‫which is, imagine that actually, for example,

43
00:02:02,430 --> 00:02:05,730
‫this request here would take a little bit longer

44
00:02:05,730 --> 00:02:07,200
‫than the other ones.

45
00:02:07,200 --> 00:02:11,250
‫So if this request here would be the last one to arrive,

46
00:02:11,250 --> 00:02:12,483
‫let's say this one,

47
00:02:13,350 --> 00:02:16,413
‫well here we then get the response if we click.

48
00:02:18,060 --> 00:02:21,900
‫But anyway, again, let's imagine that this request,

49
00:02:21,900 --> 00:02:26,010
‫for some reason, took a lot longer than all the other ones.

50
00:02:26,010 --> 00:02:29,160
‫And so then this one would be the last one to arrive.

51
00:02:29,160 --> 00:02:33,390
‫And so in that case, it would be the movies or the results

52
00:02:33,390 --> 00:02:36,990
‫from this request that would be stored in our state

53
00:02:36,990 --> 00:02:39,930
‫and that would be rendered in our UI.

54
00:02:39,930 --> 00:02:42,330
‫Which is of course not what we want.

55
00:02:42,330 --> 00:02:45,810
‫We always want exactly the last request of all

56
00:02:45,810 --> 00:02:48,720
‫to be the one that matters, right?

57
00:02:48,720 --> 00:02:50,160
‫So all these other ones, again,

58
00:02:50,160 --> 00:02:51,960
‫we are not interested in them.

59
00:02:51,960 --> 00:02:54,630
‫But if one of them takes longer than the rest,

60
00:02:54,630 --> 00:02:56,970
‫then that one will actually become

61
00:02:56,970 --> 00:02:59,460
‫the one that we see in our UI.

62
00:02:59,460 --> 00:03:02,040
‫And this is actually a pretty common problem,

63
00:03:02,040 --> 00:03:05,220
‫which even has the name of a race condition.

64
00:03:05,220 --> 00:03:08,730
‫Because all these requests here are basically racing

65
00:03:08,730 --> 00:03:12,180
‫with one another, seeing which one arrives first.

66
00:03:12,180 --> 00:03:15,723
‫And so let's now fix that issue back in our code.

67
00:03:16,800 --> 00:03:18,510
‫And the way that we will do this,

68
00:03:18,510 --> 00:03:21,630
‫is by using a native browser API,

69
00:03:21,630 --> 00:03:24,150
‫which is the abort controller.

70
00:03:24,150 --> 00:03:26,580
‫And we will then use that abort controller

71
00:03:26,580 --> 00:03:28,293
‫in our clean up function.

72
00:03:29,610 --> 00:03:33,150
‫So the first step for using the abort controller,

73
00:03:33,150 --> 00:03:34,683
‫is to actually create one.

74
00:03:35,610 --> 00:03:39,300
‫So let's define a new variable, called controller.

75
00:03:39,300 --> 00:03:44,300
‫And then we use, new abort controller.

76
00:03:44,340 --> 00:03:47,430
‫And again, this is actually a browser API.

77
00:03:47,430 --> 00:03:49,530
‫So this has nothing to do with React

78
00:03:49,530 --> 00:03:51,300
‫but with the browser itself.

79
00:03:51,300 --> 00:03:53,703
‫So just like the fetch function right here.

80
00:03:55,050 --> 00:03:56,670
‫Okay.

81
00:03:56,670 --> 00:03:59,760
‫Then here, in order to connect the abort controller

82
00:03:59,760 --> 00:04:01,200
‫with the fetch function,

83
00:04:01,200 --> 00:04:03,780
‫we pass in a second argument,

84
00:04:03,780 --> 00:04:07,803
‫where we define an object with the signal property.

85
00:04:09,600 --> 00:04:14,190
‫And so there we pass in controller.signal.

86
00:04:14,190 --> 00:04:16,980
‫So it's not really important to understand exactly

87
00:04:16,980 --> 00:04:18,930
‫how this abort controller works.

88
00:04:18,930 --> 00:04:21,813
‫This is basically just following a recipe.

89
00:04:22,740 --> 00:04:23,910
‫Okay.

90
00:04:23,910 --> 00:04:26,010
‫So we have our abort controller

91
00:04:26,010 --> 00:04:28,680
‫and we connected it with our fetch.

92
00:04:28,680 --> 00:04:30,693
‫And so now in the cleanup function,

93
00:04:32,370 --> 00:04:35,073
‫so a function that we return from here,

94
00:04:37,740 --> 00:04:39,310
‫we can then actually

95
00:04:41,970 --> 00:04:45,273
‫say controller.abort.

96
00:04:46,590 --> 00:04:47,490
‫All right.

97
00:04:47,490 --> 00:04:49,260
‫And that's actually it.

98
00:04:49,260 --> 00:04:51,540
‫So let's see that this works in practice.

99
00:04:51,540 --> 00:04:54,480
‫And then we will understand what is happening here.

100
00:04:54,480 --> 00:04:57,510
‫And we will also do some minor fixes.

101
00:04:57,510 --> 00:05:00,393
‫So let's make this big again, so we can see.

102
00:05:02,040 --> 00:05:04,113
‫And reload the entire thing.

103
00:05:05,850 --> 00:05:09,090
‫And immediately you see a small problem here.

104
00:05:09,090 --> 00:05:10,800
‫But for now, let's ignore that.

105
00:05:10,800 --> 00:05:12,543
‫And again, search for a movie.

106
00:05:20,700 --> 00:05:21,720
‫Okay.

107
00:05:21,720 --> 00:05:23,910
‫Now here we have a different types.

108
00:05:23,910 --> 00:05:27,720
‫So we have this fetch and a fetch redirect, for some reason.

109
00:05:27,720 --> 00:05:30,750
‫But we are only interested in the fetches here.

110
00:05:30,750 --> 00:05:34,020
‫And immediately you see that all these other ones

111
00:05:34,020 --> 00:05:38,400
‫which are not the last one, got canceled, right?

112
00:05:38,400 --> 00:05:42,210
‫And so we can also see that now we no longer have

113
00:05:42,210 --> 00:05:45,810
‫all these different requests happening at the same time.

114
00:05:45,810 --> 00:05:47,670
‫So this one here started basically

115
00:05:47,670 --> 00:05:50,460
‫and then immediately as the next one started,

116
00:05:50,460 --> 00:05:54,150
‫this one was finished, so it was canceled.

117
00:05:54,150 --> 00:05:57,633
‫This thing keeps popping up, makes it hard to explain.

118
00:05:58,470 --> 00:06:00,600
‫And yeah, then finally,

119
00:06:00,600 --> 00:06:03,150
‫the last one that we were actually interested in,

120
00:06:03,150 --> 00:06:05,460
‫was of course not canceled.

121
00:06:05,460 --> 00:06:08,163
‫So this one then went all the way until the end.

122
00:06:09,210 --> 00:06:10,140
‫All right.

123
00:06:10,140 --> 00:06:12,390
‫But here we can very clearly see

124
00:06:12,390 --> 00:06:15,360
‫that there is basically only one request happening

125
00:06:15,360 --> 00:06:20,070
‫at a time, until it then got canceled by the next one.

126
00:06:20,070 --> 00:06:24,090
‫So let's just see why this is actually working.

127
00:06:24,090 --> 00:06:27,480
‫So each time that there is a new keystroke here,

128
00:06:27,480 --> 00:06:30,720
‫the component gets re-rendered, right.

129
00:06:30,720 --> 00:06:32,580
‫And as we already know,

130
00:06:32,580 --> 00:06:36,450
‫between each of these re-renders, this function here,

131
00:06:36,450 --> 00:06:39,390
‫so the cleanup function, will get called.

132
00:06:39,390 --> 00:06:41,970
‫And so what that means, is that each time

133
00:06:41,970 --> 00:06:45,300
‫that there is a new keystroke, so a new re-render,

134
00:06:45,300 --> 00:06:49,050
‫our controller will abort the current fetch request.

135
00:06:49,050 --> 00:06:52,620
‫And so that is exactly what we want, right.

136
00:06:52,620 --> 00:06:56,400
‫So we want to cancel the current request each time

137
00:06:56,400 --> 00:06:58,020
‫that a new one comes in.

138
00:06:58,020 --> 00:07:00,540
‫And so that is exactly the point in time

139
00:07:00,540 --> 00:07:04,170
‫in which our cleanup function gets called.

140
00:07:04,170 --> 00:07:07,500
‫And so again, the cleanup function is a perfect place

141
00:07:07,500 --> 00:07:11,280
‫for doing this kind of work between renders.

142
00:07:11,280 --> 00:07:13,020
‫Now the problem with this is,

143
00:07:13,020 --> 00:07:16,410
‫that as soon as a request get canceled,

144
00:07:16,410 --> 00:07:19,860
‫JavaScript actually sees that as an error.

145
00:07:19,860 --> 00:07:23,403
‫And so that's why we then get the error here.

146
00:07:24,300 --> 00:07:27,480
‫So basically this fetch request, as it is canceled,

147
00:07:27,480 --> 00:07:30,510
‫it'll throw an error, which will then immediately go

148
00:07:30,510 --> 00:07:34,500
‫here into our catch block, where the error is set.

149
00:07:34,500 --> 00:07:38,880
‫And so that's why we can also see the errors down here.

150
00:07:38,880 --> 00:07:41,850
‫So saying that the user aborted a request,

151
00:07:41,850 --> 00:07:44,550
‫which is exactly what we have here.

152
00:07:44,550 --> 00:07:47,490
‫However, this is not really an error

153
00:07:47,490 --> 00:07:49,020
‫here in our application.

154
00:07:49,020 --> 00:07:51,750
‫And so we want to ignore that.

155
00:07:51,750 --> 00:07:54,120
‫So what we can do in order to do that

156
00:07:54,120 --> 00:07:58,020
‫is to say, if error.name

157
00:07:58,020 --> 00:08:00,540
‫is different from

158
00:08:00,540 --> 00:08:05,540
‫abort error, only then we actually want to set the error.

159
00:08:09,150 --> 00:08:13,440
‫And this works because the error that is thrown here,

160
00:08:13,440 --> 00:08:16,050
‫so this object that we then get access to,

161
00:08:16,050 --> 00:08:19,800
‫will have the name property set to abort error.

162
00:08:19,800 --> 00:08:22,890
‫And then here we use that to our advantage, to again,

163
00:08:22,890 --> 00:08:27,030
‫basically ignore these errors that are of this type.

164
00:08:27,030 --> 00:08:28,590
‫And so only if they're not,

165
00:08:28,590 --> 00:08:32,700
‫we set the error to the one that we are interested in.

166
00:08:32,700 --> 00:08:34,740
‫Now to make this work here,

167
00:08:34,740 --> 00:08:37,860
‫actually, we need to also set the error

168
00:08:37,860 --> 00:08:41,943
‫to an empty string, after the movies have been set.

169
00:08:44,820 --> 00:08:48,450
‫So we basically set the error to an empty string,

170
00:08:48,450 --> 00:08:52,050
‫here at the beginning and at the end as well.

171
00:08:52,050 --> 00:08:52,883
‫Okay.

172
00:08:52,883 --> 00:08:55,113
‫And so let's try that now.

173
00:08:56,700 --> 00:08:58,470
‫And we are still doing that throttling,

174
00:08:58,470 --> 00:09:01,380
‫that's why it took so much time here.

175
00:09:01,380 --> 00:09:04,383
‫But anyway, let's just again clean this here.

176
00:09:08,220 --> 00:09:11,290
‫And, so now we never got that error

177
00:09:17,220 --> 00:09:20,610
‫so we still got all our requests here, canceled.

178
00:09:20,610 --> 00:09:22,620
‫And so, no more race conditions

179
00:09:22,620 --> 00:09:25,833
‫and no more unnecessary data being fetched.

180
00:09:26,820 --> 00:09:29,580
‫And so, if at some point in the future,

181
00:09:29,580 --> 00:09:32,910
‫you are going to do your own HTP requests

182
00:09:32,910 --> 00:09:37,170
‫in an effect like this, make sure to always clean up

183
00:09:37,170 --> 00:09:38,880
‫after your fetch requests,

184
00:09:38,880 --> 00:09:41,400
‫in case that you have a situation

185
00:09:41,400 --> 00:09:45,090
‫where many requests can be fired off very rapidly,

186
00:09:45,090 --> 00:09:46,440
‫one after another.

187
00:09:46,440 --> 00:09:49,413
‫Which is exactly the situation that we have here.

188
00:09:50,250 --> 00:09:53,310
‫So here, when we click on one of the movies

189
00:09:53,310 --> 00:09:55,110
‫and the data gets fetched,

190
00:09:55,110 --> 00:09:58,470
‫then usually we will not have so many requests

191
00:09:58,470 --> 00:09:59,910
‫one after another.

192
00:09:59,910 --> 00:10:02,160
‫Unless we click, like really fast

193
00:10:02,160 --> 00:10:04,560
‫between these movies right here.

194
00:10:04,560 --> 00:10:06,630
‫But that's usually not going to happen.

195
00:10:06,630 --> 00:10:09,600
‫And so therefore, there's no need to clean up

196
00:10:09,600 --> 00:10:11,640
‫the fetch that we're doing here

197
00:10:11,640 --> 00:10:13,983
‫in this movie details component.