1
00:00:01,110 --> 00:00:03,450
‫So as I just mentioned,

2
00:00:03,450 --> 00:00:06,630
‫there is actually another Advanced React Pattern

3
00:00:06,630 --> 00:00:09,180
‫that I want to quickly show you.

4
00:00:09,180 --> 00:00:11,640
‫Now, this one isn't super important,

5
00:00:11,640 --> 00:00:15,330
‫which is why I didn't even include it in the first lecture

6
00:00:15,330 --> 00:00:16,500
‫of the section,

7
00:00:16,500 --> 00:00:18,900
‫but I still need you to know about it.

8
00:00:18,900 --> 00:00:20,760
‫And so let's now take a look

9
00:00:20,760 --> 00:00:23,313
‫at the Higher Order Component Pattern.

10
00:00:24,900 --> 00:00:28,020
‫So basically we want to do now something similar

11
00:00:28,020 --> 00:00:30,690
‫to what we just did with the Render Props

12
00:00:30,690 --> 00:00:34,410
‫but with the Higher Order Component Pattern.

13
00:00:34,410 --> 00:00:36,750
‫Now, I would actually say that

14
00:00:36,750 --> 00:00:41,750
‫almost no one still writes Higher Order Components by hand,

15
00:00:41,940 --> 00:00:45,900
‫but I'm still gonna show you this because some libraries,

16
00:00:45,900 --> 00:00:49,560
‫do actually expose Higher Order Components,

17
00:00:49,560 --> 00:00:53,880
‫and then it's gonna be very useful to know what they are.

18
00:00:53,880 --> 00:00:56,700
‫So you don't need to know how to write them

19
00:00:56,700 --> 00:00:58,200
‫and in this lecture,

20
00:00:58,200 --> 00:01:01,680
‫I will just quickly show you a Higher Order Component,

21
00:01:01,680 --> 00:01:02,760
‫what it is,

22
00:01:02,760 --> 00:01:04,410
‫and how it works

23
00:01:04,410 --> 00:01:07,440
‫and also why it would be used.

24
00:01:07,440 --> 00:01:12,390
‫So, let's imagine that we got this component right here.

25
00:01:12,390 --> 00:01:16,230
‫So this product list from a third party library

26
00:01:16,230 --> 00:01:18,570
‫and that we cannot change it.

27
00:01:18,570 --> 00:01:22,050
‫So we just got this here and we now still want

28
00:01:22,050 --> 00:01:25,350
‫to add these two toggle functionalities.

29
00:01:25,350 --> 00:01:29,220
‫So, this one right here and also this one

30
00:01:29,220 --> 00:01:34,220
‫but we cannot change this product list component.

31
00:01:34,350 --> 00:01:36,420
‫So how could we do that?

32
00:01:36,420 --> 00:01:41,190
‫Well, one way would be to write a Higher Order Component

33
00:01:41,190 --> 00:01:46,190
‫to basically enhance or improve this component right here.

34
00:01:46,710 --> 00:01:50,610
‫So, a Higher Order Component is simply a component

35
00:01:50,610 --> 00:01:53,010
‫that takes in another component

36
00:01:53,010 --> 00:01:56,970
‫and then returns a new component that is better,

37
00:01:56,970 --> 00:02:00,960
‫so an enhanced version of the initial component.

38
00:02:00,960 --> 00:02:04,350
‫And here I actually already created this.

39
00:02:04,350 --> 00:02:05,640
‫So,

40
00:02:05,640 --> 00:02:06,570
‫right here,

41
00:02:06,570 --> 00:02:10,390
‫we have this Higher Order Component .js file

42
00:02:13,350 --> 00:02:15,333
‫and let's take a look at it.

43
00:02:16,560 --> 00:02:20,930
‫So, that component is this one called withToggles

44
00:02:20,930 --> 00:02:23,580
‫because it will basically add back

45
00:02:23,580 --> 00:02:26,340
‫those two toggles that they showed you earlier

46
00:02:26,340 --> 00:02:28,170
‫to our component.

47
00:02:28,170 --> 00:02:31,410
‫And that component is the wrapped component

48
00:02:31,410 --> 00:02:33,660
‫that we can pass in.

49
00:02:33,660 --> 00:02:36,690
‫So it's pretty common that a Higher Order Component

50
00:02:36,690 --> 00:02:41,340
‫is called something that starts with this with keyword,

