Coming in React18: startTransition

♪ Hey there, I'm Kathy Grayson-Manns. I'm a developer advocate for Progress Software. We only have just a little bit of time today with this lightning talk, so let's go ahead and jump right into what I think is gonna be one of the coolest parts of the upcoming React 18 release, Start Transition.

In a nutshell, Start Transition is a new API in React 18 that's going to allow us to keep our applications interactive and responsive even while big updates are happening behind the scenes. Previously, if a user was to initiate an action that would trigger a component update, like a search that fetches a ton of new data to display, the whole page would just kind of hang while all that loading stuff was happening in the background. This, as you can imagine, felt kind of awkward to users, so as developers, we've always been forced to find other ways around it, stuff like Skeleton UIs that made loads feel faster or debouncing or set timeouts.

In React, all updates are rendered equally urgently, or at least, that was the case, up until React 18 and concurrency rendering. This meant that before, there was no way to differentiate between updates that were truly urgent, you need to update everything right away, and updates that are less urgent, like those search results, which really shouldn't prevent the user from continuing to do other work on the page while the system handles that in the background. In order to fully understand set transition, we should start by looking at a couple foundational concepts, the new concurrency rendering approach in React 18, and how React is defining a transition. Let's jump into transitions.

This wording can feel a little confusing at first, since up until this point, the word transition has primarily been used for animations, like CSS transitions. And to be fair, that does seem to be part of what they had in mind when naming this concept, at least according to this tweet from Dan. In fact, it looks like there's some really good animation related stuff that's coming our way, but just not here quite yet. They're getting all the pieces in place before tackling a big project, and I can definitely respect that. For now though, a basic definition of transition is just a less urgent action that we want to tell React to move to the back burner. Next is concurrency.

This is a word that you're probably already hearing quite a bit, and if you're not, then get ready because concurrent rendering is a huge part of React 18. At a high level, concurrency basically means the tasks can overlap. Rather than one state update having to fully complete before the system can move on to the next one, concurrency allows us to bounce back and forth between multiples. It should be noted that this does not mean that all those things are happening at the exact same time. Rather, it's the one task can now be paused while other more urgent tasks are seen to. Then, when the urgent tasks are done, we jump back to that less urgent task and bring with us all the updated information from the more urgent ones. What React 18 is offering us that is so cool is the ability to kind of manipulate that timeline. When we use the StartTransition API, what we're doing is marking our less urgent actions as transitions, which then tells React to let other more urgent actions take priority in the rendering timeline. This is going to be an amazing update from a UX standpoint. It's gonna make things feel super snappy and super responsive for the user as well as reducing the work that we were putting in to minimize that pain point. By wrapping those slower and less urgent updates in StartTransition, we can basically tell React that it's fine to just get to those when it's not busy with something more important. This means that transitions can be interrupted by more pressing updates. React will just throw out the unfinished, outdated rendering work and jump right into the new stuff. That also means that we won't ever be in a situation where we're losing time to a component that's rendering outdated and inaccurate data, or even worse, when a user is actually showing that information that's not correct.

So how's this gonna look in your code? Frankly, it's incredibly easy. Wherever you were calling that not-so-urgent function before, you now just literally wrap it in startTransition, like so. And since your whole page will no longer be locked up, waiting on those long processes to complete, your user might not even realize that anything is still loading.

For this reason, it's also recommended that you use the isPending value that will be shipping with React 18 as part of the useTransition hook. This hook returns the startTransition function as well as an isPending value, which will automatically be set to true while your transition is rendering. That way, you just do a quick check of isPending to determine whether or not you need to adjust your UI to reflect the fact that the update isn't quite ready yet. You can do that for things like disabling a button in this example here.

The other really lovely thing about setTransition, and actually all of the React 18 release, is that it's not a breaking change. Because setting these transitions is an opt-in action, meaning you have to go out of your way to declare an action as a transition, nothing happens automatically. Your existing code won't be affected by this change. React 18 will still handle all updates as urgent by default, which makes all of this completely backwards-compatible. But with the ease of implementation and the wide array of benefits, you'll definitely want to start working to start transition into your projects as soon as possible.

Okay, folks, that is just about all the time I've got. I hope this look into one of the new pieces of React 18 helped you feel more ready and excited for the upcoming release. And if you're looking for other ways to improve your React apps, check out the Kendo React Component Library. It is a beautiful library with over 100 excessively-created components. Kendo is on a mission to help you design and build your React apps faster. You can check that out at tellerick.com/kendo-react-ui. And if you want to ask any questions about Kendo React, or the talk, or just talk about React 18, you can follow me on Twitter, at kathryngrayson, or email me at nansatprogress.com.