Utility

[00:00] So let's get started with our use function. Use, this is a generic, so we're going to take the value, but that value is going to be derived from the promise itself, and then we're going to return the value itself. So that'll be pretty interesting. So the couple of things that we want to check first,

[00:19] if it's already been fulfilled, then let's just return the value. So if use promise, oh, right, we actually need to get the use promise first. So here we have our promise, but it's not going to have a status on it yet. So we're going to say our use promise is a promise as a use promise.

[00:37] So now we can say if the use promise dot status is equal to fulfilled, then we can return the value. Oh my goodness, thank you, assistant. This is great. So we have our fulfilled, we'll return the use promise. If the status is rejected, then we'll throw the reason it was rejected.

[00:57] So this would be an error. And then if the status is pending, then we'll throw the use promise itself, and then React will catch that promise, it will add its own then handler, so it knows when to re-render, and then it will re-render. And actually when that happens,

[01:14] then our then handler will handle that also. So let's continue to review because you never trust AI generated code, you have to review it. I mean, maybe you're watching this in 10 years, and like, maybe you are AI. Am I AI? I don't know, that's crazy. Okay, so before we continue though, we're gonna say use promise dot status is pending.

[01:32] So if it's not fulfilled, rejected, or pending already, then we're gonna initialize it to be pending. And then we're gonna add our own then handlers here, so that we can handle when there's a result or a reason that it was thrown. Now this is actually a really common pattern, and I understand why the AI wrote it this way,

[01:50] but this catch is going to catch any errors thrown in here, which there shouldn't be any, and also it seems kind of wrong to me. And so I'm going to write it like this. So we have then with the success handler and the error handler, there shouldn't be any errors in here. It probably doesn't make too much of a difference,

[02:09] so you feel free to keep the catch if you like it that way. And then finally, we'll throw the use promise. Now it's interesting that the AI added this directly to the promise instead of the use promise. Either way, it's literally the same variable. So I'm gonna just use the use promise so that we're only referencing the use promise everywhere down here.

[02:28] But it is the same variable, so it actually doesn't make all that much of a difference. You could have written this a number of different ways. It really doesn't make a huge difference on how you actually implemented this, but the basic idea is if it's filled, you return the value. If it's rejected, you throw the reason.

[02:46] If it's pending, then you throw the promise itself, and then you add the handlers if it hasn't been initialized yet and all of that. Okay, great, so that is our use hook, fancy pants. So let's come down here. We'll get rid of all of this extra stuff, everything, all of these variables.

[03:06] We're gonna keep the ship promise, but we don't need these handlers on it. We can get rid of this stuff, and now our ship comes from use ship promise. Holy smokes, isn't that beautiful? I love it. And the whole thing totally works. Also, if you misspell the ship name, where's our ship name?

[03:24] Here we go, Dread Yacht. Is that how you spell yacht? There we go. Sweet, so everything is working as it was before. I think that is a pretty interesting little hook that we just put together. Good job.

[00:00] Great, it's time for us to make our utility so that we can have this simple line of code for any time we need to consume a promise. And then, of course, the pending state is handled in the parent and the suspense boundary and the error is handled with the error boundary. So beautiful. And this use hook is going to make it possible.

[00:19] A utility that we're going to give to you is this use promise, which is basically just a promise that also has a couple of properties for us tracking information about the promise. So like I said, this is a bit hacky and it's implementation detail stuff, but I think that

[00:35] it will give you the right mental model for working with the use hook and suspense and error boundaries. And so that's why we're doing it. So we'll have our status and value and reason tacked onto that. And then to get your use function started, this is going to be a generic function that takes a value, but that's going to just be inferred by whatever the given promise resolves

[00:55] to. So you don't have to use the generic or anything like that. You notice we're not using it there. So it's all inference and it's beautiful. Ultimately, it returns the value, which is a little bit magic. And then we are going to take that promise and assign it to the type of use promise with that value.

[01:13] That way we can tack on all of these properties so we can keep track of stuff. So lots of this is just going to refactor stuff that we've already got into a use function. It's going to be awesome. Let's get started.

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

Utility

Transcript