1 00:00:01,110 --> 00:00:02,490 ‫So we're back in a section 2 00:00:02,490 --> 00:00:04,290 ‫about thinking in React, 3 00:00:04,290 --> 00:00:08,340 ‫which is all about state, data flow, and components. 4 00:00:08,340 --> 00:00:11,460 ‫We already talked about state management in detail, 5 00:00:11,460 --> 00:00:15,180 ‫and so now it's time to talk more about components. 6 00:00:15,180 --> 00:00:17,430 ‫Now, when it comes to components, 7 00:00:17,430 --> 00:00:20,850 ‫the important questions that we need to ask ourselves are, 8 00:00:20,850 --> 00:00:24,330 ‫how do we split up a UI into components, 9 00:00:24,330 --> 00:00:28,500 ‫and when should we actually create new components? 10 00:00:28,500 --> 00:00:32,403 ‫So let's try to answer these questions in this video. 11 00:00:34,170 --> 00:00:37,770 ‫And one way in which we can start answering those questions 12 00:00:37,770 --> 00:00:40,980 ‫is by looking at component size. 13 00:00:40,980 --> 00:00:45,450 ‫So we can classify every component based on its size, 14 00:00:45,450 --> 00:00:48,720 ‫which means that we can place every component 15 00:00:48,720 --> 00:00:52,290 ‫on this axis of component size. 16 00:00:52,290 --> 00:00:55,500 ‫On one side, we have really small components, 17 00:00:55,500 --> 00:00:59,550 ‫and on the other extreme, we have huge components. 18 00:00:59,550 --> 00:01:03,600 ‫At many times, none of these extremes are ideal. 19 00:01:03,600 --> 00:01:07,980 ‫So imagine that we wanted to build this simple card. 20 00:01:07,980 --> 00:01:10,500 ‫One way of doing it would be to create 21 00:01:10,500 --> 00:01:14,850 ‫just one huge component for the entire card. 22 00:01:14,850 --> 00:01:18,660 ‫However, that would create a whole set of problems. 23 00:01:18,660 --> 00:01:20,970 ‫First, there is way too much stuff 24 00:01:20,970 --> 00:01:23,190 ‫going on in this component, 25 00:01:23,190 --> 00:01:26,640 ‫so it has way too many responsibilities. 26 00:01:26,640 --> 00:01:29,820 ‫So components are just like JavaScript functions, 27 00:01:29,820 --> 00:01:31,800 ‫in the sense that if a function 28 00:01:31,800 --> 00:01:33,990 ‫does too many different things, 29 00:01:33,990 --> 00:01:36,840 ‫we should break it up into multiple functions. 30 00:01:36,840 --> 00:01:40,440 ‫And so the same applies to React components. 31 00:01:40,440 --> 00:01:43,170 ‫Now, another way in which it becomes apparent 32 00:01:43,170 --> 00:01:45,540 ‫that a component is too large 33 00:01:45,540 --> 00:01:48,240 ‫is when it needs to receive too many props 34 00:01:48,240 --> 00:01:50,640 ‫in order to work properly. 35 00:01:50,640 --> 00:01:54,840 ‫So for example, if we need like 10 or 15 props 36 00:01:54,840 --> 00:01:57,720 ‫to properly configure a certain component, 37 00:01:57,720 --> 00:02:00,780 ‫that component is probably way too big, 38 00:02:00,780 --> 00:02:03,150 ‫and should be split up. 39 00:02:03,150 --> 00:02:04,410 ‫So in general, 40 00:02:04,410 --> 00:02:08,430 ‫these two problems make it very hard to reuse the component, 41 00:02:08,430 --> 00:02:10,650 ‫which is one of the big advantages 42 00:02:10,650 --> 00:02:13,290 ‫of components in the first place. 43 00:02:13,290 --> 00:02:17,340 ‫Also, huge components generally contain a lot of code 44 00:02:17,340 --> 00:02:20,190 ‫that might be complex and intertwined, 45 00:02:20,190 --> 00:02:22,680 ‫which ultimately makes the whole component 46 00:02:22,680 --> 00:02:25,053 ‫hard to understand and to use. 47 00:02:26,010 --> 00:02:28,950 ‫Now, does this mean that we should do the opposite 48 00:02:28,950 --> 00:02:33,150 ‫and create many small components like this one? 49 00:02:33,150 --> 00:02:34,770 ‫Well, most of the time, 50 00:02:34,770 --> 00:02:38,400 ‫that would probably be a terrible idea as well. 51 00:02:38,400 --> 00:02:42,630 ‫If we would build a UI or an entire app in this way, 52 00:02:42,630 --> 00:02:44,610 ‫we would end up with hundreds 53 00:02:44,610 --> 00:02:48,000 ‫if not thousands of mini-components. 54 00:02:48,000 --> 00:02:50,280 ‫This, of course, would create a code base 55 00:02:50,280 --> 00:02:54,240 ‫that is super confusing to navigate and to understand, 56 00:02:54,240 --> 00:02:57,360 ‫and it would be way too abstracted. 57 00:02:57,360 --> 00:03:00,300 ‫And if you're not familiar with the term abstraction, 58 00:03:00,300 --> 00:03:04,200 ‫in programming, it basically means to create something new 59 00:03:04,200 --> 00:03:08,520 ‫in order to hide the implementation details of that thing. 60 00:03:08,520 --> 00:03:11,460 ‫For example, when we create a button component, 61 00:03:11,460 --> 00:03:15,090 ‫the user of that component might have no idea 62 00:03:15,090 --> 00:03:17,940 ‫how the button actually does what it does, 63 00:03:17,940 --> 00:03:19,980 ‫because the implementation details 64 00:03:19,980 --> 00:03:22,650 ‫are hidden behind this abstraction, 65 00:03:22,650 --> 00:03:25,230 ‫so behind this component. 66 00:03:25,230 --> 00:03:26,490 ‫So in a way, 67 00:03:26,490 --> 00:03:31,170 ‫each new component that we create is an abstraction. 68 00:03:31,170 --> 00:03:34,020 ‫Now, if both ends of the spectrum, 69 00:03:34,020 --> 00:03:37,380 ‫so both really small and huge components, 70 00:03:37,380 --> 00:03:41,010 ‫have these problems, then what should we do? 71 00:03:41,010 --> 00:03:42,630 ‫Well, most of the time, 72 00:03:42,630 --> 00:03:44,850 ‫the goal is to create components 73 00:03:44,850 --> 00:03:46,860 ‫that strike the right balance 74 00:03:46,860 --> 00:03:50,640 ‫between being too specific and too broad, 75 00:03:50,640 --> 00:03:51,720 ‫or in other words, 76 00:03:51,720 --> 00:03:54,993 ‫between being too small and being too big. 77 00:03:55,890 --> 00:03:58,830 ‫Now, these problems that we identified here, 78 00:03:58,830 --> 00:04:01,860 ‫like components having too many responsibilities 79 00:04:01,860 --> 00:04:03,780 ‫and being hard to reuse, 80 00:04:03,780 --> 00:04:05,190 ‫can help us understand 81 00:04:05,190 --> 00:04:09,153 ‫how we should actually split a UI into components. 82 00:04:10,980 --> 00:04:14,040 ‫So using the same example as before, 83 00:04:14,040 --> 00:04:18,180 ‫first we had this with just one huge component, 84 00:04:18,180 --> 00:04:21,780 ‫and then we had a lot of small components, 85 00:04:21,780 --> 00:04:25,230 ‫and both these ways of splitting up the UI 86 00:04:25,230 --> 00:04:27,000 ‫are far from ideal 87 00:04:27,000 --> 00:04:30,330 ‫for all the reasons that we have talked about. 88 00:04:30,330 --> 00:04:34,980 ‫So instead, what we want is something like this. 89 00:04:34,980 --> 00:04:37,500 ‫So here we have a more logical separation 90 00:04:37,500 --> 00:04:40,260 ‫of the content into different components, 91 00:04:40,260 --> 00:04:41,700 ‫and some of these components 92 00:04:41,700 --> 00:04:44,250 ‫are probably even gonna be reusable, 93 00:04:44,250 --> 00:04:47,700 ‫like the heart button or the SUPERHOST label. 94 00:04:47,700 --> 00:04:49,620 ‫Also, each of these components 95 00:04:49,620 --> 00:04:52,500 ‫has a well-defined responsibility, 96 00:04:52,500 --> 00:04:55,260 ‫like displaying the price or the rating, 97 00:04:55,260 --> 00:04:58,053 ‫and they're also not overly complex. 98 00:04:58,920 --> 00:05:01,410 ‫Okay, and so from this, 99 00:05:01,410 --> 00:05:05,400 ‫we can now derive a couple of criteria that we can use 100 00:05:05,400 --> 00:05:09,210 ‫to split a user interface into components. 101 00:05:09,210 --> 00:05:11,610 ‫First, when we decide which components 102 00:05:11,610 --> 00:05:14,370 ‫we need to implement a certain UI, 103 00:05:14,370 --> 00:05:16,560 ‫it's important that these components 104 00:05:16,560 --> 00:05:20,040 ‫create a logical separation of the content, 105 00:05:20,040 --> 00:05:23,340 ‫or even of the layout of a page. 106 00:05:23,340 --> 00:05:24,930 ‫We should also strive to make 107 00:05:24,930 --> 00:05:27,090 ‫some of these components reusable 108 00:05:27,090 --> 00:05:30,150 ‫and ensure that each component has a single, 109 00:05:30,150 --> 00:05:32,970 ‫well-defined responsibility. 110 00:05:32,970 --> 00:05:36,450 ‫Finally, there's one even more subjective criterion, 111 00:05:36,450 --> 00:05:39,420 ‫which is your personal coding style. 112 00:05:39,420 --> 00:05:42,690 ‫So some people work better with smaller components, 113 00:05:42,690 --> 00:05:45,990 ‫and some people just prefer larger components, 114 00:05:45,990 --> 00:05:48,090 ‫and therefore, you need to create components 115 00:05:48,090 --> 00:05:51,000 ‫in a way that works best for you 116 00:05:51,000 --> 00:05:55,080 ‫so that you can stay as productive as possible. 117 00:05:55,080 --> 00:05:58,800 ‫All right, but now let's actually dig a bit deeper 118 00:05:58,800 --> 00:06:01,023 ‫into all these different criteria. 119 00:06:01,890 --> 00:06:04,410 ‫So what I want to do in this slide 120 00:06:04,410 --> 00:06:06,900 ‫is to give you something like a framework 121 00:06:06,900 --> 00:06:09,210 ‫that will help you create new components 122 00:06:09,210 --> 00:06:11,520 ‫from bigger components. 123 00:06:11,520 --> 00:06:15,000 ‫So the idea is that, when you're creating a new component, 124 00:06:15,000 --> 00:06:18,900 ‫and you're in doubt about what the component should include, 125 00:06:18,900 --> 00:06:22,260 ‫just start with a relatively big component, 126 00:06:22,260 --> 00:06:24,450 ‫but not a huge component, 127 00:06:24,450 --> 00:06:28,440 ‫and then split that bigger component into smaller components 128 00:06:28,440 --> 00:06:31,260 ‫as it becomes necessary. 129 00:06:31,260 --> 00:06:33,300 ‫But naturally, you will now ask, 130 00:06:33,300 --> 00:06:36,060 ‫when does it actually become necessary 131 00:06:36,060 --> 00:06:39,960 ‫to split big components into multiple small ones? 132 00:06:39,960 --> 00:06:43,920 ‫Well, that's where the four criteria come into play again. 133 00:06:43,920 --> 00:06:47,670 ‫so logical separation of content, reusability, 134 00:06:47,670 --> 00:06:51,450 ‫the responsibilities and complexity of the component, 135 00:06:51,450 --> 00:06:53,523 ‫and your personal coding style. 136 00:06:54,390 --> 00:06:57,690 ‫Now, of course, if you already know that you need 137 00:06:57,690 --> 00:07:01,650 ‫a small and reusable component, such as a button, 138 00:07:01,650 --> 00:07:05,880 ‫you can just skip all this and simply create a component. 139 00:07:05,880 --> 00:07:08,580 ‫But otherwise, you can just start big, 140 00:07:08,580 --> 00:07:11,340 ‫and don't need to focus on reusability 141 00:07:11,340 --> 00:07:14,550 ‫and complexity at the very beginning. 142 00:07:14,550 --> 00:07:15,900 ‫At some point, however, 143 00:07:15,900 --> 00:07:18,720 ‫you do need to worry about these topics, 144 00:07:18,720 --> 00:07:21,000 ‫and so let's analyze them one by one, 145 00:07:21,000 --> 00:07:23,583 ‫starting with logical separation. 146 00:07:24,420 --> 00:07:27,540 ‫So if, after writing your big component, 147 00:07:27,540 --> 00:07:31,350 ‫you feel like the component contains some piece of code, 148 00:07:31,350 --> 00:07:34,830 ‫or of the layout, that don't really belong together, 149 00:07:34,830 --> 00:07:37,800 ‫then that means that it's probably a good idea 150 00:07:37,800 --> 00:07:39,723 ‫to create a new component. 151 00:07:40,650 --> 00:07:42,690 ‫Now, about reusability, 152 00:07:42,690 --> 00:07:46,950 ‫if it's possible to reuse a part of your big component, 153 00:07:46,950 --> 00:07:51,060 ‫and if you actually want or need to reuse that part, 154 00:07:51,060 --> 00:07:52,950 ‫then you should take that code 155 00:07:52,950 --> 00:07:55,980 ‫and extract it into a new component. 156 00:07:55,980 --> 00:07:58,650 ‫Another sign that you should probably extract 157 00:07:58,650 --> 00:08:01,380 ‫part of your component into a new one 158 00:08:01,380 --> 00:08:03,480 ‫is that your component is doing 159 00:08:03,480 --> 00:08:05,700 ‫way too many different things, 160 00:08:05,700 --> 00:08:09,090 ‫or that it's relying onto many props. 161 00:08:09,090 --> 00:08:10,830 ‫So if your big component 162 00:08:10,830 --> 00:08:14,430 ‫has too many pieces of state or effects, 163 00:08:14,430 --> 00:08:18,960 ‫or if the code is way too complex or too confusing, 164 00:08:18,960 --> 00:08:21,030 ‫it might be once again 165 00:08:21,030 --> 00:08:25,050 ‫time to create a new, smaller component. 166 00:08:25,050 --> 00:08:28,380 ‫And finally, as I said in the previous slide, 167 00:08:28,380 --> 00:08:30,780 ‫it's important that you feel productive 168 00:08:30,780 --> 00:08:33,420 ‫when working with your components. 169 00:08:33,420 --> 00:08:37,470 ‫So if you prefer smaller functions or components, 170 00:08:37,470 --> 00:08:41,430 ‫just split up big components into smaller ones. 171 00:08:41,430 --> 00:08:44,610 ‫But on the other hand, if you prefer big components, 172 00:08:44,610 --> 00:08:46,650 ‫that's also totally fine. 173 00:08:46,650 --> 00:08:51,030 ‫It's all up to you, because remember, in the end, 174 00:08:51,030 --> 00:08:54,600 ‫these are all just guidelines and best practices 175 00:08:54,600 --> 00:08:57,600 ‫that will become intuitive over time, 176 00:08:57,600 --> 00:08:59,940 ‫and by then, building your components 177 00:08:59,940 --> 00:09:02,550 ‫will become second nature to you. 178 00:09:02,550 --> 00:09:04,800 ‫But as you start out right now, 179 00:09:04,800 --> 00:09:08,910 ‫it's great to have guidelines like this to help you out. 180 00:09:08,910 --> 00:09:10,290 ‫And speaking of guidelines, 181 00:09:10,290 --> 00:09:14,430 ‫I actually have a few more general guidelines for you. 182 00:09:14,430 --> 00:09:16,950 ‫So first off, you need to be aware 183 00:09:16,950 --> 00:09:21,690 ‫that creating a new component creates a new abstraction. 184 00:09:21,690 --> 00:09:23,550 ‫And we talked about abstractions 185 00:09:23,550 --> 00:09:27,120 ‫a bit earlier in this lecture, right? 186 00:09:27,120 --> 00:09:29,850 ‫Now, abstractions have a cost, 187 00:09:29,850 --> 00:09:34,140 ‫because having more abstractions requires more mental energy 188 00:09:34,140 --> 00:09:36,390 ‫to think about different components 189 00:09:36,390 --> 00:09:40,170 ‫and to switch back and forth between components. 190 00:09:40,170 --> 00:09:42,540 ‫So try not to create new components 191 00:09:42,540 --> 00:09:45,570 ‫too early if you can avoid it. 192 00:09:45,570 --> 00:09:48,750 ‫Next, it's important that you name a component 193 00:09:48,750 --> 00:09:52,950 ‫according to what it does or what it displays. 194 00:09:52,950 --> 00:09:56,340 ‫And don't be afraid of using long component names. 195 00:09:56,340 --> 00:09:59,850 ‫That's completely normal in React development. 196 00:09:59,850 --> 00:10:02,040 ‫Now, what's even more important 197 00:10:02,040 --> 00:10:04,350 ‫is that you never, ever declare 198 00:10:04,350 --> 00:10:07,830 ‫a new component inside another component, 199 00:10:07,830 --> 00:10:11,640 ‫and we will learn the reason for that in the next section. 200 00:10:11,640 --> 00:10:13,110 ‫What you can do instead 201 00:10:13,110 --> 00:10:15,480 ‫when you have some related components 202 00:10:15,480 --> 00:10:18,840 ‫is to co-locate these related components 203 00:10:18,840 --> 00:10:20,733 ‫inside the same file. 204 00:10:21,660 --> 00:10:22,500 ‫Finally, 205 00:10:22,500 --> 00:10:26,580 ‫and going back to our initial topic of component size, 206 00:10:26,580 --> 00:10:29,310 ‫it's completely normal that an application 207 00:10:29,310 --> 00:10:32,400 ‫has components of many different sizes, 208 00:10:32,400 --> 00:10:36,483 ‫including some very small ones and some huge ones. 209 00:10:37,890 --> 00:10:40,410 ‫So even though we said in the beginning 210 00:10:40,410 --> 00:10:43,650 ‫that very small components have some problems, 211 00:10:43,650 --> 00:10:46,680 ‫of course, we always need some small components 212 00:10:46,680 --> 00:10:49,320 ‫like these in any application, 213 00:10:49,320 --> 00:10:51,510 ‫because they're highly reusable 214 00:10:51,510 --> 00:10:53,520 ‫and have very low complexity, 215 00:10:53,520 --> 00:10:56,460 ‫which is sometimes exactly what we need. 216 00:10:56,460 --> 00:10:59,973 ‫Most apps will also have a few huge components 217 00:10:59,973 --> 00:11:03,270 ‫that are not meant to be reused. 218 00:11:03,270 --> 00:11:06,780 ‫For example, we might have a huge page component 219 00:11:06,780 --> 00:11:11,370 ‫which contains the layout of the entire app or a page, 220 00:11:11,370 --> 00:11:15,120 ‫and that might very well be a fairly complex component 221 00:11:15,120 --> 00:11:17,730 ‫which is not meant to be reused. 222 00:11:17,730 --> 00:11:21,930 ‫So in situations like this, don't worry about reusability 223 00:11:21,930 --> 00:11:25,410 ‫or about needing to split this component up. 224 00:11:25,410 --> 00:11:29,730 ‫And speaking of reusability, as you can see from this, 225 00:11:29,730 --> 00:11:32,280 ‫we can say that, as a general rule, 226 00:11:32,280 --> 00:11:37,280 ‫the reusability range is pretty similar to the size range. 227 00:11:37,620 --> 00:11:39,540 ‫So generally speaking, 228 00:11:39,540 --> 00:11:43,860 ‫the smaller components are, the more reusable they will be. 229 00:11:43,860 --> 00:11:46,620 ‫And of course, as components get bigger, 230 00:11:46,620 --> 00:11:49,050 ‫they will become less reusable. 231 00:11:49,050 --> 00:11:53,850 ‫But again, that's no problem at all for some components. 232 00:11:53,850 --> 00:11:57,810 ‫So not all components are meant to be reusable. 233 00:11:57,810 --> 00:12:00,090 ‫But anyway, finally, 234 00:12:00,090 --> 00:12:03,750 ‫we have all these medium-sized components as well, 235 00:12:03,750 --> 00:12:06,870 ‫which all have different degrees of size, 236 00:12:06,870 --> 00:12:11,640 ‫reusability, responsibility, and complexity. 237 00:12:11,640 --> 00:12:13,020 ‫So in the end, 238 00:12:13,020 --> 00:12:16,140 ‫our application will have many different components 239 00:12:16,140 --> 00:12:18,450 ‫across the entire spectrum, 240 00:12:18,450 --> 00:12:21,900 ‫and that's completely normal and natural. 241 00:12:21,900 --> 00:12:24,540 ‫And now, let's go back to coding, 242 00:12:24,540 --> 00:12:28,860 ‫and break up a huge component into many small ones, 243 00:12:28,860 --> 00:12:32,523 ‫using all the concepts that we have just learned about.