00:00 So the first thing that we're going to do is we're going to take this words. This is going to split the query into a set of words. We're going to move this up to right here. And now we're actually deriving state right here. We are deriving this words state from the query. It seems kind of like funny to talk about it that way,

00:18 like I'm just literally performing some computation based on the query. But that's deriving state. This is now state that has been derived from the query. This is an array of words. And now, with that, we can determine whether the words includes dog, cat, and caterpillar.

00:35 And we're going to, really what we're doing here is we're deriving state from derived state, which I think is kind of interesting. So we're going to say our dog checked is based on whether the words include dog and cat and then caterpillar. And with that then, we can come down to our UI and we can control the checked state.

00:55 So this is an input of type checkbox. So we're not going to say value here because that's not how you can, or that's not the prop, the property of the DOM node of checkbox. For that, you actually use the .checked prop. And so we're going to use checked as our prop here.

01:14 And so we've got our dog is checked, we've got our cat is checked, and our caterpillar is checked. All of this being derived from the query state. And so this is another important takeaway when we're talking about controlled inputs is you don't necessarily have to

01:33 have the controlled value of that input be a result of the changes of that input directly. So these are being controlled by some state that is actually being fed into and from the input itself. So you can have different elements or

01:49 different inputs controlling different things in your UI and that's totally like a normal thing to do. So with that now, I can check my dog, I can check my cat, I can uncheck dog, uncheck cat, everything is working as you might expect.

02:04 If I type in here dog and type cat and dog, cat. All of that is working as you might expect. So there you go, that is derived state. Definitely something that not enough people do that we definitely should be

02:21 doing a lot, deriving state as much as possible because it drastically simplifies keeping things synchronized. So if you cannot derive it, try a little harder. But if you really can't, then yeah, you do, like there's nothing wrong with using multiple use states in your component.

02:38 That's totally fine and they're perfectly good situations for doing that. But yeah, try to derive your state if that state is actually derivable from existing state.