1
00:00:01,020 --> 00:00:03,780
‫Let's now actually break the main rule

2
00:00:03,780 --> 00:00:06,270
‫of hooks that we just learned about,

3
00:00:06,270 --> 00:00:10,713
‫which is that hooks can only be called at the top level.

4
00:00:12,180 --> 00:00:16,020
‫And here I still have the Used Popcorn app open

5
00:00:16,020 --> 00:00:19,290
‫both in VS Code and in the browser

6
00:00:19,290 --> 00:00:22,860
‫and so that's because we will keep working on this app

7
00:00:22,860 --> 00:00:24,330
‫in this section.

8
00:00:24,330 --> 00:00:27,600
‫And so if for some reason you closed the application,

9
00:00:27,600 --> 00:00:31,323
‫then make sure to just open it up again here.

10
00:00:32,250 --> 00:00:36,870
‫Now, just like before, I will again duplicate this file here

11
00:00:36,870 --> 00:00:41,230
‫and then I'm gonna copy, or actually I'm gonna call it V2

12
00:00:42,420 --> 00:00:44,430
‫and so again, with this,

13
00:00:44,430 --> 00:00:48,720
‫we then can keep our previous versions of the code

14
00:00:48,720 --> 00:00:52,383
‫and let's actually get rid now of this dummy data.

15
00:00:54,990 --> 00:00:59,313
‫Just like this and also of this comment.

16
00:01:00,750 --> 00:01:03,213
‫So cleaning up the code a little bit.

17
00:01:04,080 --> 00:01:07,350
‫But now let's break some rules here,

18
00:01:07,350 --> 00:01:10,440
‫which as I mentioned before, is always a great way

19
00:01:10,440 --> 00:01:14,163
‫of learning why the rules exist in the first place.

20
00:01:15,240 --> 00:01:18,690
‫So coming here to our movie details component,

21
00:01:18,690 --> 00:01:21,330
‫this is where we will now write some code

22
00:01:21,330 --> 00:01:23,970
‫to break that rule.

23
00:01:23,970 --> 00:01:27,240
‫But let's actually start by again searching

24
00:01:27,240 --> 00:01:28,713
‫for some movies here.

25
00:01:31,530 --> 00:01:36,530
‫And then I will open this one up so that we can check out

26
00:01:37,440 --> 00:01:40,500
‫the hooks that we actually have right now

27
00:01:40,500 --> 00:01:42,330
‫in this component.

28
00:01:42,330 --> 00:01:46,470
‫So in the dev tools, check out the movie details component

29
00:01:46,470 --> 00:01:48,030
‫which is this one,

30
00:01:48,030 --> 00:01:52,470
‫and so down here we have the list of hooks that we just saw

31
00:01:52,470 --> 00:01:54,570
‫in the previous lecture.

32
00:01:54,570 --> 00:01:56,460
‫To make this even bigger

33
00:01:56,460 --> 00:02:01,050
‫and so indeed you see that the hooks are actually numbered.

34
00:02:01,050 --> 00:02:05,970
‫So in fact, each of the hooks is identified by React

35
00:02:05,970 --> 00:02:10,560
‫by their order number, not some name or anything like that,

36
00:02:10,560 --> 00:02:12,930
‫but really only the number.

37
00:02:12,930 --> 00:02:16,290
‫So this first hook here is exactly this movie.

38
00:02:16,290 --> 00:02:20,250
‫Then we have the is loading state, which is currently false.

39
00:02:20,250 --> 00:02:23,160
‫Then we have the user rating, which is this one

40
00:02:23,160 --> 00:02:25,942
‫and then we have our three effects.

41
00:02:25,942 --> 00:02:30,683
‫All right, so the three effects down here, okay.

42
00:02:32,580 --> 00:02:37,580
‫Now if we did call a hook outside of the top level,

43
00:02:37,980 --> 00:02:41,220
‫so basically if we called a hook conditionally,

44
00:02:41,220 --> 00:02:45,180
‫that would mess up this entire order here

45
00:02:45,180 --> 00:02:48,480
‫and so that's where we would then run into problems

46
00:02:48,480 --> 00:02:51,870
‫and that's exactly what we want to do now.

