Display Pending UI with React useFormStatus Hook (experimental)

Instructor: [0:00] As we're working on making our user experience better for adding a customer, one of the things we've noticed is that when we look at our modal, whenever we click onsubmit(), we have no feedback. One of the things we can now do is add a new experimental hook from React called useFormStatus.

[0:17] The way that you would typically expect to do this is to add your import here, and then you would just get your hook here, and it gives us a object. We would get pending from that, useFormStatus, and then you would think you could come to your button and just add a disabled.

[0:36] Then add your text here. If it's pending, we want to say loading, else we want to say submit. But this doesn't work, and the reason for this is that the current way that the API is set up, you have to use the useFormStatus in its own component.

[0:53] We need to take this button and make its own component, and instead of this loading, let's just make this our spinner icon. Then we can just bring our hook down to that new component. Now, we just add our submit button. And so, now, if we come back to our application, let's add Dwight.

[1:18] Now we click submit. We get our loading icon. Dwight was added. We can check our terminal, scroll up a bit, and we see, yep, Dwight was added, and Dwight is here.

[1:29] In review, we added the new experimental useFormStatus hook from React. To use the hook, we had to create a new component that made use of the hook, and then add that component into our form. Now, we're able to give our user good feedback. Whenever they click submit, they get a loading state.