Img Error Boundary

[00:00] All right, so we want to wrap this image in an error boundary. We could put that error boundary up where we're using the image, right up here, right here. We could put the error boundary right there, but I want this image component to be like a pretty generic image component we can use all over the place.

[00:18] So we're going to have a special ship image component, which is going to be responsible for rendering the error boundary. So the specific behavior we want for the specific image instance. So with that, we're going to make another function, ship image. It's going to actually be pretty similar. We're going to take our props. That's going to be our React component props.

[00:37] We're not going to do the suspense stuff, though. We are going to render a uppercase image with all those props, but we're going to render around it an error boundary. And for us, our fallback of that error boundary is going to be a regular image with those props.

[00:56] And we need three dots. There we go. Syntax errors are not good. And we are done. So if there is an error, then it will fall back to a regular image, and that will allow us to render the rest of our stuff without having any trouble. So that should take care of these problems

[01:16] where we blow up the entire app if it's not exactly what it's supposed to be. So this is an improvement. Error boundaries can be nested. And that way, if a certain part of your UI fails, the rest of the UI doesn't have to be replaced by the fallback. So there you go.

[00:00] By making things wait on the image before we show anything and suspending on that image, if there's a problem loading that image for some reason, one reason or another, then our error boundary, our nearest error boundary is going to be rendered. This is interesting because it means that if there's a problem loading the image, we're not going to get any of the data either,

[00:19] which probably not the best user experience. What users are used to is if there's a problem loading an image, then they'll at least see the data, they just will see this little thing with the alt text showing up and it's not a great experience, but at least it's better than not seeing any of the data. That is what your job is here,

[00:37] is we're going to leverage the fact that error boundaries can be local and nested and everything. We're going to put an error boundary right around the image, so that way we can do whatever we want to with our fallback. Now, the interesting thing here is that maybe you could have a special image that you display as a fallback,

[00:55] for if there's a problem with this image. That would be fine, but what we're going to do is actually our fallback will just be the regular image tag for this particular image. That way, what ends up being rendered is a regular image tag, and so if it fails again when it's rendering the fallback,

[01:14] then it's fine because users are used to this happening. It's also pretty unlikely to happen anyway, but then if for some reason it failed when we were doing the suspense boundary, and like all of the pre-loading and everything, but then it somehow worked with the regular image, then eventually it'll show up,

[01:33] so win-win, but you should talk to your designer or product owner on what they want to have happen if the image fails to load because I'll bet you that this is not it. Let's do that.

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

Img Error Boundary

Transcript