‫This section
‫is all about advanced React patterns
‫that are used by senior React engineers
‫to make components even more reusable and flexible.
‫So since this part is about reusability,
‫and since we already talked a lot
‫about reusability before,
‫let's now get a quick overview
‫of how we can reuse different types of code in React,
‫and how these advanced patterns
‫that we're gonna talk about fit into the picture.
‫So in React,
‫we basically might want to reuse two big types of code.
‫So we can either reuse pieces of UI,
‫or we can reuse some stateful logic,
‫so logic that contains at least one React hook,
‫no matter which one.
‫Now, there's also a third category, which is simply
‫for reusing some non-stateful logic,
‫but for that, we can simply use normal JavaScript functions.
‫But for React,
‫what matters is how we reuse UI and stateful logic.
‫So as we already know, to reuse pieces of the UI,
‫we use components and props.
‫And the idea is that we use props basically as an API
‫for the component, so as a way of interacting
‫with the component from the outside
‫so that we can customize how it works
‫and what it looks like.
‫Now, taking this idea one step further,
‫we can even pass in content
‫or other components into components,
‫simply by using the slightly more advanced,
‫but extremely useful children prop.
‫So basically, in order to customize not only
‫what a component looks like, but also the content itself.
‫And we already did this many times before,
‫but I just want to summarize everything here.
‫Now, moving on to reusing stateful logic.
‫We already know that we can do so simply
‫by writing our own custom hooks.
‫So again, custom hooks allow us
‫to write our own React hooks,
‫which are composed of any number of any other hooks.
‫Okay, but what if we need to reuse visuals
‫and stateful logic at the same time
‫in some more advanced ways?
‫Well, that's where more advanced patterns come into play.
‫So one of these advanced patterns
‫that developers came up with
‫is the so-called render props pattern.
‫And I say pattern because these are not things
‫that are baked into React, so they are not React features.
‫Instead, they are simply clever ways of using React
‫that have emerged over time
‫in order to solve certain problems.
‫But anyway, with render props,
‫the user of a component has complete control
‫over what the component actually renders
‫by passing in a function as a prop.
‫So this function basically tells the component
‫what and how to render.
‫And the beauty of this is that with this pattern,
‫we can reuse logic that has some UI,
‫so some JSX attached to it,
‫while giving the component the ability
‫to receive even more JSX.
‫And I know that this sounds a bit like the same thing
‫as the children prop, but this is quite different actually.
‫But don't worry about that at this point
‫because this, again, is just an overview.
‫You'll understand this really well in a future lecture
‫when we see the render prop pattern in action.
‫Now, this pattern was actually super common in the old days
‫before React hooks, because it was basically the only way
‫of sharing stateful logic across different components.
‫But today for that, we already have custom hooks,
‫and so now, this pattern isn't as common as it was before.
‫However, it's still very useful and very important
‫for certain situations
‫in which we really do want to reuse some logic
‫that has some UI attached to it,
‫as we will see in the next few lectures.
‫Now okay.
‫And now for the second advanced pattern
‫that we will talk about,
‫we have the compound component pattern.
‫And compound means, in this context,
‫that we will have multiple components that play together
‫in order to create one big, let's call it super component,
‫which is then the compound component.
‫And this pattern allows us
‫to build extremely self-contained components
‫that need to
‫or that want to manage their own state internally,
‫so without that state being necessary
‫inside the parent component
‫that uses the compound component.
‫And again, this will make more sense
‫when we see it in action.
‫Now, there are even more patterns than these two,
‫but if you know how to use, and when to use these two,
‫that will already set you apart
‫from most of the other React developers out there.
‫And so now, let's learn all about them in practice.