useDeferredValue Hook

[00:00:00]
>> Steve Kinney: But we know from people who have used the internet before, that's not the only thing that can be slow. The server and the communication to the server, right? The server can be slow because maybe it's backed up, it's under load, or honestly, more likely, they're on the New York City subway, right, and they have intermittent internet and stuff along those lines. And there are all sorts of things that we can do in an application where we can be somewhat optimistic.

[00:00:39]
Right, I don't know if it's true these days for reasons that may become obvious as I start talking, hilariously, like when I was trying to break my social media addiction, I was like, you know what I'm going to do? I'm going to take the native apps off my phone. I'm going to use the Twitter web app and the Instagram web app. And life was good because those apps were terrible. And then like five years ago or something like that, like Twitter, like web Twitter mobile came out or whatever, and it uses a lot of these features and a lot of these, and it was good, right?

[00:01:18]
And then like that doesn't help me not want to use Twitter because now it's good. It takes other things to make me not want to use Twitter. But like a lot of the patterns of, and like by optimizing performance, I think they saw that there were like 25 to 50% more tweets and engagements on like Twitter web mobile by using all of these patterns. But one of the patterns was that like, even if you were like, had no internet and you like submitted a tweet, it like went in and it showed up on your timeline.

[00:01:52]
You had no internet. And then there was a service worker and some optimistic updates, and like it went through. And then if for some reason it didn't go through, you'd get a notification and it would, you know, but like, there is that kind of illusion and a lot of progressive web apps do this pattern of optimistic updates, right? There's a lot of things that are more than likely going to succeed, right?

[00:02:18]
And rather than be like, oh, well, we're waiting, we don't know, we're going to show you a loading indicator, oh, you're off like. It's probably going to work, right? And it's like some things like, for instance, I'm building like an AI chat right now, right? And there's a certain amount of latency if you just like hit enter between it going, you know, the agent picking it up, so on and so forth. But really when I hit enter, I just want to see it in the chat window.

[00:02:46]
I'm willing to wait a second for the agent to respond that we've all used ChatGPT, we've all used Claude. We know that it takes a second or two to respond. But like, I would like to see that mine went in first and foremost, right? But then like the return value is going to have my thing. So anyway, optimistic updates allow us to assume the thing has worked out. And then if the promise rejects or we get a 429 or what have you, we'll unwind it and tell them that that's the case, right?

[00:03:17]
And could you always do optimistic updates? Obviously, Twitter web is like five years old, and it's older than React 18, much less 19, right? Have we all played the dance with like error states and loading states and putting in the DOM, and then we get the 429 and we have to go find it in that array and remove it, all that stuff. Turns out there is a new hook in React 19 called useOptimistic. You take a lucky guess what that does.

[00:03:45]
And it basically handles all this stuff for us. And I'm going to kind of say the second one now because they are related, because I said it earlier, with a lot of the stuff with promises we saw before that. We do everything in the DOM, we render, do the render phase, we do the commit phase, and then we call the useEffects, right? When you use Suspense instead, what happens is Fiber's working its way through the tree.

[00:04:12]
It goes, oh, there's a promise that hasn't resolved. I'm going to pause and wait here, right? I'm going to show the like Suspense loading component. Oh, that promise has resolved, let me pick up and continue down that part of the tree. So we're not finished, like, it'll still paint to the DOM and all that kind of stuff, but it knows that entire body of work is waiting for it, right? And then when it comes online, it's able to do that.

[00:04:36]
These are all flavors of the same thing, because like, when we send that request and optimistically update the DOM, that's a promise we're waiting to resolve. Ideally, it resolves back with a 201, a 200, depending on what it was. Everything's great, we replace it with the real value, we move on with our life. Could you do this all by hand? Yes. May I show you how easy it is to not do it by hand?