Throwing Promises

[00:00] So, we no longer want to await this get ship because this is what's stopping us from being able to get down to the bottom where we actually end up rendering stuff, right? So, we want to actually render things right from the get-go. So, we're going to remove this await right there. Of course, this is going to not work out nicely for our components here because this is going

[00:18] to say, hey, I kind of, I'm a promise. I know what I resolved to, TypeScript is saying, but yeah, I'm not that thing yet. So, we're going to rename this to ship promise, promise, there we go.

[00:31] And then we're going to create a variable for the ship and let's add a dot then on this get ship that will assign the resolved value of get ship to our ship promise.

[00:46] We'll grab that ship type from our utils and I think we've taken care of all of those things. So now, if we save this, then things blow up, of course, because we're not actually using the ship promise.

[00:59] We haven't told React, hey, when this thing resolves, I want you to give me the details or give me the resolved value or anything. And again, we're not using the use hook yet, we're kind of building that right now.

[01:14] And so, all we have to do here is we say, if there's no ship, then throw the ship promise. We're saying, hey, React, here's the promise that you can hang on to. Again, this is kind of an implementation detail of React, the React team may not even like me teaching you this, I don't care.

[01:30] I think that it's really instructive for you to see how the things work on the inside, so we're going to do that. So, we're throwing the ship promise, React is going to catch that and then it will handle it appropriately. So, if we save that, we're still not going to get what we want initially because we haven't configured the pending state.

[01:49] So, while it does technically work, we're just right back where we started as far as the user experience is concerned, which is the only thing that matters. So, we've got our, if there's no ship, then throw the promise. And once that resolves, then React is like, oh, you resolved, great, so I'll re-render you.

[02:07] And the second time it renders, now the ship has been defined because we set that up. So, if we want to add some pending UI, then we're going to come down here. We already have this ship fallback, which is kind of handy dandy. We need to wrap the component that is suspending in a suspense boundary. So, let's look at where ship details is right here.

[02:25] We're going to add our suspense component and have the ship fallback be our fallback for the suspense component. So, we'll say suspense, bring that in from React. Here's our fallback and we'll wrap that up here. And now, ooh, look at that, fancy. Yeah, that's pretty cool.

[02:44] So, for that time period, we at least have something to show the user. Now, this all works because we removed the await, meaning that we could run to completion right here and get this rendered right away. And then, as React is going through, it's saying, okay, let's render this stuff. That's a div. That's another div. Great div with class name, details, whatever.

[03:03] And oh, here's a suspense boundary, I'll put that, you know, log that away. And here's ship details. Now, let me go call ship details. And then our code says, oh, there is no ship yet. We may have started this promise earlier. We did. So, the promise is already in flight, but we haven't assigned the ship yet. So, let's throw the ship promise and React's like, whoa, whoa, whoa, okay, okay, that's

[03:23] cool. I know how to deal with this. You are trying to suspend the ship details. So, I'll grab that promise. I'll hang on to it. I'm going to attach my own then handler to it so I can hang on to some information about that promise. And then, once that promise resolves, then React is like, great, the promise is resolved now.

[03:41] So, we can now render the ship details. And because we assigned the ship to the resolved value, we don't fall into this if consequence anymore. And we continue to actually render stuff. And that's how all that works. And in the meantime, of course, the suspense fallback gets rendered instead. I think that's pretty cool.

[04:00] And you should feel pretty cool for building this. Good job. 

[00:00] We've got this application here that is loading some data from a server and we can actually control how quick that data loading is by, in this get ship call, it accepts the second argument just for our development purposes, which is the delay, like how long it takes

[00:18] for this request to happen. And so if we set that to be two seconds, we're just looking at a white screen for a long time. It'd be nice if we could get some pending UI in there, that would be a good thing. And we use suspense for that pending UI. So your job is to add a suspense boundary for our components so that we can at least

[00:35] show some fancy suspense based loading state for while we're loading this data. It's going to require a little bit of refactoring in the way that we're doing things now. We don't want to await the getting the ship, but we want to use that promise and literally use that promise.

[00:53] So that's what you're going to be doing in this step of the exercise. Let's get going.

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

Throwing Promises

Transcript