Generic Slot Components

[00:00] Let's delete the variable and let's switch this for a regular label right there and remove the ID. Now, with those changes done, then clicking on the label no longer works because these are not properly associated.

[00:16] If I click on this, we have the label, has the slot label, but there's no provider for that label. So we need to provide a label slot, some slot information for that.

[00:28] So let's go into toggle and we're going to add an ID to our toggle value here because we need to pass that along to the switch. So we're going to say ID is a string, and then we're going to accept an optional ID

[00:45] so the ID can be overridden, always a useful feature. So this is an optional string and we've got to do that correctly. Hold on a second. For a second, I forgot how to write TypeScript. And then if we look at the text field, we're going to do something similar here.

[01:03] We're going to say, hey, I'm going to generate an ID and if no ID is provided, then we'll fall back to the generated one. And so now we have an ID that is generated if there's no ID provided. Now we're going to create our slots object and all we need is the label one.

[01:21] So slots, label, and HTML for ID. Super. And then with this, it's complaining because we're not providing the ID. So let's provide that ID. And then we also need to render our slot context.

[01:38] So slot context. Right there. And our slots or our value will be slots. There we go. And now with that, our use toggle is now exposing the ID as well.

[01:56] And so we can pass that ID right along here. ID. And because we have a label slot, then our label component should consume that. And it totally does. It works. Let's party. Set town. Let's party. Set town.

[02:13] And our label component is also rendering the label slot so that we can style that if we want to. And our button has the ID and that's why it's associated properly. And this is still associated. And that is the cool thing about this pattern is that we're using the same component for

[02:30] these two different compound components, which I think is pretty sweet. We could actually take this a little further. Maybe let's do in the next step of the exercise.

[00:00] You'll notice right now our toggle has this label that we want to associate our toggle button to, so I should be able to click on party mode and have it toggle back and forth, which I do. I am able to do that, and this is because I'm creating my own use ID,

[00:17] and I don't want to have to do that. I want the toggle to provide a slot for a label, and so if a label shows up, then it gets the proper HTML4. I want the toggle button to get that generated ID also, and so your job in this exercise is to make that happen. By the end of it, we should be able to just use this label component because it is going to consume

[00:38] that label slot, and so the toggle needs to expose a label slot, and then you can, from there, you should just be able to use the label directly, and this is where we get into, okay, so why are slots so valuable, and it's because you can use them to create components that can be reused across lots of different compound components, so let's get into it.

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

Generic Slot Components

Transcript