47
00:02:51,870 --> 00:02:53,340
‫So let's experiment here

48
00:02:53,340 --> 00:02:58,340
‫and let's say if the IMDB rating is greater than eight,

49
00:03:00,608 --> 00:03:05,440
‫then we want to create two new variables called IsTop

50
00:03:06,450 --> 00:03:11,450
‫and SetIsTop and then equals use state set to true.

51
00:03:14,730 --> 00:03:18,600
‫Now, as we save this, VS Code will immediately complain

52
00:03:18,600 --> 00:03:21,951
‫and tell us that here we are not allowed to use

53
00:03:21,951 --> 00:03:26,820
‫Use State conditionally, okay.

54
00:03:26,820 --> 00:03:30,810
‫But we can actually disable this ESLint rule.

55
00:03:30,810 --> 00:03:35,537
‫So just write this comment here ESLint-disable

56
00:03:38,730 --> 00:03:42,480
‫just like this and then it should work.

57
00:03:42,480 --> 00:03:44,430
‫I mean, at least here in VS Code,

58
00:03:44,430 --> 00:03:47,343
‫we no longer get the problems that we had before.

59
00:03:48,600 --> 00:03:50,970
‫So let's reload here,

60
00:03:50,970 --> 00:03:53,637
‫then let's again search for "Interstellar."

61
00:03:56,880 --> 00:04:00,750
‫Okay and now I will first select this one here,

62
00:04:00,750 --> 00:04:03,933
‫which has a rating that is not greater than eight.

63
00:04:06,960 --> 00:04:10,920
‫And well here we already have some problem.

64
00:04:10,920 --> 00:04:15,570
‫Ah, it's because this actually must be after

65
00:04:16,620 --> 00:04:17,883
‫the restructuring.

66
00:04:19,410 --> 00:04:23,160
‫So of course at this point, the IMDB rating variable

67
00:04:23,160 --> 00:04:24,783
‫is not even defined yet.

68
00:04:25,710 --> 00:04:27,573
‫So let's just try that again.

69
00:04:31,260 --> 00:04:33,843
‫And again, let's select this one here.

70
00:04:35,070 --> 00:04:38,910
‫And so for now, we don't have any problems.

71
00:04:38,910 --> 00:04:42,960
‫So let's again check out the state here

72
00:04:42,960 --> 00:04:47,403
‫or the list of hooks and so indeed we have our six hooks,

73
00:04:48,240 --> 00:04:52,867
‫so the same three states as before and the three effects.

74
00:04:52,867 --> 00:04:57,867
‫So that's because the rating in this case is just 1.7

75
00:04:57,900 --> 00:05:01,380
‫and so then this used state here was not called.

76
00:05:01,380 --> 00:05:03,660
‫But now let's check out what happens

77
00:05:03,660 --> 00:05:07,383
‫with "Interstellar" when the rating is greater than eight.

78
00:05:08,430 --> 00:05:10,170
‫So as we click,

79
00:05:10,170 --> 00:05:13,890
‫well, our application immediately stops working.

80
00:05:13,890 --> 00:05:16,380
‫So let's come here to the console

81
00:05:16,380 --> 00:05:20,820
‫and then React immediately tells us that it has detected

82
00:05:20,820 --> 00:05:25,080
‫the change in the order of hooks called in this component.

83
00:05:25,080 --> 00:05:29,340
‫So it tells here actually some helpful information.

84
00:05:29,340 --> 00:05:33,000
‫So in the previous render there were three used data hooks

85
00:05:33,000 --> 00:05:35,463
‫and then the number four was an effect.

86
00:05:36,480 --> 00:05:39,510
‫So this effect right here was hook number four

87
00:05:39,510 --> 00:05:41,790
‫before in the previous render

88
00:05:41,790 --> 00:05:45,990
‫and that previous render actually happened after we clicked

89
00:05:45,990 --> 00:05:48,600
‫on the movie but while the movie data

90
00:05:48,600 --> 00:05:50,340
‫had not been fetched yet.

91
00:05:50,340 --> 00:05:54,390
‫So at that point the IMDB rating here was still undefined

