Img Component

[00:00] Okay, let's come down to our ship details where this image is rendered. There it is right there. And we want to change this to an image component. So capital I for image component will come down here to create that component. So we're just going to wrap a regular image tag.

[00:17] So I'll have function image, and this is going to take all of the props from like that you typically pass to a regular image and then forward them along. Instead of using this though, we're going to say component props and pass image. There we go. That's the type.

[00:34] Okay, so then we're going to pluck off the source so we can access that. And we're going to call image source with that source and that this is going to need to be passed inside of use. So this is going to be used there. And I'm going to just say source equals use. There we go. Source. Tada.

[00:54] Okay, great. So with that now adding use here, we just need this to return a promise. And then use will trigger suspense for this image. We're suspending. And then that transition that's happening will stay happening until all the components that need to be rendered are finished suspending.

[01:13] So let's create this image source utility. It's in our utils directory. And we've got this utility for preloading the image. So now we just need to make a image source function. But we do need to have a cache for this, remember, because we don't want to be creating these

[01:32] promises on every render. We need to cache them. So let's create our cache first. It's just going to be a string, which will be our source for our image, and then the promise that resolves to a string, which would be, again, the source for our image.

[01:46] So with that, then, we can export a function called image source. Yep, all of that stuff looks pretty good. So here's the thing that does the async thing. And here's the mechanism whereby we avoid doing that async thing if we've already done it before.

[02:06] And then we get that image promise. We update the cache to have that promise, and then we return the promise. And that should actually do it for us if we import this from our utils. And our source here, it looks like it could be undefined. So why don't we, let's see, I guess we could just default this to an empty string.

[02:26] I don't know why anybody would want to have the source be anything but a string, but I guess that type is coming from the React component. So yeah, we'll just do an empty string if you don't provide a source. Okay, let's see if it works.

[02:42] So open up our DevTools, hard reload with an empty cache, and then we'll change to a slow 3G so we can see what's happening. And then interceptor. All right, boom, boom, boom, boom. That request finished, but we're not showing the data yet. And now we're waiting for the image to load, and boom, it all comes in together. That's exactly what the objective was.

[03:01] Maybe not the best experience to have to wait for the whole thing. We'll get to that in a second. But because this image suspended during that transition, transitional period, it took hold of the transition, and the transition didn't end until all components were done suspending. And that includes our image.

[03:21] So again, you do not have to just be loading data with a fetch API or something. You can do any asynchronous thing and suspend on that, which I think is pretty legit. There you go.

[00:00] Here's what we need to do to solve the image problem for this step of the exercise. I want you to open up your DevTools, go to the Network tab, and then I want you to hard refresh. So right-click on this, empty cache, and hard reload, or however your browser does it. Just get that cache emptied.

[00:19] And then change this to a throttled slow 3G network so you have some time to see what's going on. And then choose one of the other ships. And you'll notice that the wrong image is showing up for the wrong description, and that's because the image for the ship is showing up here.

[00:35] And so what we want is for nothing to change until the ship is loaded. That means we need to suspend on the ship's image until that image is loaded. We've got a utility for loading that, so we've got a utility for generating a promise out of loading the image. And so that is what we're going to be doing in this exercise

[00:54] is using that to force the image component to suspend. So let's make that image component and get it suspending.

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 Component

Transcript