Compound Components Validation

[00:00] So let's take a look at what's going on. We're trying to render the toggle button. If I go to the toggle button, it's trying to use the toggle context. But the toggle context could be null. In fact, we initialize it to be null. And so when we come around here and say, OK, let's destructure these properties, we're destructuring it off of null. And TypeScript can't help us because we told it, hey,

[00:19] I know better than you. We're going to get rid of that first and let TypeScript do its job by helping us out and saying, hey, this could be null. And then we're going to, because I don't like having to deal with that, that'd be super annoying. You have to say context equals that. And if there's not context, then what do I render?

[00:38] I don't even know what I render. Probably throw an error, but just a more helpful one. So instead, whenever you want to do a reusable thing, you make a function. And we're going to make a function called useToggle. It's a hook because it's a function that uses another hook. So we're going to get our context from useToggleContext.

[00:57] And then if that context does not exist, we'll just say if there's no context, then we're going to throw a new error that says toggle must be used within a toggle provider. Or maybe to be more clear, because exactly what we're trying to do here, we're going to say toggle context not

[01:16] found, all toggle components must be rendered in a toggle. That's pretty descriptive, nice and helpful error message. And then if that context does exist, then we'll simply return it.

[01:32] And then here, for these three, we'll just say useToggle. And now TypeScript is happy because we've handled the null case. And our users will be happy because we handled the null case also and gave them a much more useful error message. Oh man, I didn't realize that all toggle components must be rendered within a toggle. Let me go fix that.

[01:51] So we'll go over here and we'll say, OK, toggle right there. And stick toggle button in there. And now, would you look at that? It works, hooray. And then, of course, we can do all of our other toggle components or toggle on and toggle off and all that stuff that we had before.

[02:09] But the point is that the error message is much more useful. And our ability to consume the context is a lot easier. So in my compound components, I pretty much always do this. I'm not really exporting this. There could be a use case for that. I don't need to export it. And so it's not like I'm just doing this

[02:29] for to keep myself happy and stuff. It's to make my users have a much better error message and make it easier for me to consume it properly.

[00:00] So earlier, we told TypeScript to shut its face by adding that bang at the end of a couple places, that exclamation point. And now TypeScript is laughing its face off at us because we ignored something that was actually really important.

[00:15] So if I update our app TSX file to just render the toggle button, take a look at what happens. Hmm, what is going on there? That's not good. I do not like this. Let's go over to our console and see what is going on.

[00:32] Cannot destructure property on of zero comma import React use as it is null. Huh, well, that's kind of annoying. We could click on this and look. Oh, there it is, use toggle contact bang. Yikes, we cannot destructure because we have no provider.

[00:51] Ah, so this is actually like, I wouldn't say this is terribly common with compound components. People are typically going to render the root one, but if they forget, wouldn't it be nice if they had a nicer error message? And that's what you're gonna be doing in this exercise, giving people a nicer error message when they make a mistake like this.

[01:10] So, and on top of that, we can get rid of the exclamation point because we're gonna handle that properly, so let's get to 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

Compound Components Validation

Transcript