92
00:05:54,390 --> 00:05:57,840
‫and so then this used data hook was not called.

93
00:05:57,840 --> 00:06:00,390
‫But then as soon as the data arrived,

94
00:06:00,390 --> 00:06:03,840
‫the IMDB rating was indeed greater than eight

95
00:06:03,840 --> 00:06:06,690
‫and so then React called use state here

96
00:06:06,690 --> 00:06:09,060
‫and so then on the next render,

97
00:06:09,060 --> 00:06:12,300
‫the fourth hook was no longer the use effect

98
00:06:12,300 --> 00:06:15,180
‫but this state right here.

99
00:06:15,180 --> 00:06:18,330
‫And so therefore, now clearly we can see

100
00:06:18,330 --> 00:06:22,020
‫that our linked list of hooks is different.

101
00:06:22,020 --> 00:06:25,233
‫And so React is not happy about that at all.

102
00:06:26,340 --> 00:06:29,010
‫So let's, of course, turn this off

103
00:06:29,010 --> 00:06:31,683
‫and then it should go back to working.

104
00:06:33,150 --> 00:06:36,030
‫So this one is pretty obvious that we shouldn't use it

105
00:06:36,030 --> 00:06:39,840
‫and also as you saw, ESLint immediately warned us

106
00:06:39,840 --> 00:06:42,810
‫of that problem that we were creating.

107
00:06:42,810 --> 00:06:44,730
‫However, in certain situations,

108
00:06:44,730 --> 00:06:49,080
‫you might not have ESLint installed and so in those cases,

109
00:06:49,080 --> 00:06:51,990
‫you really need to be very careful.

110
00:06:51,990 --> 00:06:54,990
‫Now one more subtle thing that can happen

111
00:06:54,990 --> 00:06:57,300
‫is an early return.

112
00:06:57,300 --> 00:07:02,300
‫So if we say, if IMDB rating greater than eight,

113
00:07:04,290 --> 00:07:09,290
‫then let's immediately return some JSX here.

114
00:07:09,690 --> 00:07:13,713
‫Let's say greatest ever.

115
00:07:15,600 --> 00:07:19,707
‫And so if we do the same thing as before, "Interstellar",

116
00:07:21,450 --> 00:07:25,050
‫then here the IMDB rating is less than eight.

117
00:07:25,050 --> 00:07:27,000
‫But as we click here,

118
00:07:27,000 --> 00:07:29,943
‫then we run into exactly the same problem.

119
00:07:31,110 --> 00:07:34,080
‫Now this time the error message doesn't contain

120
00:07:34,080 --> 00:07:37,890
‫the previous list of hooks, but still it tells us

121
00:07:37,890 --> 00:07:41,760
‫that this time fewer hooks were actually rendered

122
00:07:41,760 --> 00:07:45,990
‫and so that's because right now we only have the movie

123
00:07:45,990 --> 00:07:50,490
‫and so these three states, but then the effects,

124
00:07:50,490 --> 00:07:52,530
‫so the three effects that we had,

125
00:07:52,530 --> 00:07:55,170
‫they are now no longer created.

126
00:07:55,170 --> 00:07:58,950
‫So instead of the six hooks, we now only have three hooks

127
00:07:58,950 --> 00:08:02,490
‫and so therefore, this again creates a big problem

128
00:08:02,490 --> 00:08:06,060
‫because like this, we cannot guarantee that all the hooks

129
00:08:06,060 --> 00:08:09,000
‫are always called in the same order.

130
00:08:09,000 --> 00:08:10,800
‫So be very careful of that

131
00:08:10,800 --> 00:08:13,740
‫and so now after this small experiment,

132
00:08:13,740 --> 00:08:16,770
‫you know what these error messages here mean

133
00:08:16,770 --> 00:08:21,150
‫and so hopefully you enjoyed this small experiment.

134
00:08:21,150 --> 00:08:22,830
‫Let's just turn this off.

135
00:08:22,830 --> 00:08:25,650
‫And also let's remove this line right here

136
00:08:25,650 --> 00:08:28,770
‫because of course we want ESLint to work

137
00:08:28,770 --> 00:08:33,333
‫so that it can warn us before we create a bug like this.