Prop Collections

[00:00] Let's go into the Toggler props, and right now it's just an empty object. Our job is to fill this with aria-checked and onClick. Aria-checked is whatever on is, which will be true or false, and onClick will be the function to update the clicked value.

[00:16] We save that and everything is working. Our togglers are acting as togglers, and that is the desired behavior for our prop collection here. It's a collection of props that should be applied to the common use case being a toggler. Now, in Downshift, you've got

[00:34] these collections of props for the input and for the menu, and for an item, and stuff like that. So it definitely gets more complicated than a toggle component like this one. But the idea is there are common use cases that people are using, and so let's give them a simple function

[00:52] or a collection of props that they can apply for those common use cases. Good job.

[00:00] If we take a look at our app, we'll notice we have this useToggle function, this hook, that's what we're going to be using here. It's giving us the on state. It also gives us a toggle function. But what we want is a toggler props. So we've got two togglers here.

[00:19] These should be props that I apply to a function or an element that is a toggler. So it should give me an onClick, and it should give me pretty much actually just the onClick.

[00:35] Maybe ARIA attributes and stuff like that too. So here we have our switch, we have our button, and the cool thing about the toggler props is that it is an implementation detail. So I don't have to know what props it provides. Maybe it's onPress instead of onClick and stuff like that. So I don't have to worry about that.

[00:54] All I know is I take these toggle props, I spread it across the thing that I want to take the role of a toggler, and now I have that control. Now, of course, it's not working because your job is to actually implement the toggler props, and I think you're going to do a great job. So let's get started.

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

Kent C. Dodds

React Fundamentals

React Hooks

Advanced React APIs

React Suspense

React Performance

React Server Components

Interviews With Experts

Epic React Pro

Advanced React Patterns Intro

Intro to Composition

Composition and Layout Components

Dad Joke Break Composition

Composition

Intro to Latest Ref

Latest Ref

Dad Joke Break Latest Ref

Intro to Compound Components

Compound Components

Compound Components Validation

Dad Joke Break Compound Components

Intro to Slots

Slot Context

Generic Slot Components

Slot Prop

Dad Joke Break Slots

Slots

Intro to Prop Collections and Getters

Prop Getters

Dad Joke Break Prop Collections and Getters