Transitions Overview

[00:00:00]
>> Steve Kinney: So from like promises made in the beginning, right, you know, we talked about the tiny, non-glamorous kind of just going with the like React way, ways of optimizing things like pushing that state down, right, making sure you don't re-render when you don't have to, ways that you can choose to kind of like make the statements, you know, kind of newish ways to have those made for you. There were kind of 2.5 other promises that we made in the very beginning.

[00:00:40]
Right, and we talked about like the things that are built on top of like React Fiber that again, are there in place and are stable, right? But because, you know, some of them have shown up either kind of, you know, later in React's lifetime, or are, you know, still like somewhat like on the more advanced-ish side, even though they're easy to implement once you kind of wrap your head around them, which is why we did the conceptual talk in the beginning, that they're interesting because would you like stuff like pushing state down, memoizing.

[00:01:19]
Stuff you might use almost every day, right? That's that kind of like if we go back in the slides, and remember the one where it's like all the little blockers, that's like the little blockers. These kind of this next set of things is like, you know you have this problem because it's obvious, right? And you don't have it every day. It is that like the big Snorlax sitting on the pipe. There is like one place where this is driving everyone nuts.

[00:01:53]
It is like one of those ones where you might not reach for some of these tools every single day. You might reach for them once every 6 months. Once a year if you're lucky, right, you don't want to have to reach for any of these things if you don't have to. But when you need them, knowing that they exist, and even if all you do right now is build a conceptual framework for being able to identify the problem where this is the solution.

[00:02:19]
Remember the context and then know that you can find the notes or like watch this again to get the, it's like, that would be a mission accomplished banner for me, personally. So let's talk about this. We will review some things that we talked about very early on, which is, again, not doing stuff faster than doing stuff. Done that one to death at this point. The other one was separating the urgent from the non-urgent.

[00:02:44]
And if you remember in the very beginning, I said, by default, because in the early days, everything was of the same level. By default, everything is mostly the same level. There's some times where we use heuristic, but like it's a decent enough analogy. However, you can begin to denote things, you know, in their relationship of how urgent they are. Like, you can't necessarily call something particularly urgent, but you can insofar that if everything was equally as urgent, then nothing is by denoting the stuff that is less urgent, you paradoxically denote what is urgent, right, because most things that a user does are urgent, right?

[00:03:28]
If a user does a thing, they would like to see the outcome of their thing, right? And so by saying that the stuff that is, that can wait a second, again, we don't want to wait to see necessarily like a video like buffer per se, right? Or like to see the article we went to go click on, but we are willing to sometimes wait for like Gmail to load and stuff along those lines. There are certain things on a UX level.

[00:03:52]
And so we talked about transitions, this a way to say that like a transition is basically to say this thing is not urgent, right? And so originally you had only the first. Everything is urgent, everything's the same. Now we are saying with that React Fiber prioritization, those lanes, that like, hey, some things can go in a lower priority lane, right? Again, the example, like, and honestly, I have like 3 or 4 different, we're only going to do one together, the other 2 exist kind of for you to plan of play around with and see.

[00:04:33]
They are effectively variations on a theme. Is to say like, making the users like input and reflecting that back to them, very high priority, right? If like the whole UI starts lagging and freezing up, and they can't do and all the animation stop and they like hover events don't happen, like that is infuriating, right? The, you can't make expensive things go faster. You can a little bit, but some things just take a little bit of time.

[00:05:03]
And so, yes, make them as fast as you can, but there's going to be a point where it is slow for reasons. Some of those reasons, you know, we could argue, well, if we just did that on the server. Yeah, I've, good luck. If sometimes you can do that stuff, sometimes it's like item number 53 on that team's list that they definitely want to get to. When they have time, right, and they will say, yes, we think it's important to, we just need to get it prioritized and we'll live there forever.

[00:05:33]
So like, and some things are just going to be slow-ish. And so what we're going to do is make our app feel responsive, and be responsive, and then also be able to walk and chew gum at the same time. So, but we say that it's like we say some things can wait and do the urgent stuff first. So really, this takes the form of two hooks, right? So we'll talk about these hooks, we're going to talk a little bit about optimistic updates and some suspense stuff, and that's really the like narrative in its whole, where we have start transition and use deferred value.

[00:06:10]
The best somewhat flawed but decent metaphor that I can give you is you know how use memo gives you back a value and use callback gives you back a function. Not totally wrong here, not totally right either, but good enough for like an anchor to put your brain onto. You start transition, and use transition, give you the ability to say like, this thing that we're going to do is low priority and you pass it a function and navigate through that.

[00:06:42]
Use deferred value is saying, hey, the changing of this value is going to trigger something really expensive. Right? So I want to like have like the value so I can show it in the input field of the UI and we'll have this deferred value that that can trigger off a bunch of stuff later. We're like, what? Like we'll see it in action in a second. You almost always want use transition if you control the code.

[00:07:11]
That's like playing with these things. If you do not control the code, then you're going to use use deferred, right? So like, again, flawed but useful heuristic is reach for use transition first. Right. And if that's not fitting the bill because of some kind of constraints where you only have the value, and we'll see both of them in a second, you get a feel for it, then use deferred is like something where you don't have total control of the situation as well.