51
00:02:41,340 --> 00:02:43,020
‫so that's kind of a convention,

52
00:02:43,020 --> 00:02:46,140
‫because basically it will add these toggles

53
00:02:46,140 --> 00:02:48,360
‫to the component that we pass in.

54
00:02:48,360 --> 00:02:52,683
‫And so then we have a new component with toggles, right?

55
00:02:53,850 --> 00:02:56,460
‫But anyway, as I mentioned earlier

56
00:02:56,460 --> 00:03:00,390
‫the Higher Order Component does return a new component.

57
00:03:00,390 --> 00:03:02,943
‫and that's exactly what we have here.

58
00:03:04,050 --> 00:03:06,990
‫So we return this new list component

59
00:03:06,990 --> 00:03:11,790
‫which has the identical logic that we had previously.

60
00:03:11,790 --> 00:03:14,460
‫What's special now about this is that,

61
00:03:14,460 --> 00:03:16,620
‫here in the middle of all this logic

62
00:03:16,620 --> 00:03:21,000
‫it does then basically contain that wrapped component,

63
00:03:21,000 --> 00:03:23,463
‫so the component that we are going to pass in.

64
00:03:24,480 --> 00:03:27,870
‫Then here all the props are going to be spread,

65
00:03:27,870 --> 00:03:31,080
‫so basically to get them from the component

66
00:03:31,080 --> 00:03:33,930
‫that we pass in right here.

67
00:03:33,930 --> 00:03:36,990
‫So this is a pretty common pattern

68
00:03:36,990 --> 00:03:40,170
‫and then here we just have this items props

69
00:03:40,170 --> 00:03:43,413
‫with these display items that are computed up here.

70
00:03:45,810 --> 00:03:50,810
‫So again, the way in which we write a Higher Order Component

71
00:03:50,850 --> 00:03:52,740
‫is not that important.

72
00:03:52,740 --> 00:03:56,130
‫What matters is that it's usually called something

73
00:03:56,130 --> 00:03:59,370
‫that starts with, with and that it takes

74
00:03:59,370 --> 00:04:02,640
‫in one component and returns a new one.

75
00:04:02,640 --> 00:04:05,610
‫And the new one adds some functionality

76
00:04:05,610 --> 00:04:08,430
‫to that passing component.

77
00:04:08,430 --> 00:04:09,990
‫So it's then returned here,

78
00:04:09,990 --> 00:04:13,350
‫together with a bunch of other stuff.

79
00:04:13,350 --> 00:04:18,350
‫And now we can use this Higher Order Component,

80
00:04:18,390 --> 00:04:19,233
‫right here.

81
00:04:23,040 --> 00:04:26,580
‫So, let's now create a product

82
00:04:26,580 --> 00:04:27,413
‫list,

83
00:04:28,320 --> 00:04:30,843
‫so similar to the name that we have down here.

84
00:04:32,100 --> 00:04:33,933
‫A product list with,

85
00:04:34,920 --> 00:04:35,790
‫toggles

86
00:04:35,790 --> 00:04:38,490
‫and so here is that with toggles again.

87
00:04:38,490 --> 00:04:41,620
‫And this will be the result of calling

88
00:04:42,630 --> 00:04:43,773
‫with toggles,

89
00:04:45,324 --> 00:04:47,590
‫and then passing in the

90
00:04:48,570 --> 00:04:51,753
‫product list component.

91
00:04:52,830 --> 00:04:54,630
‫So this one right here,

92
00:04:54,630 --> 00:04:56,073
‫maybe let's place it,

93
00:04:57,450 --> 00:05:02,450
‫actually here just to make this a bit easier to understand.

94
00:05:03,870 --> 00:05:06,600
‫So we had the product list component

95
00:05:06,600 --> 00:05:09,810
‫and then we passed that into the Higher Order Component

96
00:05:09,810 --> 00:05:11,550
‫called withToggles.

97
00:05:11,550 --> 00:05:13,950
‫And so since this returns a component,

98
00:05:13,950 --> 00:05:17,070
‫we then stored that component here in this new one.

99
00:05:17,070 --> 00:05:19,740
‫So ProductListWithToggles

100
00:05:19,740 --> 00:05:23,703
‫and now all we need to do is to use that here.

101
00:05:25,320 --> 00:05:26,223
‫So,

