Understanding the useTransition API

[00:00:00]
>> Brian Holt: So we are gonna use transition. Luckily, the code is actually only mildly more complex, but actually not really. It's a pretty chill API to use, and I judge all of my APIs on chillness. Okay, so we are gonna go to apps.JSX. We're gonna bring in one more hook up here called this lovely useTransition.

[00:00:27]
And rather than have this state that's tracking is pending, we're gonna say use transition here. This doesn't need anything. And then rather being set is pending, it's called start transition.
>> Brian Holt: So essentially what start transition does is it's like, okay, you're gonna give me a function. Whenever this function completes, my transition is finished.

[00:00:58]
So it'll start when you call it. And it'll end whenever it ends. Okay, so in our get new score here, rather than say set is pending here, we're just gonna delete that, and we set the set is pending down there as well. And then we're just gonna wrap all of this in a transition.

[00:01:17]
So we're gonna say, startTransition, we're gonna give that a function which is async,okay? And then inside of there, we're gonna say const newScore = Await getScore like that. And then We could, in theory, just do this, call it good, and I would say in this UI, because newScore is actually so small, this would never be a problem.

[00:01:53]
There technically is the smallest of race conditions here, what happens if this setting score causes React to have a huge re-render underneath it, and then you have, like, another API call return during this huge re-render. In theory, that window exists now this is so small, and this, this UI is so small, this would never happen, but you can actually get away from that totally and just say, startTransition again.

[00:02:24]
>> Brian Holt: And now there's no race condition. So you can nest transitions all the way down. You're basically saying this is about to happen, this could take time. Please wait until this completes. So this is actually what exists in the React docks. Again, this is kinda up to you.

[00:02:45]
If this was really the app that I was shipping, and it was this small, I probably wouldn't 'cause it's unnecessary. I don't know, force a habit. I might do it anyway, but that's kinda up to you. But that's why you see that in the React docs. Yeah, this one took me a while.

[00:03:00]
When I read that for the first time in the React docs, when I was reading about transition, I was like, Why did they nest this twice? This makes no sense to me. And then once you realize, actually especially with like, high priority and low priority re-renders, it can actually take, I don't know, tens of milliseconds.

[00:03:18]
And in theory, you can run into a problem there, but here we're probably two milliseconds right where it's the chances are just nil. Let's go look, first of all. I didn't put this in my notes, but you do need to drop the disabled, cuz now we can be able to change it.

[00:03:35]
So on line 29 here, delete that.
>> Brian Holt: Okay, so now this is responsive, right? And I can change it a bunch of times and no matter what, it's still gonna end up on the right game, eventually. So we know game one is the 404s versus the 500s, right?

[00:03:59]
So I can change this a bunch of times and then I wanna end up on Game 1. These API requests are all completing in the background, right? It's not dropping them. That's just how these things work, right? But it's ignoring all of these state changes until it gets the final one that the user changes because of transitions.

[00:04:22]
Pretty cool, right? So we kinda sidestep this entire problem. And our code really didn't get a lot more complicated. In some ways, the transition syntax here is actually kinda nice cuz you identify, here's a busy part of my code, and I know that this takes a while, so I'm deferring some of this stuff to lower priority renders.

[00:04:45]
Does it make sense?
>> Speaker 2: Yeah, would best practice be to add some sort of cancellation to the requests that we don't need to complete. Theoretically, a user could just arrow up and down a bunch of times and quickly fire off a bunch of requests.
>> Brian Holt: I'm trying to envision how I would try and do that.

[00:05:10]
>> Speaker 3: Isn't there an abort controller that you can use?
>> Brian Holt: There is. To what end, right? You're already ignoring the request. The point of the abort control is that you don't call the the follow up like callbacks, right? And in this case, you're kinda just ignoring them implicitly, right?

[00:05:26]
I suppose if you were doing a ton of processes afterwards-
>> Speaker 2: Long-running task or hitting a database,
>> Speaker 3: kinda debalance the calls then and cancel the debalance. Because in this scenario, once you hit the button, you sent the request. If you waited for 100 milliseconds to send the request, you would stop the quick arrow button from sending it.

[00:05:48]
>> Brian Holt: I could see this being helpful. What you're talking about. I could see that being helpful. It's like, if I had, right here, a ton of code here. That was busy, right? And I'm trying to prevent [INAUDIBLE] that kinda stuff. Or maybe, honestly, I don't even know that these functions get run, to be honest with you.

[00:06:14]
Honestly, let's try.
>> Brian Holt: To succinctly answer your question, I've never had to.
>> Brian Holt: So if I let's just open our console here, and whenever it loads, it says hello, right? Let's just make it so it adds like date.now or something like that.
>> Brian Holt: Okay, so it should say hello and it should say date.now.

[00:06:48]
And I'm just gonna change this a bunch of times.
>> Brian Holt: So it is getting run, you can see there, these are all being run, but it's just ignoring all of them. So I could see doing something like there as like, hey, are you still in flight doing something else?

[00:07:07]
Don't do this like post-processing of the data, today I learned.
>> Brian Holt: What's the best way to do that? I could you just like, look, let's look at the is pending.
>> Brian Holt: So, it's pending here. Probably still true. No, it's false, okay.
>> Brian Holt: So these are still true, and then this comes out.

[00:07:50]
The other end is true. Okay, so that's actually not a reliable way either. I don't know, I'd have to think about this. I haven't really thought. Maybe just use state right to keep track of, like is something in flight? Yeah, it's good question. Normally, this is enough, though.

[00:08:08]
You probably just try and keep this stuff out of the out of the transition path right, and then just kinda have that all happen, maybe during your renders, right?