useTransition

[00:00:00]
>> Okay, transition, where we are. We want to say that if I click Submit, it shows them like a little loading spinner where the submit button is and it doesn't allow them to click it multiple times because that makes sense, right? We can use a transition to handle that.

[00:00:14]
This is more useful than deferred value. I can actually see some of us having use cases where useTransition can be fine. The nice thing about useTransition is that it can show you an intermediary state, and then if it needs to be interrupted, it's also interruptible. So it's both low priority and helps us show a good loading state in these intermediary periods, all A plus to me.

[00:00:39]
So what we're gonna do here is we're gonna say, in SearchParams.jsx, we're gonna load a useTransition. Okay, down in our form submit, so down here, I think I forgot to put this in here. Okay, so, here we're gonna say const [] = useTransition(), and I gotta remember the exact call signature here, cuz I forgot to put it in my notes.

[00:01:23]
So you're gonna have isPending as a Boolean that it gives back to you, and then the second function is startTransition. Pretty sure I'm getting this right. And then it doesn't take anything in there as well. Okay, on my form transition here, or my form function here, what I wanna do is right after here, I'm gonna put call this function called startTransition.

[00:01:59]
This takes in a function where I can say SetRequestParameters(object), so I can actually just move this inside of here, rather. What you're doing is you're identifying to React like, I'm gonna call setState in here, some sort of setState for my hooks. Whatever happens inside of here, low priority stuff can be interrupted, that's fine with me, okay?

[00:02:23]
So that's step one. Step two is we're gonna go down to our button, And we're just going to say, hey, if this is pending, Then show me my loading pane. So I'm gonna say div className = "mini loading-pane". h2 className = "loader". And let's put a spinning poodle in here, just for funsies.

[00:03:04]
If it's not loading, then just show me my button, right? So I'm going to move my Submit button into here. Okay, so to show you the desired effect here, I have cat here, and then if I hit Submit, notice when I click Submit, it's gonna spin a poodle for just a second.

[00:03:27]
Didn't even do that for me. So we're identifying that setting the requestParams as the object is the lowest priority transition. That actually requires almost no re-rendering, right? That actually literally requires no re-rendering. So if this is always coming back as not being deferred, yep. So the part that we would have to defer then, we would probably be deferring the pets rather than doing it this way, right?

[00:03:56]
Because that's actually the expensive part of the re-rendering. This in and of itself requires no UI re-rendering. Yep, that makes sense. So this in and of itself, just setting the object here, that is not necessarily the best way to do it. Better way of doing it for my data, going back to this, yeah, we have to interact more with React Query to get the best way that we would want to, right, to show that intermediary state.

[00:04:34]
Yep, Okay, In any case, it would have been hard to proceed anyways. So I have a good note here though. Some of you might be wondering, when do I use useDeferredValue versus when do I use useTransition? So a good way to keep them kinda straight is for useTransition, it's to say, I have something new that I'm about to give you, but it's low priority, so feel free to do this at your own speed.

[00:05:06]
Whereas useDeferredValue, it's more after the fact, is like, hey, I just got something that's going to be new, so please re-render this thing that I already have at your leisure, right? So useTransition, you know you're about to go into something that's heavy. With useDeferredValue, it's like, I got something heavy, please do this at your leisure, right?

[00:05:29]
So the key there is startTransition with useTransition, right? That you're identifying to React, this is something new and heavy, please do this at your leisure.