Stability

[00:00] So, what we need to do is make sure that useToggle has access to the initial on in such a way that it never changes. So what we're going to do is set useRef from React, whoops, our coding assistant is being

[00:17] a little overeager, but now we have our initial state, we're going to say .current, there we go, for that initial state. And this initialState.current will handle that as well. And so now, because we never update the initialStateRef, and actually it might make sense to call this

[00:36] initialStateRef, because we never actually update that ref.current value, it's always going to be what we set it to when this was first initialized. And so, that solves our problem. I can switch this to false, I can go back, I can reset, and it's doing exactly what it should.

[00:53] And so, no matter whatever people outside of our useToggle hook are doing, this initial value cannot be changed. They could reset it with a key if they wanted to, but when you render this initially, this initial value will not be changed. And I think that's a valuable, useful feature.

[01:10] I am using this in Downshift, and I've seen it in other libraries as well. So, this is the state initializer pattern. Good job.

[00:00] So, there is a hidden issue with the state initializer pattern that you very easily could ignore, but it's also very easy to resolve. And it's also not very common to experience. And so, I want to show it to you so that you just do this by default and you never have

[00:18] the problem, because at scale, everything, even edge cases, will happen a lot. And so, here, Kelly, the coworker, put together this initial on state variable, and so now when we click this button, we're going to change what initial on is.

[00:36] And so here, if I turn this off and then reset, it's going to reset back to on. If I click this again and then change initial on to false and I reset, it's not going to reset to on. Now, you might argue with me about whether this is a desirable feature or not, but when

[00:54] I see the word initial, I think, like, this is the initial value. And resetting to a different value other than the initial one doesn't make any sense. And so, what I want you to do is make it so that I can click on or toggle initial on,

[01:12] turn this off, and then reset, and it should turn back on, because the original initial on value was true. So that's your objective for this one. We'll see you when you're done.

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

Stability

Transcript