00:00 So let's get to it. We want to have a message that's passed to create button. So we're going to say message and create button gets that message. And that is the children prop children. Yep. There we go. Awesome. And that's what we're going to stick in here. Children.

00:16 So we're no longer using pending that we are still using it for the disabled state. We're not going to use it for the children because we're going to just update the content to the button. Your designer may have a more clear or better place to put this message. This is where we're going to stick it for our example. All right. So now we're going to need use optimistic for that message. So

00:36 message set message. No, it can't be used to AI assistant. It's got to be used optimistic. If you use your state, you're not going to get it updating during the transition. So use optimistic. We will want to initialize it to create. So this is the value that it will have when we're not in the middle of a transition.

00:53 And that is exactly what we wanted to say. That works perfectly. It's almost like they thought about this API a little bit. Set message creating. And then once we've finished created, then we can set the message created. And now we're loading because that's what happens when we set the ship name. So sweet. Good stuff.

01:13 So with that, now I can say here's my ship name mining ship top speed of one and grab my mining ship image and create creating dot dot dot. Now created loading dot dot dot. Look at that. That's pretty cool. And it's all done with use optimistic.

01:32 Nice stuff. So just a quick review. We updated the create button to accept children as a parameter or a prop. We're passing the message here. We initialize the message to create. And then during the process of our action, we're just updating the message as we go. And this works

01:50 because you use optimistic allows you to update the state during a transition. And then when the transition is over, it goes right back to its original or to the value that you pass as use optimistic. So it's similar in some ways to use state, but it does actually care about this

02:08 value. One other thing about use optimistic that we're not getting into is that it's a little bit more versatile in the way that you can actually pass a second argument here, which accepts the state that you've given. So that would be this state. And then also here, let's see if we can

02:25 get that thing to show up again, the state and also the action. So whatever you called in here, and that would allow you to merge things together. So if you're thinking about like a chat history, you've got the current messages and then you could set or add an additional message. And then your function here would take the current messages and your additional message,

02:44 merge them together so that you can display all of the messages in that way. So use optimistic does have a little bit more that you can do with it than we're going to be covering today. But this should give you the right mental model for when you should reach for use optimistic. And the answer is really, do I need to make a state update that happens during a transition?

03:03 And that's when you use optimistic.