Form Status

[00:00] So we want to take this button and make it a little fancy and reference the form status. And so we're going to create a component because we can't do it right there in the same component that's rendering the form. So we're going to make our function and this is going to be our create button. We're going to get our pending state from.

[00:19] Use form status, that's going to come from React, excuse me, React Dom, this is important, it comes from React Dom and then we're going to return our button. So let's move this down, stick that there, but then we're going to enhance it a little bit with this pending state. So we're going to say disabled if it's pending.

[00:37] And if it is pending, then we'll say creating. Otherwise, we'll say create, create. There we go. And then we render our button in place of where our submit button was there before.

[00:51] And now if I say mining vessel and speed of four and here's our mining ship, we say create and we get creating right there. So much better experience for users. They know exactly what's going on as they're using our form and all of that done with the form use form status.

[01:10] Let's take a look at what form status has for us. So form status console log form status. And then, of course, we'll get our pending out of form status. OK, great. So with that, let's pull this up.

[01:28] We'll go to our console. We'll do actually before we even submit. Here's what we got. Action is null, data is null, method is null, pending is false. OK, that's fine. And then minor and five. And here's our mining ship. We create and boom, we've got our pending is true.

[01:47] And now we have data is our form data. So we could actually read instead of saying just creating, you could say creating form data dot get name. Oh, my goodness. Wouldn't that be cool? And that would come from. Here, so from form status and text,

[02:05] which would probably be happier if we were doing a form, a status dot pending and then form status dot form data. No. Hmm. Does not exist. Well, I'll tell you. Oh, it's because it's called data. There we go. And with that, then, hey, let's just do that.

[02:23] What the heck? That'd be fun. My cool ship. Top speed of one hundred. And here's our mining vessel here. Create creating my cool ship. What do you know? That's kind of neat. So you have access to all of that information.

[02:39] You know what method and the method is kind of funny because we're not actually submitting using a method. So I'm not sure what to do about that. But yeah, it does also give us the action.

[02:51] So any information that we can gather from that and then it returns to its pending false state where all those things are. No. Pretty cool.

[00:00] It's super cool that when we create a ship that it gets created right away or at least we can show stuff. So here's our ship and here's all of that and there's that. But when I hit create, I could actually hit it again and again and again and again. I could just keep hitting it. That's not great. We're actually submitting the form over and over again.

[00:18] That's why this never resolves because we just boom, boom, boom. Do it again. Do it again. So like turning that off might be a useful thing to do, preventing the user from submitting that again. And then also it could be nice to give the user some sort of message that we're in the process of creating.

[00:35] And so it would be good to maybe add a disabled here. So disabled is form status. If we're pending, it's disabled potentially or at least style it differently. Maybe have the text read something different. So that's what you're going to be doing in this exercise step.

[00:51] It should be pretty quick, but you do need to refactor things because the component that uses use form status can't be the same one that renders the form. So we've got to take the button, move it into a separate component, and then we can use form status to get the pending state. I'd welcome you also to console log the form status to see what other properties are in

[01:11] there. 

Suspense is key to managing async operations declaratively in React. 

It allows you to handle loading states, errors, and other async dependencies more smoothly by rendering a fallback while a promise is pending. 

In this workshop, you'll learn how to:

- Manage loading and errors with Suspense
- Cache promises and use the `useTransition` hook
- Update UI optimistically with `useOptimistic`
- Load images asynchronously with suspense 
- Keep UI responsive with `useDeferredValue`
- Optimize and avoid network waterfalls

Once you're through this workshop you'll have a solid handle on Suspense, which will really improve the UX of your apps and open doors to more advanced patterns in later workshops. 

## Data Fetching

No matter how fast your server is, you need to think about what the user's looking at while they wait. You also need to think about what happens if the request fails.

In this section you'll learn how to manage both of these declaratively in components using `Suspense` and `ErrorBoundary`.

## Dynamic Promises


Here you'll learn how to cache your promises in order to avoid unnecessary re-fetching. 

You'll also learn about transitions and how to make the transition from loading to resolved state smoother using the useTransition hook.


## Optimistic UI

The idea of "Optimistic UI" is based on the belief that most of the time the things your users do will be successful.

In this section you'll discover the useOptimistic hook, which is like useState that actually changes the UI even while it's suspended. 

## Suspense img

Anything async can be suspended, including images! 

This technique involves loading images with promises and using the browser’s native caching system. 

By combining async image loading with Suspense boundaries, you can control rendering fallbacks and ensure images are fully loaded before displaying updated content, avoiding stale UI states

## Responsive

You can run into some problems when using useTransition. For example, if the user is typing in a search box which you're controlling with state, you want to keep the `<input />`'s value up-to-date with what they're typing, not with the previous state while React is waiting for the transition to complete.

So in this section you'll learn how to use the useDeferredValue hook to  display some pending state while also allowing us to display the state that triggered a component to suspend.

## Optimizations

This section is about how to go chasing waterfalls.

Due to the design of Suspense, you can easily create network waterfalls by mistake. 

So what you're really be learning is how to deal with this both on the frontend and the backend. On the front you'll figure out how to trigger requests before use is called. And on the back you'll set cache headers on your responses to tell the client how to cache properly.

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

React Suspense

React Suspense

Transcript

Form Status

Transcript