102
00:05:28,050 --> 00:05:30,150
‫let's give ourselves another div here

103
00:05:30,150 --> 00:05:32,890
‫with the class name of col-2

104
00:05:34,080 --> 00:05:38,523
‫just to keep them basically in a separate row here.

105
00:05:40,080 --> 00:05:44,670
‫And then first, let's take the ProductsList,

106
00:05:44,670 --> 00:05:47,643
‫so the original one just so we see the difference.

107
00:05:48,570 --> 00:05:53,570
‫And this one also accepts a title and the items.

108
00:05:53,880 --> 00:05:56,869
‫So let's call the title here,

109
00:05:56,869 --> 00:05:58,053
‫products,

110
00:06:00,060 --> 00:06:02,250
‫Higher Order Component

111
00:06:02,250 --> 00:06:05,880
‫and then the items should just be,

112
00:06:05,880 --> 00:06:07,233
‫the products.

113
00:06:09,900 --> 00:06:12,450
‫All right, then let's close these two

114
00:06:12,450 --> 00:06:14,670
‫as we no longer need them.

115
00:06:14,670 --> 00:06:17,250
‫And so then afterwards,

116
00:06:17,250 --> 00:06:20,073
‫or maybe let's even comment this entire row out.

117
00:06:20,970 --> 00:06:22,990
‫So grabbing all of this

118
00:06:27,300 --> 00:06:28,743
‫and there it disappears.

119
00:06:30,210 --> 00:06:33,900
‫So again, here we have that initial product list

120
00:06:33,900 --> 00:06:36,690
‫which doesn't have this button to close it

121
00:06:36,690 --> 00:06:39,090
‫or to collapse the items,

122
00:06:39,090 --> 00:06:40,290
‫right?

123
00:06:40,290 --> 00:06:43,233
‫But now let's duplicate this,

124
00:06:45,660 --> 00:06:47,850
‫and then here using,

125
00:06:47,850 --> 00:06:49,020
‫product list

126
00:06:49,020 --> 00:06:49,853
‫with

127
00:06:49,853 --> 00:06:51,300
‫toggles,

128
00:06:51,300 --> 00:06:54,900
‫give it a save and beautiful.

129
00:06:54,900 --> 00:06:57,810
‫So now we do have the toggle

130
00:06:57,810 --> 00:07:00,030
‫and hopefully the other one as well.

131
00:07:00,030 --> 00:07:01,950
‫And indeed, there we go.

132
00:07:01,950 --> 00:07:02,820
‫And so with this,

133
00:07:02,820 --> 00:07:06,630
‫we reached our goal of enhancing the product list

134
00:07:06,630 --> 00:07:10,260
‫with the features that we wanted it to have.

135
00:07:10,260 --> 00:07:13,350
‫So the features that the other lists also had,

136
00:07:13,350 --> 00:07:16,417
‫so these two toggles right there.

137
00:07:16,417 --> 00:07:18,150
‫All right,

138
00:07:18,150 --> 00:07:23,040
‫so if in any case you ever use a library which exports

139
00:07:23,040 --> 00:07:25,950
‫or which provides you with a Higher Order Component

140
00:07:25,950 --> 00:07:26,910
‫like this,

141
00:07:26,910 --> 00:07:29,433
‫then this is the logic behind that.

142
00:07:30,360 --> 00:07:33,720
‫All right, so you called a Higher Order Component

143
00:07:33,720 --> 00:07:35,310
‫with the initial one

144
00:07:35,310 --> 00:07:39,540
‫and that will then return you an enhanced component.

145
00:07:39,540 --> 00:07:42,630
‫And this is actually all I wanted you to know

146
00:07:42,630 --> 00:07:45,600
‫about the Higher Order Component pattern.

147
00:07:45,600 --> 00:07:48,510
‫It used to be extremely important in the past,

148
00:07:48,510 --> 00:07:50,700
‫again before we had React Hooks,

149
00:07:50,700 --> 00:07:53,700
‫but now, again this is all you need to know.

150
00:07:53,700 --> 00:07:56,220
‫And so let's now move on to probably

151
00:07:56,220 --> 00:07:59,100
‫the most important one that we're going to learn

152
00:07:59,100 --> 00:08:01,950
‫which is the Compound Component Pattern.

153
00:08:01,950 --> 00:08:03,783
‫So, see you there very soon.