Optimistic UI

[00:00] So here's what we're going to do. I'm going to come down to the ship details, and the first thing I'm going to do is accept the optimistic ship. We need to have a optimistic ship be displayed when it's available. So we'll accept this optimistic ship. Optimistic ship, that's going to be a ship which will bring that type from our utils.

[00:19] With that then, we can say, hey, if I have an optimistic ship, then let's show that one instead. Otherwise, if there's no optimistic ship, then yeah, sure, go ahead and suspend with this ship. Great. So then we come up here and we're going to pass the optimistic ship.

[00:36] Now, the optimistic ship could actually be null potentially when we don't have an optimistic ship. So let's come down here. This could be a ship or null. There we go. Now, with that, we're going to actually create a optimistic ship with useOptimistic.

[00:54] So optimistic ship here, we'll just copy this, stick that there. That optimistic ship is going to come from useOptimistic. Optimistic ship and setOptimisticShip. Now, with useState AI Assistant, we're going to be using useOptimistic instead.

[01:12] Now, that's going to come from React. Yes, it's going to be either a ship or it's going to be null. We'll initialize it to null because we're not currently creating a ship. Now, we're passing the optimistic ship where it needs to go. We need to pass this mechanism for updating the optimistic ship down to our create form.

[01:31] So let's do that here. Then we need to add that here to our types. So setOptimisticShip, you can either set it to null or the ship. With that then, inside of our form, our create form where we've got

[01:51] all the different things that you can submit, we're going to call setOptimisticShip with a ship that is generated based on the form data that's being submitted. So we have this createOptimisticShip function that takes

[02:10] the form data and it's going to create a ship-like thing. Now, it's going to miss some things like fetched out. It doesn't know when that's going to be fetched. We could say date.now, but that's a lie to the user. So we're just going to help the user know, this isn't actually created yet. We're still waiting on that. But yeah, everything else, we've got the name and the top speed

[02:30] and the image even we can read that from the file data to URL. So that's pretty cool. We don't support adding weapons yet. You could add that if you want to for fun. But yeah, we're going to use this createOptimisticShip to make

[02:45] our ship and we're going to setOptimisticShip with that. This is asynchronous because reading the file is asynchronous, but it's very fast, so we don't need to worry about that being a problem for us. Okay, great. So we're going to create the optimistic ship, set that to our optimistic ship,

[03:07] and that's it. Actually, we're done. Okay, so let's create our ship. This is the mining vessel, top speed of three, and here's our cool mining ship. We hit create, and boom, it's right there. You'll see the dot, dot, dot right there. So it's not totally done, and now it's done.

[03:25] What's cool is the way that we built this means that it looks exactly the way it's going to look when it all is finished, or as close as possible so that when it is finished, we don't have everything bumping around or anything like that. You just use the same components and just pass the optimistic version of that component, and it works out super nice.

[03:44] So let's just review because there's a lot of moving around in here. So the most important thing here is that we're using use optimistic so that we can make state changes during a transition. We can either be a ship or we can be null. We default to null. If we're not actively creating a ship, then it's going to be null.

[04:02] That gives us the optimistic ship and set optimistic ship. Then we pass the set optimistic ship down to our create form, and in our form action, we call set optimistic ship. So we're in a transition right now because we're in a form action. We set optimistic ship, so that's going to update our UI right away,

[04:21] not waiting for the transition to end. We create the optimistic ship out of the form data. So whatever thing that the user is creating, you're going to have to create a fake version of that thing with the data that they provide. Of course, they don't always provide everything, so we've got to fake out some of that stuff in some way. You might even add a property to your fake version that's

[04:41] pending or something like that so that your UI can be like, oh, this is a pending version, let me display this special thing or whatever. But with that then, that's going to be fed into our ship details, which takes that optimistic ship, and it's going to use that as the ship it uses instead of

[04:59] the ship that it's suspending for while it's waiting for that suspending ship, the new one we just created, while it's waiting for that to finish loading. That is your optimistic UI with the use optimistic hook.

[00:00] So Kelly did a bunch of work for us to put together a form with a form action that will create a new ship.

[00:06] So if we type in mining ship and top speed of four, and if we choose a cool ship file here, and then hit create, then after a moment, and another moment, there it is. All right, awesome.

[00:23] That user experience is not good, could definitely use some optimistic UI. The fact is that, like, for sure, there's only so much that you can do because the network is not under your control. So maybe it'll be that slow, for real, you just really can't control that. But what we can't control is what we are showing the user while that is happening.

[00:42] And we could show that really nice user experience, just show the ship right away, while things are happening in the background. And so that's why we're going to be using use optimistic, because if we put our optimistic UI in use state or something, those state updates aren't going to happen during the transition.

[01:00] Only optimistic state updates will happen during a transition like the one in a form action. So you're going to go and make some refactorings, we're going to have to refactor our ship details, or at least add a feature to the ship details to accept an optimistic ship.

[01:17] So it can display that one instead of the ship that is currently selected, various other things that you're going to be making in the emoji will guide you. But we're by the time you're done, the experience of creating a new ship is going to be a lot better. So have a good time with this one.

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

Optimistic UI

Transcript