Slot Context

[00:00] So, let's dive into our text field so we can provide the slot context. So, let's make our slots first. It's already generating an ID and everything for us. We just need to provide that as part of our available slots. So, slots, and we've got a label.

[00:16] That should have, yeah, our AI assistant's a little bit overzealous here. We don't need a props object. It's just simple HTML4 ID and our input. And goodness gracious, let's just put it all in one line. There we go. And then we want to wrap this in a slot context.

[00:35] So, slot context, which actually isn't implemented yet. So, see, we're trying to pull it from all these exercises and stuff. We don't want to do that. Now, what we actually need to do is come over here to our slots, and we need to create that slot context first. So, let's first, we'll grab this type. So, this is the slots object.

[00:53] It is an object of strings and then another object of strings and whatever their properties are. So, we're basically describing the type for this slots object. So, then we've got our slot context.

[01:09] Slot context is create context from React. And this is of type slots, and we can actually default this one. So, you may have noticed I don't typically provide a default value for my create context, but this is one situation where it actually does make sense.

[01:27] So, I should be able to render an input without having a slot provider, and the input will look for slots and be like, oh, there's just none there. That's fine. I'll just render the props that you gave me. So, this is one case where having a default actually does make sense. So, with that slot context created, we'll expose it,

[01:45] and we'll come back over here to our text field, and we'll render the slot context right here, and our children goes here, except you've got to spell it right. It doesn't work if you spell it wrong, or at least it only works if you spell it consistently.

[02:03] You don't have to spell it right. It just has to be consistent with itself. There's probably a lesson in that. Okay, great. So, we've got our slots. Now we come over here to our slot context because we need to consume that slot context for the label and the input. If I click on this, we're still not associating stuff.

[02:21] Even though we're providing that value, we're not consuming it. So, we're going to make a function called useSlotProps. We're going to accept some props that we need to be responsible for merging, and then we're also going to accept a slot string.

[02:36] So, for the type for these props, we're going to turn this into a generic props, and then we're going to return props. And that, then, we need to retrieve the slots.

[02:51] So, slots, useSlotContext, and we'll have to pull that in from React. And then we're going to return a merge of all these props. Now, in React ARIA, there's a pretty interesting and advanced merge props utility that they have

[03:10] that handles, like, calling all the functions properly and merging class names and different stuff like that. And you'd want to implement that in a real-world scenario, but for simplicity, we're just going to merge objects here. So, we're going to merge all of the slot props here first,

[03:29] and then we're actually also going to provide the slot itself, the name of the slot. So, that's, like, useful for styling purposes and stuff because it'll end up on the DOM node. And then we'll, last, tack on all the props. So, overrides will work.

[03:44] And with that, now, I'm going to say props equals useSlotProps, and label is going to be the slot that we're trying to access for this one, and input for this one. And now, everything should work. If I click on Venue, we're focused on the right thing.

[04:03] We're getting our generated ID, you'll notice there, also. And so, yeah, things look awesome. Looking at the app right here, I can customize the ID. I can say ID my text, save that.

[04:18] And if I select this, boom, I got ID of my text on the label and input, and it's all associated, and it's awesome, and I love it. And if I wanted to, I could override it here, my non-text, whatever. And now the IDs are different, and so it's not properly associated. I don't want to do that.

[04:36] But we could do it on both, my non-text. Boom, and now they are properly. Oh, hold on, they're not. My non-text right here, my non-text right there. Oh, that's interesting, because this needs to be HTML4. There we go. Now they're properly associated, so we're in a good place there.

[04:54] So, you have the ability to override things if you want to, but you typically would not, because that is part of the value of having the slot, some of this logic is encapsulated and handled for you. And so now you have a really simple text field that is reusable,

[05:11] and we have the different elements that now this label can be used in other places, which, spoiler alert for the future, the near future. But, yeah, we have these components that can kind of be mixed and matched between the different slottable compound components.

[05:27] So, yeah, let's actually just one more time, let's review. So, we're going to create this slots object. We're going to pass that to the slot context. The slot context is a pretty simple object of objects. Inside of these slottable components,

[05:44] they're going to access their props through the use slot props. It's going to grab all of the available slots from whatever provider we're at, and then we're going to return an object that merges all of the props that the slot provider said it needs with the props that it's received itself,

[06:03] and then we spread those like peanut butter across the different elements.

[00:00] So we've got a problem. I've got this input. We have a venue. And when I click on that venue label, it doesn't focus on the input like it should. So that is something that you're going to be fixing in this exercise. We have a text field component that is a slotable component, so it should have slots for label

[00:17] and input. And the label and input slot components should associate themselves to the like with the html4 and an id so that those things can be associated. So when you're all done, you should be able to render a text field component and then inside of

[00:35] that you can render a label and the input itself and they can take whatever additional props that that you want to provide them. It merges those things together. You can override things if you want to, so feel free to open up our app tsx right here and like customize the id and make sure that you can customize

[00:55] that id. But the goal here is to make it so that the label and input are automatically associated with each other thanks to the slot contacts that the text field provides and the slots that it provides and the label and input consuming those slots

[01:15] with the label consuming a slot called label and the input consuming a slot called input. Have a good time.

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

Slot Context

Transcript