1 00:00:01,110 --> 00:00:03,750 ‫When we build a reusable component, 2 00:00:03,750 --> 00:00:06,390 ‫like the one we are currently building, 3 00:00:06,390 --> 00:00:08,010 ‫we should carefully think 4 00:00:08,010 --> 00:00:11,400 ‫about what props the component needs. 5 00:00:11,400 --> 00:00:15,423 ‫So let's now shortly look at how to think about props. 6 00:00:17,070 --> 00:00:21,690 ‫So, first of all, as we start working on our components, 7 00:00:21,690 --> 00:00:23,850 ‫we should get into the mindset 8 00:00:23,850 --> 00:00:28,230 ‫that any component is always created by someone, 9 00:00:28,230 --> 00:00:31,770 ‫and always consumed by someone. 10 00:00:31,770 --> 00:00:34,110 ‫Now, when you're working on your own, 11 00:00:34,110 --> 00:00:36,567 ‫the component creator and consumer, 12 00:00:36,567 --> 00:00:39,270 ‫is, of course, the same person. 13 00:00:39,270 --> 00:00:41,040 ‫But if you're on a team, 14 00:00:41,040 --> 00:00:44,880 ‫those might very well be different developers. 15 00:00:44,880 --> 00:00:47,460 ‫But in any case, it's always a good idea 16 00:00:47,460 --> 00:00:50,850 ‫to think in terms of there being a creator 17 00:00:50,850 --> 00:00:53,460 ‫and a consumer of a component, 18 00:00:53,460 --> 00:00:57,660 ‫so, different entities, even if it's just yourself. 19 00:00:57,660 --> 00:00:59,520 ‫So, basically, the creator 20 00:00:59,520 --> 00:01:01,980 ‫is the person building a component, 21 00:01:01,980 --> 00:01:05,940 ‫and defining what props the component can accept. 22 00:01:05,940 --> 00:01:08,820 ‫While the consumer uses the component 23 00:01:08,820 --> 00:01:10,560 ‫somewhere in the application, 24 00:01:10,560 --> 00:01:13,443 ‫by specifying values for the props. 25 00:01:14,280 --> 00:01:16,320 ‫Now, the reason for the separation 26 00:01:16,320 --> 00:01:18,870 ‫between creator and consumer, 27 00:01:18,870 --> 00:01:21,510 ‫even if you're just working on your own, 28 00:01:21,510 --> 00:01:24,480 ‫is that if we have this mindset, 29 00:01:24,480 --> 00:01:26,970 ‫we can think of the component's props 30 00:01:26,970 --> 00:01:30,510 ‫as the public API of the component. 31 00:01:30,510 --> 00:01:32,820 ‫So, as a component creator, 32 00:01:32,820 --> 00:01:34,440 ‫when we choose what props 33 00:01:34,440 --> 00:01:37,050 ‫the consumer is allowed to pass in, 34 00:01:37,050 --> 00:01:38,529 ‫we are essentially defining 35 00:01:38,529 --> 00:01:42,330 ‫the public interface of our component. 36 00:01:42,330 --> 00:01:44,790 ‫And, at the same time, we are choosing 37 00:01:44,790 --> 00:01:47,880 ‫how much complexity of the component 38 00:01:47,880 --> 00:01:51,990 ‫we want to expose to the consumer of the API. 39 00:01:51,990 --> 00:01:53,610 ‫Because, in the end, 40 00:01:53,610 --> 00:01:57,420 ‫a component is basically just an abstraction. 41 00:01:57,420 --> 00:02:01,230 ‫So, we are encapsulating a part of the UI 42 00:02:01,230 --> 00:02:04,320 ‫and the associated logic into a component, 43 00:02:04,320 --> 00:02:06,120 ‫and allow consumers 44 00:02:06,120 --> 00:02:09,930 ‫to interact with that component via props. 45 00:02:09,930 --> 00:02:11,040 ‫And that's it. 46 00:02:11,040 --> 00:02:14,463 ‫That's basically what creating a new component is. 47 00:02:15,420 --> 00:02:18,390 ‫But, anyway, when we decide about 48 00:02:18,390 --> 00:02:21,150 ‫what props to allow in a component, 49 00:02:21,150 --> 00:02:25,320 ‫we need to find a good balance on how strict we want to be. 50 00:02:25,320 --> 00:02:30,320 ‫So about how many props we want to enable for configuration. 51 00:02:30,810 --> 00:02:32,370 ‫For example, let's say 52 00:02:32,370 --> 00:02:34,890 ‫we're building a weather component, 53 00:02:34,890 --> 00:02:38,610 ‫so a component that simply displays the weather. 54 00:02:38,610 --> 00:02:41,250 ‫We could make it extremely simple, 55 00:02:41,250 --> 00:02:44,310 ‫for example, only allowing one prop. 56 00:02:44,310 --> 00:02:45,720 ‫So, for the location 57 00:02:45,720 --> 00:02:48,990 ‫for which the consumer wants the weather. 58 00:02:48,990 --> 00:02:51,570 ‫Now, this might be perfectly fine, 59 00:02:51,570 --> 00:02:55,440 ‫but it might also make the component not flexible enough, 60 00:02:55,440 --> 00:02:59,880 ‫or maybe even straight out, useless for the consumer. 61 00:02:59,880 --> 00:03:01,080 ‫On the other hand, 62 00:03:01,080 --> 00:03:05,400 ‫we could allow props for the URL of the weather data, 63 00:03:05,400 --> 00:03:06,720 ‫the number of days, 64 00:03:06,720 --> 00:03:09,060 ‫whether it should be daily or hourly, 65 00:03:09,060 --> 00:03:12,120 ‫how many days, which temperature to unit, 66 00:03:12,120 --> 00:03:15,660 ‫what data should be displayed, and so on. 67 00:03:15,660 --> 00:03:19,170 ‫I could think of really 20 other props here. 68 00:03:19,170 --> 00:03:22,680 ‫But the point is that exposing so many props, 69 00:03:22,680 --> 00:03:24,210 ‫might make the component 70 00:03:24,210 --> 00:03:27,090 ‫way too hard to use for the consumer, 71 00:03:27,090 --> 00:03:30,900 ‫because we're exposing too much complexity. 72 00:03:30,900 --> 00:03:33,030 ‫And speaking of complexity, 73 00:03:33,030 --> 00:03:35,790 ‫you'll end up with very complex code, 74 00:03:35,790 --> 00:03:38,073 ‫if you want to allow so many props. 75 00:03:39,030 --> 00:03:43,170 ‫So, when deciding on the right API for your components, 76 00:03:43,170 --> 00:03:45,090 ‫try to strike the right balance 77 00:03:45,090 --> 00:03:48,180 ‫between too little and too many props, 78 00:03:48,180 --> 00:03:50,130 ‫and a balance that works well, 79 00:03:50,130 --> 00:03:51,840 ‫for both the creator, 80 00:03:51,840 --> 00:03:54,240 ‫and the consumer of the component, 81 00:03:54,240 --> 00:03:56,283 ‫based on the project's needs. 82 00:03:57,330 --> 00:03:58,680 ‫Now, if for some reason 83 00:03:58,680 --> 00:04:01,860 ‫you really need to expose so many props, 84 00:04:01,860 --> 00:04:03,630 ‫make sure to at least provide 85 00:04:03,630 --> 00:04:06,933 ‫some good default values for many of them. 86 00:04:08,010 --> 00:04:12,300 ‫Okay, and as always, this will come to you with practice, 87 00:04:12,300 --> 00:04:14,790 ‫but I thought that it was quite important 88 00:04:14,790 --> 00:04:17,070 ‫to get you into this mindset 89 00:04:17,070 --> 00:04:21,390 ‫of distinguishing between component creators and consumers. 90 00:04:21,390 --> 00:04:25,053 ‫And so with that, we're ready to put this into practice.