Multi-step Actions

[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.

[00:00] Sometimes our actions are doing more than one thing. Now, you're probably looking at this, some of you, and you're like, shouldn't that be done with some sort of queuing system or something like that? And yeah, probably, but we 100% have situations where we're saying, OK, I've got to do this, and then I'm going to do that, and then I'm going to do this. And it would be nice to update the user as we're

[00:19] processing all of those things. And with UseOptimistic, you can actually do that quite easily. So let's assume that this set message is coming from a UseOptimistic thing. Then we can say, hey, I'm creating my order, and now I'm creating the payment, and now we're almost done. And we can display those messages. And all of this works because even though we're

[00:38] running inside of a transition, inside of this action, we can make state updates with UseOptimistic. So UseOptimistic is in just about Optimistic UI, and that's the point of this exercise step. So your job is to make it so that we have one message for while we're creating, and then another one while we're loading.

[00:56] So let's get to it.

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

Multi-step Actions

Transcript