Compound Components

[00:00] Let's dive into the toggle component. So right here, we're just returning to do. We don't want to do that at all. Instead, we want to render our toggle context and provide our state and our toggle function as part of that context, because all of our compound components need access to that. So I'm going to say toggle context,

[00:19] and we'll render our children in there. Toggle context. And of course, we need to create that toggle context. So let's go create that now. Toggle context. I don't even know why our AI assistant thought that would be a good idea. Create context. Here we go, from React. We're going to initialize that to null.

[00:37] And here, we've got our typing for our context, which should be this. Here, we're going to say that or null. And yeah, there we go for that. That looks pretty good. So now we've got our toggle context,

[00:56] and it is giving us that warning, because we need our value. There we go. So on and toggle will be passed to all of the consumers of our context. And with that now, our toggle on can access this value. So we're going to say, really, all we need is the on property, right?

[01:16] So I'm going to destructure on from that. And use, of course, comes from React. This is going to give us this error. Well, here, first of all, we've got to get rid of that declaration. But it's still going to give us an error, because we can't destructure on from null, and null is our default value. Well, I got news for you.

[01:35] Right here is where we're using that toggle, and we are providing that. So it can't be null, right? So let's just say, no, it can't be null, okay? Don't ever do this. I'm just doing this for demonstration purposes. We'll talk about it in the next step. But don't do this.

[01:53] So we're going to just pretend that that's okay. And then we'll do the same thing right here. We'll get on from useToggleContext, and no, TypeScript, you're wrong. And then we're going to get both on and toggle. We're not going to default that. We're going to say, no, TypeScript, you're wrong.

[02:12] And now we are set. If I save this, and I click, click, click, click, click, I'm getting the behavior that I want. It's working beautifully. So we're in a good place. So that's the basics of the compound components pattern. You have one component that manages the state,

[02:31] and then it renders a context provider. And then you have other components that consume that and render other things. And then you export each of these components, and users can combine these in interesting ways. And so if I, as a user, was like, hey, you know what? I want to add an HR right here.

[02:49] Then they totally can do that, or they can put it here. They have total control over where different things go, which I think is pretty cool. And we're going to explore this concept even further in future exercises as well, to give a lot of customizability to the way that these components are composed together.

[03:08] But the basic idea is that, yeah, we're just going to compose these different compound components in interesting ways. And it ends up being pretty nice.

[00:00] Right now we're actually not doing a whole lot and you're going to have to be you're going to have to implement Everything that we're going to be doing so I'm going to show you what the finished version looks like We've got this switch and we already have a switch component. It accepts an on prop and on click for

[00:16] Updating the value but yeah, you just you can focus on it and then I'm hitting the spacebar But then we also have some components for when the button is on I want you to show this when the button is off I want you to show this and so we have our toggle on we have our toggle off and our toggle button And we need to provide some

[00:36] State for each one of these things so that we can provide the API that our users are looking for which you can find in The app right here. So we have our toggle We have our toggle on our toggle off and our toggle button That's the API that our users want to have so the toggle it needs to be our context provider

[00:55] And it's going to manage all of the state and then it's going to share implicitly the state As well as mechanisms for updating the state to these other components and so through that we get this really nice declarative API So that is the API you need to implement right now. It's not doing a whole lot so get to work

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns.

**After taking this workshop you'll always know exactly what patterns to reach for.**

Running into prop drilling? Reach for some composition patterns.

Are the values you need stale? Use latest ref.

Are you a library author who wants to make a component more flexible? Use the control props or state reducer patterns.

Learning the following patterns will take you far!

## Composition

Avoiding prop drilling is one of the reasons so many people have jumped onto state management solutions like Redux.

In this section you'll learn what you can accomplish just by passing react elements rather than treating components as uncrossable boundaries. 

You'll see how things get quite a bit easier without losing any flexibility!

## Latest Ref

Sometimes, you need to make sure that you are getting the absolute latest version of a value. 

Here, you'll learn how to use the useRef hook to store a value and avoid issues with stale closures in your hooks.

## Compound Components

This pattern can actually be seen in HTML with the `<select>` and `<option>` elements. 

Instead of loading up props with data and trying to build the UI inside the component definition, you will instead learn how you can compose several React components together in the compound component pattern.

## Slots

This flexible pattern is useful for creating reusable compound components that aren't locked into having the same parent every time. 

Slots allow you to specify an element which takes on a particular role in the overall collection of components. So a parent component can have many props available to children with various roles. 


## Prop Collections and Getters

The Prop Collections and Getters Patterns allows your hook to support common use cases for UI elements people build with your hook.

Basically, in this section you'll learn how to create a function that can return props!

Note, the prop collections pattern isn't recommended but it'll be useful to learn since the getters pattern builds on the idea. 

## State Initializer

The state initializer pattern is a way to initialize (and reset) the state of a component in a predictable way.

This pattern is simple but you'll learn that there's a catch if you want to truly ensure that a component is reset to its initial state and ignores any changes made to the values you used initialize it.


## State Reducer

This one is especially useful for library authors.

In this section you'll learn the State Reducer Pattern, which inverts control over the state management of your hook and/or component to the developer using it so they can control the state changes that happen when dispatching events.


## Control Props

Sometimes, people want to be able to manage the internal state of our component from the outside

Learning this pattern will allow you to give control of a component's state to its users so they can make state changes to it themselves. 

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns so you always know exactly what to reach for.

Advanced React Patterns

Advanced React Patterns

Transcript

Compound Components

Transcript