Formal Status

[00:00] So this is actually a pretty simple refactor. We're going to say let status be either pending, fulfilled, or rejected. And we'll initialize it to pending. And with that then we will set the status to fulfilled. And our error or our status is rejected in this case. And then we'll use that status instead of

[00:22] just checking for the existence of certain variables. So status is rejected. Then we'll throw the error. And if the status is pending then we'll throw the ship promise. Otherwise it actually doesn't matter that it's resolved. We'll just continue because that's the only other

[00:39] possible explanation. And with that it doesn't actually change our behavior. If we change this to dreadnought. Is that how you spell dreadnought? Oh great, I don't know how to spell dreadnought. Dreadnought, not, I don't know. But if you get dreadnought spelling correct then it will load

[00:58] just fine. We just did a simple refactor to get the status of pending, fulfilled, and rejected so that things are a little bit more clear with what's going on. So good job.

[00:00] So right now we're just saying, hey, if there was an error, throw that. If it hasn't, if there's no ship yet, then throw the promise. Otherwise, we'll render the ship. We want to formalize this a little bit better to just make it more clear what's happening. And this will get us a little closer to the use hook as well. So we're going to make formal status.

[00:18] So your status is going to be either pending, resolved, or rejected. We'll start it out as pending. And this lines up nicely with a blog post that I wrote titled Make Impossible States Impossible that you can check out and stop using is loading Booleans. So feel free to take a look at those as you work through this exercise.

[00:37] And when you're all done, then we can work through it together.

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

Formal Status

Transcript