Initialize Toggle

[00:00] So let's start out with making the initialization work. We'll do the reset here in a sec. So initial on, we'll set that to true. Of course, TypeScript's not happy with that. We don't have the types for it. So let's go into here, and we'll let our AI assistant fill this in for us.

[00:17] So it defaults to an empty object if no object is provided. Our object type, it has an initial on property that's optional and it's a Boolean. If it's not provided, we default to false. And then we'll pass our initial on right there. And this should get us initializing to on. Perfect.

[00:35] So then the reset functionality, if we come back over here, let's get rid of that. We'll pull reset from use toggle. We'll dive into here and pass that reset right there. And then we'll add the reset function here. So function, reset, and it dispatches. The type of dispatches is reset,

[00:55] and we're gonna pass the initial state so we know what state to set it to. Let's come up here to our action types right there. And I'm just gonna let Marty the money bag fill that in for us because honestly, this isn't, we've already learned about this stuff. So we've got our type reset and our initial state. That's our toggle state that we want to reset it to.

[01:14] And then we have our case for reset, which will return that initial state that the action gave to us. And that should reset us. Dun, dun, dun, dun. That works great. Now, before I wrap it up, hopefully that was pretty straightforward, but I want to just call out what makes this special

[01:32] over the alternative mechanism for resetting a component, which is to change its key. So I'm gonna come over here to our app. I'm gonna call this our app info, and then we're gonna export a function called app. This way we can reset the app info.

[01:51] So we're gonna return app info, and I'm gonna have some state initial. This'll be our, yeah, whoops, our key. We'll initialize it to a symbol, and we'll pull in use state from React. And then here, actually, let's add an on reset right here.

[02:14] We'll pass on reset. So this is just another way to do reset, but we're gonna see what is the difference, not only in the way that this looks, but also in its actual functionality and why the reset functionality matters so much. So then we'll add our key. Whoops. Key is key. There we go.

[02:34] This is blowing up because the key, it's not assignable. Symbol's not assignable to key or null or undefined. What? That's interesting. I've definitely used a symbol for a key before, but we'll just do this. Key plus one. There we go. So all that needs to happen is the key needs to be different every time. Maybe I haven't used a key for a symbol before,

[02:58] or a symbol for a key, but in any case, we can reset the state of this entire app, the app implementation, by changing the key. And we've learned this before. So why aren't we doing that for handling our reset? Why do we have to add reset functionality to the use toggle itself? And here's why.

[03:17] When I hit reset, no animation. And the reason for that is because we have ripped out the old switch component and we've put in a brand new one and with its initial state all set up and everything. And so while you probably make something like that work

[03:36] with animated JSX and stuff like that, there are animation libraries for that, like why would you want to? It's just much easier if you're going to have a way to initialize the state of your hook or your component, and there is a use case for resetting it. There's not always, but pretty often there's a use case for resetting it.

[03:54] You're going to want to do that within the hook so that things like animations and that sort of thing are taken into account. These transitions and use effects will be different in that world as well. So yeah, I typically, if I'm going to have

[04:12] an initialization or a state initializer, I'm also often going to have a reset capability because even though you can technically reset the state of a component or just basically get rid of the component and get a new one with that initial state, even though you can do that, I don't really like to do it

[04:31] because of these ancillary reasons.

[00:00] So in this step of the exercise, I want to be able to start it out as being on and reset it to be on again, or vice versa, start it out as being off and reset it to being off again. So reset should just reset it to its initial state. That is your job. It should be quick. 

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

Initialize Toggle

Transcript