Modern React Patterns: Concurrent Rendering & Actions with Aurora Sharff | PodRocket

Anytime you're calling an async function based on some user interaction, you should try a transition and it's probably gonna be easier and it's gonna be better. Hello and welcome to Pod Rocket, a web development podcast brought to you by Log Rocket. I'm Noel, and today we have Aurora Shar, senior Consultant at Kran Consulting. Here to talk about modern react patterns, concurrent rendering actions, and what's next. In this episode, Aurora and I talk about making apps feel more responsive, uh, some common patterns for concurrency, and how this plays in with common frameworks.

So here's our episode with Aurora. , welcome to Po Rocket Aurora. , Before we kind of get. Get into stuff too much here. Can we just kind of talk a little bit about like what, like from a high level, what are some of these like concurrent features that we're talking about and like what, what's the problem we're really addressing here? Is there like a specific UI kinda quirk we see that these are, these are trying to, to help us with? So thank you for having me on the show. This is very exciting. Um, well, there's a bunch of different

concurrent features that a lot of them came out in React 18, but we're now seeing more of them kind of, uh, work together with some of the newer features in 19. So first of all, we have used transition, which lets us mark a set of state updates as a lower priority update, which then all execute at the same time once the transition completes. And then it can be interrupted by high priority updates like inputs and clicks. And it provides a built-in pending state. So this is useful both, both for rendering optimization, uh, from like

React 18 version and also ay calls in 19. what's like an example? I, I think it's easier, especially when people don't, don't have a visual to have like something concrete right away. Because I guess in my head, like I am, you know, I'm, I was just looking at the docs and looking at examples, but when I, when I hear about these things, I'm always like, my impulse is always like, well. I don't, I don't know if I, I typically feel this, 'cause like if I'm using a, I don't know, like a, a text input with a search box. I've, I'm already, I've already got like some ace like there's an async thing that happens there.

But like what? I'm waiting for the results to come back anyway. I'm usually not blocking input. Like when, when does this actually become a problem? So we have like two kind of versions of this. You have the rendering optimization version, which is just, okay, let's say you have some, uh, slow components or a bunch of slow components that is actually blocking your rendering. You can mark the state update, uh, going to trigger this, uh, slow component, uh, becoming visible as a transition, which means, uh, it's lower priority and you won't block the page when this is

happening, and you can get away from that. And see, for example, let's say you have a tab. Uh, the tab has this expensive component. It's slow. It's, uh, gonna block your clicks around in the tab. If it's a transition, that means that, uh, we don't have that blocking, and we can see while it's pending, that it's pending. I'm zooming out maybe a little more than you, you probably do kind of in ahead. typically, but like, is there, are there tools you find helpful to kind of figure out which of these components are actually blocking?

Like when you step into a cider, when you're working on one? I think at least now with like the compiler and everything, you don't really encounter this, Hey, I should. I, maybe I should optimize this. It's more like a, this is actually not working, I need to fix it. So luckily, we're in the state where we don't need to look for things to optimize, whether, uh, rather just fix them when, uh, when they occur. Uh, so that's like the one part of it. But, uh, with React 19, we also have the async transitions, which is there's just more useful for, uh, tracking the state

of some sort of, uh, async function. Gotcha. Gotcha. What does that, um, what does that look like? Have you found kind of coming, like starting to use, use transition to be, to feel, um, pretty intuitive or have, have you found that it kind of like, kind of opens up your workflow at all? For sure. Definitely tracking, uh, an as in call, just like you are used to doing. Uh, set loading, uh, through do the Await or, um. Call a function, set it to false,