1 00:00:01,290 --> 00:00:02,130 ‫This section 2 00:00:02,130 --> 00:00:05,070 ‫is all about advanced React patterns 3 00:00:05,070 --> 00:00:08,220 ‫that are used by senior React engineers 4 00:00:08,220 --> 00:00:13,220 ‫to make components even more reusable and flexible. 5 00:00:13,260 --> 00:00:16,980 ‫So since this part is about reusability, 6 00:00:16,980 --> 00:00:19,470 ‫and since we already talked a lot 7 00:00:19,470 --> 00:00:21,630 ‫about reusability before, 8 00:00:21,630 --> 00:00:23,700 ‫let's now get a quick overview 9 00:00:23,700 --> 00:00:27,780 ‫of how we can reuse different types of code in React, 10 00:00:27,780 --> 00:00:29,940 ‫and how these advanced patterns 11 00:00:29,940 --> 00:00:33,153 ‫that we're gonna talk about fit into the picture. 12 00:00:35,370 --> 00:00:37,110 ‫So in React, 13 00:00:37,110 --> 00:00:41,970 ‫we basically might want to reuse two big types of code. 14 00:00:41,970 --> 00:00:45,300 ‫So we can either reuse pieces of UI, 15 00:00:45,300 --> 00:00:48,570 ‫or we can reuse some stateful logic, 16 00:00:48,570 --> 00:00:52,350 ‫so logic that contains at least one React hook, 17 00:00:52,350 --> 00:00:54,750 ‫no matter which one. 18 00:00:54,750 --> 00:00:58,290 ‫Now, there's also a third category, which is simply 19 00:00:58,290 --> 00:01:01,590 ‫for reusing some non-stateful logic, 20 00:01:01,590 --> 00:01:06,000 ‫but for that, we can simply use normal JavaScript functions. 21 00:01:06,000 --> 00:01:07,200 ‫But for React, 22 00:01:07,200 --> 00:01:12,200 ‫what matters is how we reuse UI and stateful logic. 23 00:01:12,540 --> 00:01:17,130 ‫So as we already know, to reuse pieces of the UI, 24 00:01:17,130 --> 00:01:20,010 ‫we use components and props. 25 00:01:20,010 --> 00:01:24,630 ‫And the idea is that we use props basically as an API 26 00:01:24,630 --> 00:01:28,260 ‫for the component, so as a way of interacting 27 00:01:28,260 --> 00:01:30,870 ‫with the component from the outside 28 00:01:30,870 --> 00:01:33,540 ‫so that we can customize how it works 29 00:01:33,540 --> 00:01:35,283 ‫and what it looks like. 30 00:01:36,150 --> 00:01:38,970 ‫Now, taking this idea one step further, 31 00:01:38,970 --> 00:01:40,980 ‫we can even pass in content 32 00:01:40,980 --> 00:01:43,950 ‫or other components into components, 33 00:01:43,950 --> 00:01:46,890 ‫simply by using the slightly more advanced, 34 00:01:46,890 --> 00:01:50,460 ‫but extremely useful children prop. 35 00:01:50,460 --> 00:01:53,970 ‫So basically, in order to customize not only 36 00:01:53,970 --> 00:01:58,350 ‫what a component looks like, but also the content itself. 37 00:01:58,350 --> 00:02:01,080 ‫And we already did this many times before, 38 00:02:01,080 --> 00:02:03,933 ‫but I just want to summarize everything here. 39 00:02:04,770 --> 00:02:08,460 ‫Now, moving on to reusing stateful logic. 40 00:02:08,460 --> 00:02:11,250 ‫We already know that we can do so simply 41 00:02:11,250 --> 00:02:14,490 ‫by writing our own custom hooks. 42 00:02:14,490 --> 00:02:17,070 ‫So again, custom hooks allow us 43 00:02:17,070 --> 00:02:19,440 ‫to write our own React hooks, 44 00:02:19,440 --> 00:02:24,270 ‫which are composed of any number of any other hooks. 45 00:02:24,270 --> 00:02:28,020 ‫Okay, but what if we need to reuse visuals 46 00:02:28,020 --> 00:02:30,750 ‫and stateful logic at the same time 47 00:02:30,750 --> 00:02:33,240 ‫in some more advanced ways? 48 00:02:33,240 --> 00:02:38,240 ‫Well, that's where more advanced patterns come into play. 49 00:02:38,460 --> 00:02:40,590 ‫So one of these advanced patterns 50 00:02:40,590 --> 00:02:42,630 ‫that developers came up with 51 00:02:42,630 --> 00:02:45,960 ‫is the so-called render props pattern. 52 00:02:45,960 --> 00:02:49,140 ‫And I say pattern because these are not things 53 00:02:49,140 --> 00:02:54,120 ‫that are baked into React, so they are not React features. 54 00:02:54,120 --> 00:02:58,110 ‫Instead, they are simply clever ways of using React 55 00:02:58,110 --> 00:03:00,090 ‫that have emerged over time 56 00:03:00,090 --> 00:03:03,060 ‫in order to solve certain problems. 57 00:03:03,060 --> 00:03:05,670 ‫But anyway, with render props, 58 00:03:05,670 --> 00:03:09,180 ‫the user of a component has complete control 59 00:03:09,180 --> 00:03:12,060 ‫over what the component actually renders 60 00:03:12,060 --> 00:03:15,660 ‫by passing in a function as a prop. 61 00:03:15,660 --> 00:03:18,720 ‫So this function basically tells the component 62 00:03:18,720 --> 00:03:21,480 ‫what and how to render. 63 00:03:21,480 --> 00:03:24,750 ‫And the beauty of this is that with this pattern, 64 00:03:24,750 --> 00:03:27,900 ‫we can reuse logic that has some UI, 65 00:03:27,900 --> 00:03:30,630 ‫so some JSX attached to it, 66 00:03:30,630 --> 00:03:33,060 ‫while giving the component the ability 67 00:03:33,060 --> 00:03:36,270 ‫to receive even more JSX. 68 00:03:36,270 --> 00:03:40,170 ‫And I know that this sounds a bit like the same thing 69 00:03:40,170 --> 00:03:44,640 ‫as the children prop, but this is quite different actually. 70 00:03:44,640 --> 00:03:47,550 ‫But don't worry about that at this point 71 00:03:47,550 --> 00:03:51,480 ‫because this, again, is just an overview. 72 00:03:51,480 --> 00:03:55,080 ‫You'll understand this really well in a future lecture 73 00:03:55,080 --> 00:03:59,040 ‫when we see the render prop pattern in action. 74 00:03:59,040 --> 00:04:03,180 ‫Now, this pattern was actually super common in the old days 75 00:04:03,180 --> 00:04:07,560 ‫before React hooks, because it was basically the only way 76 00:04:07,560 --> 00:04:11,730 ‫of sharing stateful logic across different components. 77 00:04:11,730 --> 00:04:15,870 ‫But today for that, we already have custom hooks, 78 00:04:15,870 --> 00:04:20,700 ‫and so now, this pattern isn't as common as it was before. 79 00:04:20,700 --> 00:04:24,480 ‫However, it's still very useful and very important 80 00:04:24,480 --> 00:04:26,340 ‫for certain situations 81 00:04:26,340 --> 00:04:30,030 ‫in which we really do want to reuse some logic 82 00:04:30,030 --> 00:04:32,970 ‫that has some UI attached to it, 83 00:04:32,970 --> 00:04:35,823 ‫as we will see in the next few lectures. 84 00:04:36,690 --> 00:04:37,560 ‫Now okay. 85 00:04:37,560 --> 00:04:39,873 ‫And now for the second advanced pattern 86 00:04:39,873 --> 00:04:41,460 ‫that we will talk about, 87 00:04:41,460 --> 00:04:44,880 ‫we have the compound component pattern. 88 00:04:44,880 --> 00:04:48,030 ‫And compound means, in this context, 89 00:04:48,030 --> 00:04:51,780 ‫that we will have multiple components that play together 90 00:04:51,780 --> 00:04:56,430 ‫in order to create one big, let's call it super component, 91 00:04:56,430 --> 00:04:59,670 ‫which is then the compound component. 92 00:04:59,670 --> 00:05:01,500 ‫And this pattern allows us 93 00:05:01,500 --> 00:05:04,740 ‫to build extremely self-contained components 94 00:05:04,740 --> 00:05:06,270 ‫that need to 95 00:05:06,270 --> 00:05:10,560 ‫or that want to manage their own state internally, 96 00:05:10,560 --> 00:05:13,530 ‫so without that state being necessary 97 00:05:13,530 --> 00:05:15,240 ‫inside the parent component 98 00:05:15,240 --> 00:05:18,330 ‫that uses the compound component. 99 00:05:18,330 --> 00:05:21,060 ‫And again, this will make more sense 100 00:05:21,060 --> 00:05:23,520 ‫when we see it in action. 101 00:05:23,520 --> 00:05:26,700 ‫Now, there are even more patterns than these two, 102 00:05:26,700 --> 00:05:31,080 ‫but if you know how to use, and when to use these two, 103 00:05:31,080 --> 00:05:33,000 ‫that will already set you apart 104 00:05:33,000 --> 00:05:36,720 ‫from most of the other React developers out there. 105 00:05:36,720 --> 00:05:40,893 ‫And so now, let's learn all about them in practice.