Deferred Value Overview

[00:00:00]
>> Steve Kinney: All right, so we've got our use transition set up again. Let's actually talk about this use deferred value. Here we've got a kind of nice setup thing going on. So use, like I said earlier, and didn't listen to myself talking. But like as I said earlier, use deferred values when you don't have full control, right? And so either from a library, from a parent component, something that you don't fully control is going to cause a bunch of chaos.

[00:00:31]
Right? Because at the end of the day, input value or input query and search query were just strings. The nice part with use transition was I was the one setting them, right? So I could say set this one immediately. And also, like, in a transition function that will put on the queue in a low priority thing, what I want to do is set that other thing going. However, sometimes you are on the receiving end of a bomb.

[00:01:00]
Right? And it's like, hey, this value has changed. The changing of that value because you receive it as a prop is going to trigger that like really like problematic query. So here it is coming in. We don't control the props we receive, they are handed to us. Again, if this could be anything from whether you're in like a microfrontend architecture, you're getting it from a library, who knows what. But we say at this point, like, this will come in and this will have the like deferred query, which we will.

[00:01:40]
This will return like the last known good one that we computed. Even if it gets a new one, until it gets a chance to do all of the things, right, and resolve everything based on this. So this will be the old query, which means the memo will stay in place. Until React Fiber says like, all right, what low priority work do I have to do? Oh, I did need to update this and trigger out everything else going on.

[00:02:08]
So it's a way to kind of say like, hey, that thing you're handing me is going to cause a lot of chaos here. I like, I'm going to keep it at the door for a second. Right, with the known good one, and then when we get to doing low priority work, React's like I saved that unit of work, that fiber of work. Like for you to take on now, again. As long as you control the code, the other one, like use transition, I honestly.

[00:02:39]
Almost all the time, right? This one exists for those cases where like you don't have that luxury, which, you know, I like own my codebase, so like I do, and so it is useful when you are on the receiving end, you can say, hey, everything that's going to cascade down from this changing, put as a low priority task, as a transition task. So it's an option for you, again, prefer use transition when you can, this is for when you can't, right, when you receive a thing that will then cascade down to a bunch of other things.

[00:03:20]
But, as you can see for both of these, if you look at this code. Right? If you transition was simply maintaining both the urgent and the non-urgent ones and like handling them on separate tracks, this is even less code. Right? You'll still have the original query, right? You would have had query as what was setting off this memo, and that would have immediately triggered everything. Use deferred query is like, hey, here will be the next value when we take on low priority tasks.

[00:03:51]
Like, then that let that trigger off everything else as well. So like, at this point, it's just a slightly different hook and you're like, you have a middleman, effectively, right? And so for things to solve huge gnarly problems, and yeah, just really sophisticated stuff under the hood, right, the actual like API surface area that gets exposed to us is relatively small. Cool. So, really, we have in the kind of two rules of like not doing stuff as fast as I'm doing stuff, and at least do the important stuff and give me the illusion.

[00:04:33]
That the stuff I care about is happening faster. We only really have like one more class and then two kind of like flavors of that class left, which is everything we have talked about so far. Really involves the client-side app and its rendering flow.