Optimizing Performance with useDeferredValue

[00:00:00]
>> Brian Holt: Again, this is largely coming from the expensive render function. If you turn that off, this actually works really well, but I'm sure you can imagine, like, just that, even on this, really fast MacBook, it's just like that slider is just like, not moving, super great. This would cause a lot of jank in other parts of.

[00:00:19]
For a UI, imagine if you had a video playing on another part of it, you would definitely see some jank on that as well. But notice that the actual value and the deferred value are the same thing. That's because they're literally the same thing at the moment. So let's go and actually fix this now with use deferred value.

[00:00:40]
So let's go look at my notes really quick. Yeah, I mentioned this before. In the past, you would have had to use like, throttle or debounce to essentially just delay in this until you actually were happy at the value that settled that great article on what this is on CSS tricks.

[00:01:00]
If you want to get really into the depth of what that is. I refer to it probably at least a yearly, like the annual, Brian needs to use throttle and bounce, and can't remember which one it's a holiday. But we're gonna use use deferred value, which actually makes this way easier to deal with.

[00:01:20]
Okay, so we're gonna usedeferredvalue here to basically say like these are like low priority renderings. When you finish everything and you like that's high priority. So I guess that bears mentioning everything by default in react is a high priority render and you can only mark things as low priority.

[00:01:39]
When you do useDeferredValue, use optimistic transitions, all those things you're basically saying I am explicitly marking this as less important than other things that you're rendering. So that's what we're gonna do right now. We are gonna go use deferred value to do just that. So used the deferred value.

[00:02:05]
>> Brian Holt: Okay, and then underneath here we're gonna say const, deferred blur equals use deferred value. Blur, not blue, a blur. And then we're just going to have a bunch of these, I mean, I guess you can again come in here and say, I don't need sonnet with thinking.

[00:02:32]
I think I just need sonnet, give me a deferred value for each of my hooks
>> Brian Holt: Pretty good, right? Feel like I missed one. No that's correct, because I already did one of them. Deferred brightness, deferred contrast, divert saturated sepia, brightness, contrast, saturates, saturate sepia, okay? And then all of these, we just got to replace with this.

[00:03:15]
>> Brian Holt: Okay, for contrast, saturate, sepia, those kind of things.
>> Brian Holt: Okay, I mean, everything else essentially stays the same. The only thing that's gonna be different here is now we're gonna have like just so you can see the difference here. Deferred brightness, deferred contrast, deferred saturate and deferred sepia.

[00:03:55]
>> Brian Holt: But now if we go look at our app over here. You can see that we still got the jank on the slider. That's somewhat intended, but you can see that we have these delays essentially. And we can actually make this much better if we go in and say memo on here, right, import memo from React.

[00:04:27]
Cause again, this is still changing, which is still causing the re-render of display image. So we need to be explicitly say, don't change this unless this is changed, which is if. Because we're using deferred values here in our filter style, this isn't gonna change until one of the values changes.

[00:04:46]
>> Brian Holt: Okay, so here we're gonna say memo.
>> Brian Holt: And now, if we come back over here. This is gonna look way better, I notice that it's not updating every single time. Look at that last render, it only does it when it finally stops updating and you kind of get the lose some of the nice effect of it updating in real time.

[00:05:17]
But I think that's verbal to jink. Because again, if we got rid of jink and we just made this one, much more pleasant experience that way, right? But you can see there's even a little bit of updating and delay there.
>> Brian Holt: Yeah, that is a used deferred value.

[00:05:41]
So it allows you to basically lag those kind of things until the react compiler can catch up so that you cause less jank in your UI. But you can see I had to use this in concert with memo or else it was still pointless because it was still updating at the parent level.

[00:05:57]
Yeah, and again, this is memoized. If we look at app.jsx, this will be the same between renders, so therefore the memoization will work correctly because this will only be using the deferred values. Yep, so anytime you have these heavy computations and you're really trying to avoid re-rendering them, but the values could update frequently.

[00:06:19]
That kind of problem space is where the deferred values end up being super helpful.
>> Brian Holt: Yeah, and like I mentioned previously, what's nice about this is like on a fast computer, this will update a lot. If you're on a very slow computer, it'll update less frequently, we don't have to write any logic to accommodate that.

[00:06:43]
React just kind of takes care of it for us. That's really the what's special about use deferred value.