00:00 There are some transitions that are triggered by user interaction and you want those user interactions, the state updates relative to those user interactions, to take place right away. These aren't really optimistic things, so you can't use use optimistic.

00:14 These are things that basically we want to have the part of the UI that's being updated based on the user interaction, but then the part of the UI that is being loaded as a result of that user interaction. To be specific, here we have our ships right here, and if I'm trying to type into here,

00:34 I want the value that's updated in this input as I'm typing to be updated immediately so that the characters I'm typing are updating. But if I do this inside of a start transition because I want to transition for this list

00:48 of matching ships, then that value that's in this input won't show up. This is not a good thing, of course. On top of that, we want to make sure that we can have some pending states, so we do want to have a transition or something.

01:05 I want to be able to get the current pending state so I can display something useful. Of course, this is suspending, and so I'm going to have a suspense boundary around this, but I don't want to display this initial loading screen. You'll see as I refresh the page, I don't want to display that.

01:21 I want to display the old stuff, maybe have some opacity while it's loading the new stuff, something like that. So we have kind of a mix of use cases here, and that's where use deferred value comes into play. So use deferred value comes from React.

01:36 You pass it a value, and that value can come from props or from state or something, wherever it comes from. You're going to get a deferred value, and then you can determine whether it's pending based on whether the deferred value is equal to the current value.

01:51 So what's interesting about use deferred value is it makes your React components kind of take a branch or the rendering of your components branch. So React will render twice, render your components twice, once with the deferred value being

02:05 equal to the current value and once with it being like the old or the previous value. And if the one that's equal isn't ready yet because it's suspending or something, then React will show the one that has the previous value.

02:21 And this allows you to show a pending state and to also update stuff in real time for the user. So you can use the value itself as part of what your input is, but then the deferred value can be what is used for filtering the lists and fetching the matching ships on your

02:40 list here. It is a little bit of a mind bend to decide, okay, do I need to use transition and start transition or use deferred value or do I use optimistic? But the more that you use it, the more intuition you gain around these APIs. So let's go ahead and start with using use deferred value to solve the problems that

03:00 we have in our filtered list here.