1 00:00:01,170 --> 00:00:04,740 ‫Now, let's learn about the most awesome 2 00:00:04,740 --> 00:00:07,920 ‫and by far my favorite React pattern, 3 00:00:07,920 --> 00:00:10,863 ‫which is the Compound Component pattern. 4 00:00:12,630 --> 00:00:15,480 ‫And as a starting point to this example 5 00:00:15,480 --> 00:00:17,130 ‫that we're going to build together, 6 00:00:17,130 --> 00:00:19,709 ‫we have yet another code sandbox. 7 00:00:19,709 --> 00:00:23,010 ‫And I will share the link to this one as always 8 00:00:23,010 --> 00:00:25,653 ‫in this lecture's resources. 9 00:00:26,520 --> 00:00:28,770 ‫Now let's start by forking this one, 10 00:00:28,770 --> 00:00:31,230 ‫so that you can get your own copy, 11 00:00:31,230 --> 00:00:33,660 ‫and then let's start by understanding 12 00:00:33,660 --> 00:00:37,173 ‫what the Compound Component pattern is all about. 13 00:00:38,190 --> 00:00:41,340 ‫So, the idea of a Compound Component 14 00:00:41,340 --> 00:00:45,420 ‫is that we can create a set of related components 15 00:00:45,420 --> 00:00:49,710 ‫that together achieve a common and useful task, 16 00:00:49,710 --> 00:00:52,620 ‫for example, implementing a counter, 17 00:00:52,620 --> 00:00:55,950 ‫such as we are going to do in this lecture. 18 00:00:55,950 --> 00:01:00,030 ‫But of course, this pattern can also be used in all kinds 19 00:01:00,030 --> 00:01:03,360 ‫of components that are actually more useful, 20 00:01:03,360 --> 00:01:07,620 ‫for example modal windows, pagination, tables, 21 00:01:07,620 --> 00:01:08,763 ‫and so on. 22 00:01:09,840 --> 00:01:12,090 ‫So basically, the way we implement 23 00:01:12,090 --> 00:01:15,270 ‫this is that we create a parent component, 24 00:01:15,270 --> 00:01:17,880 ‫and then a few different child components 25 00:01:17,880 --> 00:01:20,460 ‫that really belong to the parent, 26 00:01:20,460 --> 00:01:24,420 ‫and that really only make sense when used together 27 00:01:24,420 --> 00:01:26,670 ‫with the parent component. 28 00:01:26,670 --> 00:01:30,510 ‫And a good example of this is the HTML select 29 00:01:30,510 --> 00:01:32,820 ‫and option elements. 30 00:01:32,820 --> 00:01:36,510 ‫So the select element implements a select box 31 00:01:36,510 --> 00:01:39,180 ‫and the option element implements each 32 00:01:39,180 --> 00:01:42,960 ‫of the select options inside the select box. 33 00:01:42,960 --> 00:01:44,580 ‫Right? 34 00:01:44,580 --> 00:01:47,550 ‫So we have used this kind of HTML all the time. 35 00:01:47,550 --> 00:01:51,540 ‫And so these option elements can really only be used 36 00:01:51,540 --> 00:01:54,060 ‫inside a select element. 37 00:01:54,060 --> 00:01:57,420 ‫So they only make sense within that element. 38 00:01:57,420 --> 00:02:01,830 ‫And so this is essentially exactly the same principle 39 00:02:01,830 --> 00:02:05,700 ‫as we are going to use in compound components. 40 00:02:05,700 --> 00:02:09,960 ‫And this will then allow us to implement highly flexible 41 00:02:09,960 --> 00:02:12,360 ‫and highly reusable components 42 00:02:12,360 --> 00:02:15,540 ‫with a very, very expressive API. 43 00:02:15,540 --> 00:02:19,890 ‫And all without basically using no props at all. 44 00:02:19,890 --> 00:02:22,440 ‫So after implementing this example, 45 00:02:22,440 --> 00:02:25,260 ‫and the next ones in the next few videos, 46 00:02:25,260 --> 00:02:29,250 ‫you will see the potential for using this everywhere. 47 00:02:29,250 --> 00:02:31,380 ‫And let me actually start by showing you 48 00:02:31,380 --> 00:02:34,320 ‫how we are going to use the component that we're going 49 00:02:34,320 --> 00:02:36,240 ‫to build in practice. 50 00:02:36,240 --> 00:02:38,550 ‫So that will then show you how this really 51 00:02:38,550 --> 00:02:42,270 ‫is super flexible and reusable. 52 00:02:42,270 --> 00:02:47,250 ‫So, let's say that we have a counter and nevermind 53 00:02:47,250 --> 00:02:49,710 ‫about this other one that we have here. 54 00:02:49,710 --> 00:02:52,200 ‫We will talk about that one in a second. 55 00:02:52,200 --> 00:02:55,530 ‫And then let's say we close it here immediately. 56 00:02:55,530 --> 00:02:56,730 ‫And then in there, 57 00:02:56,730 --> 00:03:01,730 ‫let's say we have a counter dot label component. 58 00:03:04,010 --> 00:03:05,280 ‫Then we close that. 59 00:03:05,280 --> 00:03:06,393 ‫And here, for example, 60 00:03:07,430 --> 00:03:11,260 ‫we can say my super flexible counter. 61 00:03:13,860 --> 00:03:18,860 ‫Then let's also say we have an increase button. 62 00:03:20,880 --> 00:03:22,593 ‫So let's self-close this one. 63 00:03:27,510 --> 00:03:30,150 ‫And then here we might want to pass in an icon, 64 00:03:30,150 --> 00:03:32,849 ‫for example, like the plus icon. 65 00:03:32,849 --> 00:03:37,849 ‫And maybe we also have a decrease component. 66 00:03:40,800 --> 00:03:42,180 ‫And all of this, of course, 67 00:03:42,180 --> 00:03:46,050 ‫will make more sense when we actually implement this. 68 00:03:46,050 --> 00:03:47,940 ‫And then in the end, 69 00:03:47,940 --> 00:03:51,900 ‫let's say we also then have a counter.count, 70 00:03:51,900 --> 00:03:55,440 ‫where we actually display the result of the counter. 71 00:03:55,440 --> 00:03:59,160 ‫And so all of this is now super flexible, because we could, 72 00:03:59,160 --> 00:04:02,520 ‫for example, just move this count here, 73 00:04:02,520 --> 00:04:06,420 ‫and maybe do the increase here and a decrease here. 74 00:04:06,420 --> 00:04:09,750 ‫And maybe we want a label here at the very end, 75 00:04:09,750 --> 00:04:12,810 ‫or maybe we don't want a label at all. 76 00:04:12,810 --> 00:04:16,200 ‫And so, we can very easily configure all of this simply 77 00:04:16,200 --> 00:04:18,300 ‫by moving around the components. 78 00:04:18,300 --> 00:04:22,350 ‫And the alternative to doing this would be to create tons 79 00:04:22,350 --> 00:04:26,340 ‫of props to exactly configure the component 80 00:04:26,340 --> 00:04:27,363 ‫as we wanted. 81 00:04:28,719 --> 00:04:30,120 ‫And so that would then create a so-called 82 00:04:30,120 --> 00:04:32,913 ‫prop explosion like we have it here. 83 00:04:33,810 --> 00:04:36,150 ‫So here we pass in all these different props 84 00:04:36,150 --> 00:04:37,500 ‫for all these things. 85 00:04:37,500 --> 00:04:40,080 ‫And then here we, for example, 86 00:04:40,080 --> 00:04:41,970 ‫have this one to hide the label, 87 00:04:41,970 --> 00:04:45,030 ‫while here we could simply delete this, 88 00:04:45,030 --> 00:04:47,850 ‫or just simply not write it at all. 89 00:04:47,850 --> 00:04:51,450 ‫Or we have height increase or height decrease, 90 00:04:51,450 --> 00:04:55,380 ‫where again here we would just have to delete this. 91 00:04:55,380 --> 00:04:58,200 ‫And, of course, this wouldn't even be enough. 92 00:04:58,200 --> 00:05:00,960 ‫So we might have to also define something like 93 00:05:00,960 --> 00:05:04,680 ‫position count or something like this. 94 00:05:04,680 --> 00:05:09,600 ‫And then here, maybe we have to write top. 95 00:05:09,600 --> 00:05:11,490 ‫So, I'm just making things up here 96 00:05:11,490 --> 00:05:14,910 ‫because this is just to show that without the flexibility 97 00:05:14,910 --> 00:05:17,520 ‫of a compound component like this one, 98 00:05:17,520 --> 00:05:21,120 ‫we would have to pass in 10 or 20 props to configure it 99 00:05:21,120 --> 00:05:25,380 ‫in the same way that we can easily achieve like this. 100 00:05:25,380 --> 00:05:27,390 ‫And that's not even the only advantage, 101 00:05:27,390 --> 00:05:29,040 ‫as you will see later. 102 00:05:29,040 --> 00:05:32,010 ‫So once we actually start implementing this. 103 00:05:32,010 --> 00:05:36,300 ‫And actually, let's start doing that right now. 104 00:05:36,300 --> 00:05:37,980 ‫So there's no need to wait, 105 00:05:37,980 --> 00:05:40,923 ‫because we already know what we want to do. 106 00:05:41,880 --> 00:05:45,510 ‫So, how can we build something like this? 107 00:05:45,510 --> 00:05:49,320 ‫Well, first of all, here we have the counter component. 108 00:05:49,320 --> 00:05:52,380 ‫And so this one here should probably keep the state 109 00:05:52,380 --> 00:05:55,023 ‫of what the count actually is. 110 00:05:55,950 --> 00:05:57,750 ‫So let's open up our files, 111 00:05:57,750 --> 00:06:00,903 ‫because I already have this counter.js. 112 00:06:02,490 --> 00:06:04,750 ‫And so here, let's add 113 00:06:07,200 --> 00:06:09,510 ‫that count value. 114 00:06:09,510 --> 00:06:14,280 ‫So, count and set count is equal 115 00:06:14,280 --> 00:06:15,603 ‫to useState. 116 00:06:19,110 --> 00:06:21,570 ‫And let's start at zero 117 00:06:21,570 --> 00:06:25,650 ‫and then import useState, 118 00:06:25,650 --> 00:06:28,623 ‫of course from React. 119 00:06:33,060 --> 00:06:37,530 ‫And let's also immediately create some simple 120 00:06:37,530 --> 00:06:39,270 ‫handler functions here. 121 00:06:39,270 --> 00:06:42,933 ‫And let's make them arrow functions called increase. 122 00:06:47,400 --> 00:06:50,193 ‫So, just setcount. 123 00:06:53,820 --> 00:06:56,890 ‫And then let's do another one 124 00:06:57,870 --> 00:07:01,473 ‫for decrease like this. 125 00:07:02,310 --> 00:07:03,143 ‫Great. 126 00:07:03,143 --> 00:07:05,250 ‫So this is already a starting point, 127 00:07:05,250 --> 00:07:08,490 ‫but really just a small starting point. 128 00:07:08,490 --> 00:07:12,510 ‫Because how can we now implement something like this? 129 00:07:12,510 --> 00:07:15,570 ‫So for example, how can discount value 130 00:07:15,570 --> 00:07:19,200 ‫like here actually know what the current state is 131 00:07:19,200 --> 00:07:21,150 ‫in this counter component? 132 00:07:21,150 --> 00:07:24,420 ‫Because I mean, we are not passing any props 133 00:07:24,420 --> 00:07:25,293 ‫between here. 134 00:07:26,630 --> 00:07:28,410 ‫And so again, how will this component here know 135 00:07:28,410 --> 00:07:30,090 ‫what the current state is? 136 00:07:30,090 --> 00:07:34,200 ‫Or also, how will this component right here know how 137 00:07:34,200 --> 00:07:38,490 ‫to increase the state and this one how to decrease it? 138 00:07:38,490 --> 00:07:43,170 ‫Well, as we just mentioned, we cannot use props for that. 139 00:07:43,170 --> 00:07:46,530 ‫But thankfully for us, we have another solution, 140 00:07:46,530 --> 00:07:49,680 ‫which is to actually use context. 141 00:07:49,680 --> 00:07:51,930 ‫And yeah, you heard that right. 142 00:07:51,930 --> 00:07:54,510 ‫We are going to use context to implement 143 00:07:54,510 --> 00:07:56,850 ‫the compound component pattern. 144 00:07:56,850 --> 00:08:01,680 ‫And so this is a really great use case for the context API. 145 00:08:01,680 --> 00:08:06,000 ‫Maybe if you ask me, even the greatest use case. 146 00:08:06,000 --> 00:08:10,623 ‫And so, let's create ourselves a new context. 147 00:08:11,940 --> 00:08:16,940 ‫So, let's call it the Counter Context, 148 00:08:20,120 --> 00:08:23,493 ‫and then create context. 149 00:08:24,600 --> 00:08:27,900 ‫And we don't need any default value here. 150 00:08:27,900 --> 00:08:30,150 ‫So before we go any further, 151 00:08:30,150 --> 00:08:32,070 ‫let's establish how we actually 152 00:08:32,070 --> 00:08:34,920 ‫implement a compound component. 153 00:08:34,920 --> 00:08:39,723 ‫So, the first step is to indeed create a context. 154 00:08:42,690 --> 00:08:46,890 ‫Then next up, we create the parent component. 155 00:08:46,890 --> 00:08:50,973 ‫So create the parent component, 156 00:08:52,743 --> 00:08:56,200 ‫then afterwards, we need to create 157 00:08:58,050 --> 00:09:02,533 ‫the child components that will help implementing 158 00:09:04,590 --> 00:09:07,410 ‫the common task 159 00:09:07,410 --> 00:09:11,430 ‫of this overall compound component. 160 00:09:11,430 --> 00:09:14,880 ‫So basically, those are going to be the decrease, count, 161 00:09:14,880 --> 00:09:17,880 ‫increase, and label components. 162 00:09:17,880 --> 00:09:20,140 ‫And so then afterwards in the end 163 00:09:21,480 --> 00:09:26,480 ‫we add the child components as properties 164 00:09:28,410 --> 00:09:31,860 ‫to the parent component. 165 00:09:31,860 --> 00:09:34,530 ‫And this step is actually optional, 166 00:09:34,530 --> 00:09:36,570 ‫but I really like to do it like this. 167 00:09:36,570 --> 00:09:39,330 ‫So then we only have to export the counter, 168 00:09:39,330 --> 00:09:41,283 ‫and the rest will just work. 169 00:09:42,690 --> 00:09:45,990 ‫All right, so this is basically always the recipe 170 00:09:45,990 --> 00:09:49,320 ‫that you are going to follow when you use this pattern. 171 00:09:49,320 --> 00:09:54,320 ‫And so, now let's use the context here to provide the state 172 00:09:54,450 --> 00:09:57,150 ‫to all our child components. 173 00:09:57,150 --> 00:09:58,770 ‫So, here we do 174 00:09:58,770 --> 00:10:03,770 ‫counter context.provider, remember. 175 00:10:05,910 --> 00:10:08,760 ‫So, we haven't used this for some time. 176 00:10:08,760 --> 00:10:11,580 ‫So, this is also a great refresher. 177 00:10:11,580 --> 00:10:14,100 ‫So, we want to pass the count, 178 00:10:14,100 --> 00:10:17,670 ‫the increase and the decrease functions here 179 00:10:17,670 --> 00:10:19,143 ‫to child components. 180 00:10:21,840 --> 00:10:23,223 ‫Let's close this. 181 00:10:24,870 --> 00:10:29,657 ‫And then here we will need the children, right? 182 00:10:30,690 --> 00:10:35,490 ‫And actually, let's wrap them in some other element here, 183 00:10:35,490 --> 00:10:37,110 ‫maybe a span. 184 00:10:37,110 --> 00:10:40,050 ‫So to make this a bit more flexible even, 185 00:10:40,050 --> 00:10:41,670 ‫because if we used a div, 186 00:10:41,670 --> 00:10:43,710 ‫that would then create a line break. 187 00:10:43,710 --> 00:10:48,240 ‫But then here we need the children prop to then place 188 00:10:48,240 --> 00:10:50,523 ‫whatever we pass into the counter. 189 00:10:53,760 --> 00:10:58,200 ‫So, basically these three or these four components here 190 00:10:58,200 --> 00:11:00,510 ‫will then become the children. 191 00:11:00,510 --> 00:11:02,250 ‫So, they will be placed here 192 00:11:02,250 --> 00:11:06,510 ‫and therefore they then get access to these three values 193 00:11:06,510 --> 00:11:08,583 ‫that we placed in the context. 194 00:11:09,600 --> 00:11:12,540 ‫And so let's now actually go ahead 195 00:11:12,540 --> 00:11:14,343 ‫and create those components. 196 00:11:15,330 --> 00:11:16,683 ‫So that's the counter. 197 00:11:22,380 --> 00:11:25,593 ‫Then also the label, 198 00:11:29,080 --> 00:11:29,913 ‫then increase 199 00:11:34,530 --> 00:11:35,583 ‫and decrease. 200 00:11:36,570 --> 00:11:39,843 ‫And so, now let's implement them one by one. 201 00:11:40,740 --> 00:11:44,320 ‫And here this one actually needs to be called just count 202 00:11:45,300 --> 00:11:48,780 ‫because this will only display the value itself. 203 00:11:48,780 --> 00:11:53,100 ‫And so, now we can use the use context hook, 204 00:11:53,100 --> 00:11:56,373 ‫and we then need to pass in the context itself. 205 00:11:57,480 --> 00:12:00,000 ‫So the counter context. 206 00:12:00,000 --> 00:12:04,353 ‫And then from there, we just take the count value. 207 00:12:06,660 --> 00:12:11,193 ‫And then we simply return that inside a span element. 208 00:12:17,490 --> 00:12:19,380 ‫Then here inside the label, 209 00:12:19,380 --> 00:12:21,570 ‫we just want to accept the children 210 00:12:21,570 --> 00:12:24,603 ‫and then basically immediately return them. 211 00:12:26,130 --> 00:12:28,680 ‫And also inside a span 212 00:12:28,680 --> 00:12:31,503 ‫so they don't create any line breaks. 213 00:12:35,460 --> 00:12:36,303 ‫Okay. 214 00:12:37,670 --> 00:12:40,680 ‫And then finally, the increase and decrease. 215 00:12:40,680 --> 00:12:43,110 ‫So, here we need to grab this function 216 00:12:43,110 --> 00:12:44,493 ‫again from the context. 217 00:12:47,610 --> 00:12:52,610 ‫So use context and then counter context. 218 00:12:53,160 --> 00:12:56,550 ‫And then we want to return a button 219 00:12:56,550 --> 00:13:01,550 ‫with the onClick prop set to increase. 220 00:13:03,810 --> 00:13:08,810 ‫And then here, let's actually accept a prop called icon, 221 00:13:10,650 --> 00:13:14,853 ‫so that the user of this component can use that here. 222 00:13:20,310 --> 00:13:22,300 ‫And now I will just 223 00:13:25,680 --> 00:13:26,883 ‫copy and paste this. 224 00:13:27,900 --> 00:13:28,953 ‫So decrease, 225 00:13:34,560 --> 00:13:36,330 ‫and there we go. 226 00:13:36,330 --> 00:13:40,110 ‫And so now the final step is actually pretty easy. 227 00:13:40,110 --> 00:13:42,210 ‫So, we just need to place them here 228 00:13:42,210 --> 00:13:44,370 ‫on the counter component. 229 00:13:44,370 --> 00:13:48,240 ‫And this is possible because this is simply a function. 230 00:13:48,240 --> 00:13:51,630 ‫So in JavaScript, we can add properties almost 231 00:13:51,630 --> 00:13:52,533 ‫to everything. 232 00:13:54,159 --> 00:13:55,440 ‫And so that includes functions. 233 00:13:55,440 --> 00:13:59,640 ‫So, we can do counter.count 234 00:13:59,640 --> 00:14:00,990 ‫should be equal 235 00:14:00,990 --> 00:14:03,720 ‫to the count component like this. 236 00:14:03,720 --> 00:14:08,250 ‫And then we just do the same for all the other ones. 237 00:14:08,250 --> 00:14:12,003 ‫So, counter.label will be the label, 238 00:14:13,380 --> 00:14:18,060 ‫counter.increase will be increase, 239 00:14:18,060 --> 00:14:22,953 ‫and counter.decrease will be decrease. 240 00:14:24,510 --> 00:14:27,090 ‫And that's actually it. 241 00:14:27,090 --> 00:14:29,730 ‫This is how we implement a counter 242 00:14:29,730 --> 00:14:32,130 ‫as a compound component. 243 00:14:32,130 --> 00:14:34,170 ‫Now, this might look pretty silly 244 00:14:34,170 --> 00:14:36,930 ‫for just implementing a counter. 245 00:14:36,930 --> 00:14:40,170 ‫And the truth is that this does require us 246 00:14:40,170 --> 00:14:44,040 ‫to write a lot more code and it might be a bit harder 247 00:14:44,040 --> 00:14:46,083 ‫to implement as well. 248 00:14:47,100 --> 00:14:49,380 ‫But as we saw earlier, 249 00:14:49,380 --> 00:14:52,350 ‫there are also many advantages to this. 250 00:14:52,350 --> 00:14:56,613 ‫So, let's now deactivate this one right here. 251 00:14:57,690 --> 00:15:02,690 ‫Let's then make a hard reload and it looks like it works. 252 00:15:05,190 --> 00:15:06,513 ‫And indeed, it does. 253 00:15:07,410 --> 00:15:08,243 ‫Great. 254 00:15:09,490 --> 00:15:10,323 ‫And so now we can do everything 255 00:15:10,323 --> 00:15:11,580 ‫that I mentioned earlier. 256 00:15:11,580 --> 00:15:13,590 ‫So we can place this here. 257 00:15:13,590 --> 00:15:15,330 ‫So then that changes. 258 00:15:15,330 --> 00:15:17,950 ‫We can change here the position 259 00:15:18,990 --> 00:15:21,740 ‫of all of the elements inside our counter. 260 00:15:21,740 --> 00:15:26,613 ‫And of course, we can omit some of them altogether. 261 00:15:27,810 --> 00:15:31,170 ‫So, let's create ourselves another instance here. 262 00:15:31,170 --> 00:15:34,350 ‫And so this will then appear here right by the side 263 00:15:34,350 --> 00:15:38,650 ‫because we decided to make the counter basically a span 264 00:15:40,800 --> 00:15:43,170 ‫with this here, right? 265 00:15:43,170 --> 00:15:46,923 ‫So, maybe let's wrap this one here in a div element. 266 00:15:51,990 --> 00:15:53,940 ‫Yeah, that's a bit better. 267 00:15:53,940 --> 00:15:57,000 ‫And yeah, as I was saying, we can, for example, 268 00:15:57,000 --> 00:16:02,000 ‫just completely omit this one, can place this in the center. 269 00:16:02,100 --> 00:16:05,340 ‫Here let's maybe use an emoji. 270 00:16:05,340 --> 00:16:09,900 ‫So to decrease, we can use this one 271 00:16:09,900 --> 00:16:14,013 ‫and to increase this other one right here. 272 00:16:15,570 --> 00:16:18,423 ‫And so look how flexible this is. 273 00:16:20,250 --> 00:16:23,640 ‫We could even place this one here, of course, 274 00:16:23,640 --> 00:16:24,993 ‫in a div as well. 275 00:16:25,860 --> 00:16:27,300 ‫So there's nothing stopping us 276 00:16:27,300 --> 00:16:30,540 ‫from also using some HTML in here. 277 00:16:30,540 --> 00:16:34,290 ‫And so, this is just so flexible. 278 00:16:34,290 --> 00:16:38,580 ‫And also the state is so nicely encapsulated now 279 00:16:38,580 --> 00:16:40,380 ‫inside this component. 280 00:16:40,380 --> 00:16:44,010 ‫And it's completely invisible to the outside. 281 00:16:44,010 --> 00:16:45,900 ‫And we could keep going here, 282 00:16:45,900 --> 00:16:49,680 ‫but I think you got the point, which is, again, 283 00:16:49,680 --> 00:16:53,250 ‫that we have all these different child components here 284 00:16:53,250 --> 00:16:56,790 ‫that together help implement a common goal. 285 00:16:56,790 --> 00:16:59,280 ‫So in this case, to implement a counter. 286 00:16:59,280 --> 00:17:00,990 ‫And each of them on their own 287 00:17:00,990 --> 00:17:03,960 ‫don't really make any sense at all. 288 00:17:03,960 --> 00:17:08,400 ‫So, if we were trying to use that outside here on its own, 289 00:17:08,400 --> 00:17:11,370 ‫then that wouldn't really work at all. 290 00:17:11,370 --> 00:17:15,480 ‫The only thing that might work would be this label, 291 00:17:15,480 --> 00:17:16,323 ‫I guess. 292 00:17:17,880 --> 00:17:19,263 ‫And even then I'm not sure. 293 00:17:20,100 --> 00:17:21,573 ‫So just making this up. 294 00:17:23,520 --> 00:17:25,320 ‫But yeah, so this one would work. 295 00:17:25,320 --> 00:17:29,010 ‫But of, of course, this still doesn't make any sense at all. 296 00:17:29,010 --> 00:17:33,120 ‫So this component here really only helps us implementing 297 00:17:33,120 --> 00:17:34,563 ‫this bigger counter. 298 00:17:35,790 --> 00:17:39,060 ‫And so yeah, this is how in a nutshell 299 00:17:39,060 --> 00:17:41,880 ‫the compound component pattern works. 300 00:17:41,880 --> 00:17:44,640 ‫And so congratulations, you now, 301 00:17:44,640 --> 00:17:49,260 ‫know about the most amazing React pattern that exists. 302 00:17:49,260 --> 00:17:50,760 ‫And so luckily for you, 303 00:17:50,760 --> 00:17:54,150 ‫you are now one of the few React developers 304 00:17:54,150 --> 00:17:59,150 ‫that even knows that this pattern exists and how to use it. 305 00:17:59,160 --> 00:18:02,220 ‫But of course, we need to practice this now a bit more 306 00:18:02,220 --> 00:18:05,550 ‫and use it in a more real-world situation. 307 00:18:05,550 --> 00:18:07,740 ‫And so over the next few lectures, 308 00:18:07,740 --> 00:18:11,070 ‫we are going to implement a super-flexible 309 00:18:11,070 --> 00:18:14,853 ‫and super-standalone modal window component.