Parallel Loading

[00:00] Let's go ahead and clear our cache right now just so that we're all ready to go when it's ready and I'll turn this on a, well we'll turn that on a slow 3G once we've got it. We've got our ship and we've got this right here where we're getting the image URL for the ship. We want to move this

[00:15] up so that this can happen before we trigger suspense with this use right here. And we're going to do the ship name so this gets us this ship image source. If we dive into ship image and then image right here we're calling use image source. So we don't actually need to call use

[00:35] up above but if we call image source then that will start the preloading because that image source function is cached. And so we can say ship image source in there and that will trigger the preloading of the image so that by the time we end up rendering this once this is done

[00:54] suspending it will have already started. So with that let's save that we get a reload and let's go slow 3G close this out and we'll go to the battleship and you notice right next to each

[01:07] other exactly what we wanted. So it's loading let's see that's I think that takes two seconds for this one to finish so it's two seconds faster. Good stuff I'm a fan for sure. So all we needed to do was analyze the the waterfall that we had to see oh we're loading this we can in fact load

[01:27] this sooner. There's not like a data dependency here so let's preload that by simply calling the function earlier. Again not my favorite this is kind of a manual optimization and if we decided to get rid of this there's nothing telling us that we need to also get rid of this which is

[01:44] kind of frustrating but that's why you use a framework. But this is something that you can do if you're using this directly so it's nice to know that there's optimizations available.

[00:00] If we take a look at how things work, if we go to one of these, then we're loading the data and then we load the image. But the way that our images are set up, it actually allows us to not have to wait for the ship to be able to get the image URL for

[00:17] the ship and start suspending on that image. So what we need to do is switch to just using the ship name that comes here and trigger suspense for that or pre-loading for that image. So by the time it shows up in here, it doesn't need to suspend. It's already been in the process of fetching.

[00:36] Maybe it needs to suspend because the image isn't ready yet. But ultimately, eventually, the image will be loaded. But the point is that we're going to be tightening the gap between these two. We want to scooch this over to the left. That is the goal for this exercise. I think you're ready. Let's go.

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

Parallel Loading

Transcript