Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use Component State Initializers

    Kent C. DoddsKent C. Dodds

    In this lesson, we'll allow users to initialize our component's state with their own defaults and support a reset functionality to reset to the initial state.

    reactReact
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Often when you have a render prop API, it could be really useful to be able to reset the state to the initial state from within the component. In our case, we have this reset button. That reset button is bound to an on-click for reset. We're going to expect that from our state and helpers that we're passing to our children in the toggle render prop API.

    00:20 We'll also expect to have an on reset prop called. In our case, that's just going to log to the console. Let's go ahead and implement this. We're going to add a reset arrow function here. This will simply call this set state with on is false. That's our initial state there.

    00:39 As a callback, it will call this.props.onresetthis.state.on. Next, we'll come down here and add that to our get state and helpers, which we're calling our render prop API with. The reset is this.reset. With that, if we pop open the console, we click toggle on, we see that console log, and then we click reset. It resets us to the original state, and logs on reset false.

    01:04 There's one other consideration here, and that is a reset handler is not necessarily required. Let's go ahead and add static default props. On reset is just an empty arrow function.

    01:17 With a simple toggle component, it's not a huge deal to duplicate this initial state here. I don't like that, because if I were to add some state here, I'd have to remember to add that state here. In a scenario where the state object is a little bit bigger, duplicating that code is not optimal.

    01:32 What I like to do is I will create a initial state object that will have my on as false. Then it will assign state to this.initialstate. With that, I can call set state with this.initialstate, and that works just fine.

    01:49 In addition to this, it's a pretty common scenario where you want people to be able to initialize the state to whatever state that they want. In this use case, we want to be able to provide an initial on prop so we can initialize the on state.

    02:01 Let's go ahead and rather than on is false, we can say on is this.props.initialon. Then users can specify the initial on to be true, and it initializes as true. Then if we toggle it off and click reset, then it'll reset to that initial state.

    02:20 Because this is not a required prop either, let's go ahead and add a default. We'll say initial on is false, and then if this prop is not provided, it will initialize to false. This is the state initializer's pattern. As a helper, we can also reset to that initial state.

    Discuss

    Discuss