useDeferredValue

[00:00] Here is our ship search component, and we've got our useTransition, that's our transition pending, and we've got spinDelay and all of that stuff. This is all great, except that we are transitioning our onChange, and the value that shows up here comes from this thing that's happening in the transition.

[00:18] That is not going to work. We're going to remove the useTransition, and call useDeferredValue instead. UseDeferredValue with the search, and that's going to get us our deferred search value. This is going to allow React to branch and render our component in two instances,

[00:38] and our isPending now comes from whether isPending. Oh, come on. Well, okay, I guess we can just put it right in there. That's what the AI wants us to do. Okay, AI, I'll listen to you. We have our deferred search, so if this is the render where they're different, then we'll be pending,

[00:57] and if this is the render where they're the same, when deferred has caught up to the search, then we're no longer pending. We're going to use the deferred search as our mechanism for the search results. This is the thing that we want to have.

[01:14] Here we go. That's what we want to have for the pending state. We're going to provide the previous value or the value that's falling behind so that we can still show the old UI in the search results. Then React will also have a version of deferred search,

[01:34] which is equal to the latest version of deferred search. We'll pass the latest version to search results. In that case, that will suspend. React will be like, okay, cool. I'll show the UI that has the old version of deferred search until the new version of deferred search is ready to render. It's no longer suspending.

[01:53] The other thing we'll need to do is remove that start transition and that will get us in a good state here. Now, we'll pull up our DevTools, we'll set it to fast 3G, and I'm going to search for the medical ship. There it is. Sweet. We can get a very responsive UI and still

[02:10] get our pending UI all in place the way that we want it to be. This is because React is able to just say, okay, let's render it with them being the same. Let's also render it with the deferred being the previous value, so it's a step back from the current latest value.

[02:29] That way, we can render what we used to render, what was working before, and we'll try to render the new thing. If that suspends, we'll just wait for that. We'll keep this old thing around. Then once that thing is done, then we can bring them both together. That allows us to have our search up-to-date constantly

[02:46] and our deferred search be used for rendering our search results. That way, our UI can be totally responsive, but we still can manage the suspending for our search results.

[00:00] Currently, everything is working with a start transition. When I make a change to the value, we're doing set value inside of a transition. That way, when this suspends, we can give it some pending UI. If I type in the letter I, then well, if it took longer, then we would see that suspending UI.

[00:18] Let's make this take a little bit longer, and then we'll type in N, and now we're going to see that pending UI. We're getting is pending from the transition. The problem is that as we type, every character we type is not showing up in that input.

[00:36] And that's because when we set the value, that doesn't update the state immediately. Remember, we're pending, and so the suspense boundary is going, or the transition is going to prevent any UI updates from happening until suspense is finished, and that includes our input value.

[00:54] So your job is to switch to use deferred value for this so that we can update the value instantly, but also handle the suspense scenario and get the pending situation so we can render a pending UI when the user is interacting with this search filter.

[01:13] All right, that should be enough for you. Good luck.

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

useDeferredValue

Transcript