Copy of Aurora Scharff- AUDIO EDIT
===

Noel: [00:00:00] Hello, and welcome to Po Rocket. I'm Noel. And today we have Aurora Scharf Senior Consultant at Crayon Consulting here to talk about modern react patterns,~ um,~ concurrent rendering actions, and what's next?

~Um, ~welcome to Po Rocket Aurora. ~Uh, I am,~ 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?

Aurora: 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 [00:01:00] for rendering optimization,~ uh,~ from like React 18 version and also ay calls in 19.

Noel: ~Gotcha. Gotcha. What, ~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~ 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?

Aurora: 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 [00:02:00] transition, that means that,~ uh,~ we don't have that blocking, and we can see while it's pending, that it's pending.

Noel: ~Gotcha. Gotcha. Is there, are there like, um, maybe this is like, I'm, ~I'm zooming out maybe a little more than you, you probably do kind of in

Aurora: ahead.

Noel: typically, but like, is~ 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?

Aurora: 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.

Noel: ~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?

Aurora: For sure. Definitely tracking,~ uh,~ an as in call, just like you are used to doing. ~Uh, ~[00:03:00] set loading,~ uh,~ through do the Await or, ~um. ~Call a function, set it to false, maybe catch the air, fix some state, depending on what happened. ~You know, ~you have this normal flow and that whole flow is just simplified into a transition.

So for sure, when you start trying this version of using transition, you just simplify a lot of your workflow, and you don't have to do this manual state updates every time you're talking to,~ uh,~ the server.

Noel: ~Yeah. Yeah. Uh, I guess again, for like, ~for people listening at home, especially those that aren't. Writing a lot of react. Maybe they're just like in another framework. ~What does that, ~what does that actually look like? ~We can, ~we can focus on use transition specifically. 'cause I think that's probably the easiest to

Aurora: like the syntax.

Noel: Yeah.

Like~ Like what, like what does it functionally, um, like~ how does it differ from ~like, ~using a loading state ~like you, ~like you, like you explained a second ago.

Aurora: ~Well, um, ~it's a hook. ~Uh, ~it returns a pending flag and it returns a function to start a transition. And then you put whatever set of dates. ~Uh, ~and async calls, you're,~ uh,~ gonna execute inside that transition and then you get the pending state and that's it. And it's gonna be synced to the async call and execute at the end of Async call.

So you have this very smooth,~ uh, well, ~it's interesting [00:04:00] transition, this very smooth transition where there's no like weird flickers or states that update not when the API actually gave you the response. You know, those things.

Noel: ~Yeah. Yep, yep, yep. Is, is there like any, um, let's see. Are, ~are there any kind of common traps that devs fall into or maybe that you fell into in ~kind of making,~ making this transition? 'cause I feel like ~we're so, ~we're so mentally trained into ~this, like,~ using loading state explicitly and managing,~ like, is there, ~is there any kinda like, oh, I don't need to ~do, like,~ do this anymore or aha, moments here ~when, ~when converting to some of these newer

Aurora: Yeah. I think 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.

Noel: ~Is there any, um, this, this is one I think. Like~ a situation that I feel comes up a lot that it's ~kind of, ~it's ~kind of ~difficult to even talk about, but I feel often ~in, ~in React apps we have this kind of flow where like ~we,~ we try to always structure things well, but we end up in ~this, ~this mode where there's ~like, uh, you know, ~an input like seven layers down in some component here, and then ~like ~that needs to go like up four layers and then down three more and ~like ~change something here.

~Is this do, do, ~do you find that ~these. ~Those kinds of ~like, kind of ~gross hierarchies ~are ma ~are harder or [00:05:00] more difficult to manage in this kind of async rendering world where this is put ~on the, ~on the dev to kinda think about a little bit more, but then ~it's, ~it's handled more nicely or do you think that ~it's, ~it's like that plumbing is ~kind of ~the same amount of difficulty either way.

Aurora: I think maybe it depends on how you build your apps and if you're using a framework, a lot of that, or some sort of library that's handling more of that work for you, it would not be that complex. So it definitely depends on what framework or what library you're using to build your apps.

Noel: ~Yeah. Um. ~Can we talk a little bit about that, especially ~kind of in that, ~in that framework case,~ do you,~ is it difficult to transition older apps that are built, like pretty framework dependent, ~like they're pretty built? Is, ~is it difficult to ~kind of ~transition them ~into this, ~into this async world? Like with React 19?

Aurora: ~Um, well. ~You could say that it's a different, I mean, you're building your app one way. Now you have a better, better, arguably better way to build it. And maybe it's not worth refactoring things, but just getting in the right mindset and seeing the alternatives as you keep on building is a good bet.

Noel: ~I see. Yeah. Is there, are there any. Have you, have you found, or~ do you have any experience here, like in ~kind of ~[00:06:00] doing that conversion, like reopening an old project for the first time and being like, oh, some of this stuff should be async. ~I, ~I feel the thing that always happens there is you're like,~ well,~ there's all these patterns here.

~Like, ~I'm introducing new complexity. I don't want, I don't want devs to have to think about two different things. ~How do you, ~how do you make that decision? ~When is it, ~when is it enough to be like, okay. We should probably actually use Async Hooks

Aurora: I thi well,~ I,~ I did actually experience this recently. I was like helping,~ uh,~ another project just to review their best practices. And you definitely see a lot of cases where, ah, you could maybe have done this instead of this, but that doesn't mean you have to go and change it. But just knowing about what patterns in your code base could be done differently, I think that's a realization that makes you easier, see those patterns in the future.

Noel: ~Yeah. Yeah, I agree. Is there, like,~ maybe it'd be, it would be helpful,~ um,~ to talk a little bit about ~like what, what those, um,~ what those patterns are. ~Like. Is there anything in the way. I'm, ~I'm thinking largely in, in terms of ~like ~managing these large projects to make it easier for devs to kinda step in ~and, and, ~and get into this head space of like, oh, ~we have, ~we have use transition, we have use Optimistic.

Now is, are there any kind of like [00:07:00] conventions or anything you recommend to help devs ~like, kind of ~follow that ~and, ~and understand what's going on at a glance when they look at a given component a little bit more easily?

Aurora: ~Well, ~I think with these new features like combining ~the, ~the concurrent ones from 18 and the 19 features,~ they,~ they ~kind of ~explain themselves. So one, once you see,~ um,~ use optimistic,~ you,~ you know what it does. And then combining that with naming conventions that explain the behavior of something ~that will be, ~that will be,~ um,~ gonna tell you how that,~ uh,~ interaction behaves.

Noel: Gotcha. Gotcha. ~What, ~what's like an example of that?~ What's like, what is, uh, what, ~what have you seen works particularly well

as far as naming conventions? Like in a component?

Aurora: yeah. So let's talk about the form,~ uh,~ component. So the React 19 form component,~ uh, they, ~they released this version of the form in 19, which is like. It's like building on top of the HTML form. So the H tml form, the default one is like you have a form action and then route, right? ~Um, ~whereas now it can also,~ uh, um, ~take in a function.

So you have two versions to call something on your form submission. And that's very clear because of the naming and convention. And ~you know, ~an action [00:08:00] is a certain way or a transition functions a certain way, and then your on submit is a different

way.~ ~So that's an example of in practice what that looks like.

And you would. Understand the behavior based on the property.

Noel: ~Yeah. Yeah. Can we talk a little bit about, I think, ~I think it's hard to even discuss this without ~like, ~getting into the specifics of server side rendering a little bit. Did you know where I was going with that question? ~Like, like everyone, I feel like everyone is, is like, we get, ~we get into this mode. ~We have so many, uh,~ there's so many concerns now.

It feels ~like, ~it's like this is also so much more complicated than it was a little bit and ~like. I mean, ~I think there's varying opinions on how well ~the, the team,~ the React team has ~like, ~made this transition or I guess ~like ~the next team a little bit. ~Um, but like, how have you found it? ~Have you found these hooks to be easy to ~kind of, um, ~have ~in, ~in ~uh, ~more like server rendered apps, easy to use and more server rendered apps?

Or is there,~ like,~ back to my prior question, are there like cases where. This can be tricky ~when it's hard ~when you're not explicitly thinking about where the rendering is gonna ~occur.~ Occur for a given component.

Aurora: ~Um, ~so this is more regarding the service side. Of course, we're gonna talk about like next JS and,~ uh,~ frameworks, but at least ~for, ~for example, for Next js, it's built around these features in a way that it just ~kind of ~naturally [00:09:00] becomes the solution that you need. Whereas maybe in a different framework, let's say reactor V seven, they already have different,~ uh,~ or established patterns.

Maybe you're not gonna feel the need ~of, ~of the new patterns as much because you already have alternatives. But next Js really integrates with this whole,~ uh,~ concurrent and,~ um,~ async view because that's the way it's built. ~Right. ~So ~you, ~you, it's already built around,~ uh,~ yeah. Around suspense and such.

Noel: ~Yeah, I guess like, can you not, ~can you not think of any cases where ~any of these,~ even like when just learning due to ~uh, you know, kinda like~ lack of knowledge where these, the new like async hooks~ are, you know, ~maybe do something unexpected or just ~like ~are tricky ~when, ~when dealing with service rendering.

Aurora: When they're tricky when dealing with service-side rendering.

Noel: Yeah. ~Like are there, are there any, ~are there any cases at all that are just like,~ oh yeah, this, this component is like, you know, on the, on the, like,~ oh, this one is actually client side and I'd forgotten about that. And~ I have to like, have,~ I have this concern here where I don't typically have it, or ~the, ~the inverse of like, oh, this is like a server side render, but there's like a, ~you know, uh, ~a child here that's like only able to be rendered in the client.

~Is there, ~is there any weirdness here with ~like. Those, those kinds of, uh,~ like ~the, ~the gap between the two.

Aurora: Yeah. Now we're getting into the whole server component [00:10:00] story, which is like ~a whole, which, ~a whole nother thing, which I'm,~ uh,~ purposely trying to like, keep away from ~my, ~my ~upcoming, ~upcoming talk at Universe, because I know it's difficult and people are like, oh, I don't wanna think about that, that right now.

And that's why I'm like trying to focus more on the client version and usages of this. But definitely there are ~some, ~some things that like, what,~ why,~ why is Oh, okay, because you put it. In this pattern now, you cannot no longer use it in this way. Yeah, but that's, I think that's a lot to go into right now, maybe.

Noel: ~No, that's what, yeah, like I, I think that those, those like, yeah, it's like, it can be, ~it can be so tough ~to, ~to balance that. And like the set of concerns is slightly different, right? ~Because like, you're, you're flipping the whole, like the, the, the, the,~ the problem with asynchronicity is kinda like pushed into a different 

Aurora: yeah,~ ~

Noel: ~when you're, ~when you're in that world.

~Um, but~

Aurora: ~very different.~

Noel: ~Yeah, I'm,~ I'm optimistic that ~it'll, like, it'll, they'll,~ it'll be fine, but I think ~it's, uh, it is,~ it's tricky right now, especially when we're already in this state of ~like, ~having to ~kind of ~balance mentally,~ like,~ what's going on there. ~Um, ~but like,

Aurora: a learning curve. Yeah,

Noel: yeah. Yeah. ~I guess, but like, to, to kind of, ~to pull us back a little bit.

~You, um, you mentioned that there's like, uh, in, in, in the. ~In your talk, you said that ~there, that the,~ some of the inspiration were from some like good examples you've seen online. ~Is there, ~is there anything you'd point devs to, to look at, to ~kind of just like get good, like ~have a good baseline of how some of these new async ~uh, ~folks can work?

Aurora: ~Well, ~what I've [00:11:00] noticed,~ uh,~ reading a lot of documentation is ~the, ~the react documentation. Now,~ uh,~ even the. The ones for rendering optimization, like use transition, use different value are largely focused on the,~ um,~ async and the data fetching,

~uh,~ approach where you would suspend something and then handle a specific behavior.

So I think just reading the documentation and they have these really good code sandboxes, right? So if you haven't been exploring the docs much, maybe you haven't really dug into them, but for every sort of concept there's a code sandbox. And then what you can do is you can read it, but even better just click fork and then try it and you will see that there's more implementation details that maybe weren't so clear to you just by seeing ~the, ~the example itself where when you open it and you get to see the whole code, you can really play with it and maybe get some inspiration for your own projects and then for sure applying that.

Maybe you having ~like ~a case in your head, ah, maybe I could use it here, this exact,~ uh,~ component and then trying it. ~That's, ~that's a great way to learn, I think.

Noel: ~Yeah. Yeah. I, I agree. It's easy,~ it's easier to ~like ~break stuff. [00:12:00] You can introduce like artificial,~ uh,~ delays and all that stuff that a little bit

Aurora: Lots.

Noel: ~Yeah. Yeah, because I feel like, I feel like that was kind, it's kind of, that can,~ it can ~kind of ~be tough, especially if you're ~trying, ~trying to be proactive about it.

Like you'd said earlier, we notice this is a problem, like when it's happening,

Aurora: Yeah. ~Yeah, ~yeah. Yeah.

Noel: there's always the impulse. It's like, well, yeah, but I'm like sitting here on ~some nice, you know. ~A new brand new $1,100 MacBook or something. ~Like, ~I feel like a lot of this is happening when a user's on a cell phone going through ~a, you know, ~a tunnel in a car or something, ~and it's like, ~this is when I really care about the app, not,~ uh,~ becoming a stuttery mess.

~Um, ~so ~I think, ~I think it can be easier to see that kind of stuff. There.~ Is there, um, is there, like, are, ~are there specific, ~um. ~Approaches here ~to use these, um,~ to use the new hooks and ~like ~get them into the correct kind of place in the component hierarchy. Going back to my prior question of ~like having, um, like trying, ~trying to keep track of which pieces of your app are slow,~ like, have you found that there to be good?~

When trying to be more proactive ~like this, is there, ~is there a good kind of level of zoom here that you find~ to put, like where, ~where to put like a use optimistic call? ~Like do, ~do you typically err on the side of having it higher up or like very low near where the slow piece of a given,~ uh,~ component tree might be?

Aurora: So this is a [00:13:00] great question, and I think there's been some,~ uh,~ maybe some confusion about this. So the way I think about it is all of these are. Something you typically do locally in a

Noel: ~Hmm. ~

Aurora: and it's for that component. And if you're doing something bigger, maybe,~ uh, like ~let's say you're doing this,~ um, uh, ~crud or something and you want it optimistic.

Maybe you're actually not doing use Optimistic, you're using React Query, something like that. So it's really good for these local components that have some sort of very, ~you know, ~simple concern in the component itself that you can now solve. Combining,~ uh,~ transitions with use. Optimistic. Let's say you have ~like, um, ~I did this example,~ like, uh, ~you have a save to,~ uh, like ~save product to favorites, ~you know, ~on some sort of shopping website.

It's just a simple, very small button, but just having a quick interaction there and then afterwards firing the actual update. ~It's just, ~it's just like one light of code. It's. Concerned for the component, only those cases, or like a favorite, if you have ~like ~a simple click that just needs to feel interactive.

Noel: ~Yeah. Gotcha, gotcha. Are there, are there,~ are those cases ever [00:14:00] particularly problematic? 'cause~ 'cause 'cause I feel like, ~I feel like historically the impulse is always just ~like if, if, ~if you're in the use, optimistic, then you just like.~ like. Make a, you~ make ~a, ~a call, like a web call and you ~just like, ~don't await it and you're like, it'll be fine.

Like this, this'll probably work. ~That's like, ~I'm gonna fire this off ~and, ~and assume everything's okay. ~Um, ~but ~like, you know, there,~ there's ~the like the, the, ~the desire to have that. Like,~ Like, I wanna, ~I wanna make this as good as I can and then ~like ~if something goes wrong, ~I like, I can air, is there, ~are there clean ways?

Because ~'cause. I, ~I feel like what should typically happen in those cases, just from a UX standpoint, it's hard to map this to everything, but ~like, ~it's like typically like I want to do the thing and ~like ~let the user get on with their day. But then ~like ~if something goes wrong, I don't want them to like completely lose.

Like ~I could, ~I could just display an error message, but that's not gonna be super helpful. Have you found use optimistic is helpful, or I guess any of these hooks is helpful to like ~kind of ~get the user back to a point where they can do the thing again without completely blocking until the result comes back?

Aurora: So I think what we can do to this to understand that is just to recap what Use Optimistic does differently from other hooks, because it is ~kind of ~a weird one. And,~ uh,~ yeah. So what's special here [00:15:00] is, first of all, it must be called inside a transition, and then you have this,~ uh,~ create an optimistic state that only exists while this transition is completing.

So let's say we have this,~ uh,~ saved to my favorites for a product. This, you can call these optimistic and set,~ uh,~ is saved true, and then it's only gonna exist for as long as that async call,~ uh,~ completing,~ uh,~ the save two favorites is still,~ uh,~ ongoing. And after it's done, you then it will automatically sync to the real value.

So that means that it's just you have a click, it's instant. It probably is fine. You don't see any weird state updates. It's just clean. But in the case that something went wrong, it reverts. Or ~it, ~it feels like it rolls back, but it's just rolling back to ~the, ~the initial past value, which is now from the truth, ~from the, ~from the server or from some other source.

Noel: ~Yeah. Is there,~ are there particular kind of. Patterns here from like an API perspective, let's say you control the backend and the front end.~ Are there, is there like, is it, does this, does this kind of, does the um. ~Does the API of the hook itself, does that more easily,~ uh, like ~lend itself to specific [00:16:00] ways of designing frontend backend interactions?

~Like, is it, ~is it better to, ~you know, like ~be returning generally a larger like state object than from these calls that kind of can more easily be reapplied to the front end to instruct it how to render? Or ~are we,~ can we like, still have very atomic small actions that are like acting on one piece of data?

Because I think both have their pros and cons historically, but when we're in this mode of wanting to be able to like~ like ~recover cleanly,~ um, is is there, is there like an, have,~ have you found ~the, ~the way that use optimistic is structured kind of pushes you one direction or the other?

Aurora: ~Well, it, ~it just falls back to ~the, ~the real value on failure or the, you could say the fail value, whatever. Wherever it gets its sort,~ uh,~ data from, that's what it's gonna fall back to. So you don't need to like. anything? ~It, ~it comes from the data source. ~So definitely like an automatic,~ you can think of it like an automatic rollback, but ~it's, ~it's not really a rollback, it's just discarding some state.

Noel: ~I'm, ~I'm trying to think of ~like ~a good example here where I've ~kind of ~run into this problem in the past where like ~I, I, I'm thinking, ~I'm thinking in things where like ~you would expect, ~you'd expect this submit to ~like ~change other state [00:17:00] elsewhere. So you like do ~kind of ~hacky stuff on the client to be like, ~oh, this,~ it'll probably look like this.

Like when they're done and then you're like, oh no, wait, like if this fails, I then also, so then you end up in this weird motor, you're like trying to ~like ~get computed state to

Aurora: yeah. It's, that's, I think that's like the worst, right? ~Well, ~at least for those bigger,~ uh,~ like your case you're talking about here, which is what we're familiar with,

like~ the.~ You would have some library help you with that, like the,~ um,~ the optimistic updates and Times query, but it will handle that for you.

~Right. ~Whereas use Optimistic, probably it's just like smaller. The way I'm using it anyway is for smaller,

Noel: Yeah.

Aurora: components where they have some state that they're expecting and then you get the nice UI and if something goes wrong, it's automatically reverting and you can just click that action again and see if it's gonna work again.

~You~

Noel: ~Yep. Yeah. Yeah. And maybe, yeah,~ maybe ~there's, there's some, some~ you have some kind of feedback displayed in the interim, but,

Aurora: Yeah. It depends on how you're doing it.

Definitely.~ ~

Noel: ~the, ~the specific setup,~ um, yeah, like, I know I feel like, uh, there like~ use transition. In general ~has been like,~ there's been people talking about it, but~ there is kind of like this it,~ I think doing this, it's easy to talk about when we talk about like how easy it is, but I [00:18:00] think that there is a little bit more work here that we're ~kind of ~saying needs to be done all the time.

How do you kind of balance that trade off in ~kind of putting,~ putting ~this, ~this concurrency problem into the developers? Lap explicitly a little bit more because I think like it is another concern here, and there's like a balance that needs to be struck. ~Have you, have you, like, yeah. When do you, when do you, ~and maybe I've asked this question already, but ~like, like how, like where, ~where does it feel like ~there's~ it's worth ~kind of ~trying to, ~um. ~Re reshape how we think about UIs to like do this, should we always just be in this mode and this is our default way of thinking? Or is it like we put this hat on ~when, ~when we have a problem that seems like it needs fixed?

Aurora: You're always building something that's talking ~to, ~to the API. So ~anytime you're have, ~anytime you're creating a loading state of some sort, probably there's some feature that's better, like a suspense boundary or ~um, ~or a transition, depending on if you're transition or if you're creating an error state, maybe you should be using an error boundary.

All these declarative options that. ~Uh, ~handle this for you and same for you is optimistic. You don't need your optimistic state. And then set [00:19:00] state back on failure. ~You know, uh, ~these examples for sure.

Noel: ~Yeah. Do you, do you feel. ~This is ~kind of ~off topic, but ~when you're, ~when you're using like websites, ~do you find yourself often, kind of like when you're, ~when you're interacting with them, ~do you, are, are you, like,~ do you get into that motor? Like, oh, these guys are using the ~new, like,~ new transitions, or, or they did a lot of work historically to make this feel like they weren't,~ or,~ or is it like, eh, whatever.

~I'm just, ~I'm just a web user. ~I don't, ~I don't really

Aurora: I think yes. I was like, looking at this app, I'm like, wait, this is a really nice load. You said, how did you do that? Okay, it looks like this, right? It could have been like this,~ but,~ but I think those cases where you notice it's. Not where it should be a transition. You'll see ~the, ~the ui like flicker of some sort and doesn't match the update from the server.

So there's like examples of this documentation. And actually I wrote a blog post just today preparing for this,~ uh,~ for this podcast. I was like making this combo box without a transition. The search in the combo box,~ the,~ the options like jump around, right? Because it's not in sync with the actual. ~Uh, ~async function doing the search.

So those are the examples that you can feel. Okay. This is ~kind of ~jittery. Probably should be [00:20:00] using a transition or in,~ uh,~ for the right terminology here, using an action.

Noel: ~Nice. Nice. Yeah, yeah, yeah. We'll be sure to,~ we'll be sure to have a link,~ uh,~ to the post ~if we can, ~if we can 

Aurora: Yeah.~ Yeah. ~

Noel: ~the, um, yeah, like, I'm trying to think,~ I'm trying to think of ~a, a use case where, like~ a recent use case that I've run into where ~there's, there~ like I probably should have reached for one of these and I didn't, because I feel like ~it's, ~it's easy to ~kind of ~always think about the form components and I'm particularly trying to think of ~any, ~any examples that aren't like purely based around.

Web requests because I think ~the, we, we,~ when we talk about these, we're always just like, all of the examples are always like, the server is slow, right? ~There's always like, ~or the network is slow or whatever. ~Um, ~do you have any examples where you've used any of these for something like else, like systems stuff or ~like, you know, like a, ~like a systems API that may not be super responsive ~or, ~or anything else outside of just like network or, ~you know, ~like upstream,~ um,~ delay.

Aurora: ~Well, ~I think for ~the, ~the version of these features, which is for ~like, uh, ~suspended components or synchronous calls, that's when you need it. ~Uh, ~but then you have the other aspect which is for rendering optimization. ~So, ~which is what we already had in 18.

Noel: ~Mm-hmm.~

Aurora: So it, it depends on how, which,

Noel: Yeah. Yeah, exactly. I guess ~the, ~the re the rendering [00:21:00] optimization ~is, ~is yeah,~ like,~

Aurora: it's more niche. You don't encounter doing that as often, I think, whereas ~the, ~the,~ uh,~ the 19,~ uh,~ APIs, they really can replace a lot of your complex code, like in everyday code.

Noel: ~And, and like e~ even people working on apps ~that aren't, ~that aren't like, ~you know, ~it's not like this data comes back and I'm doing hundreds of UI updates a second and like ~this, ~this thing needs to be like, I don't know, like you have some kind of stock trading app or something. ~I think, ~I think in those cases you like really would care about non-blocking rendering performance, but

Aurora: Or lists,

Noel: Yeah, 

Aurora: filtering lists.

Noel: Exactly. Like giant tables ~and, ~and stuff like that. Yeah. Like tho I think that those do come into play, but ~I, ~I just anecdotally, I feel like yeah, the impulse is correct. It's like, no, like~ It's like, no, like ~everyone has this problem where ~we're do, like,~ everyone's doing web stuff, like async calls, ~you know, like~ we're all, ~we're~ writing web apps.

~This is, this is,~ everyone's got this problem. ~Um, ~but yeah, ~like ~there's, ~um. I, ~I feel like ~I'm, ~I'm,~ I, I'm always, ~I'm always hunting for a good example where it's ~like, ~no, this is ~like, we have, ~we want to have this kinda like async feel, but it's not just because of network. ~Like there's, ~there's something else interesting going on here, like with system [00:22:00] hardware or something that could be slow.

Aurora: ~Yeah. Well, you can,~ I mean, transitions work ~for, ~for rendering. If there's ~like, ~let's say you have a. ~Uh, ~process a problem, maybe something is not running. Transitions will also let you track the state of that. ~So, ~yeah, I suppose ~that's, ~that's it.

Noel: you, you probably use one for something pretty cleanly, like requesting like mic access, like those kinds of things. Like ~when you open, ~when you open an app and it's ~like, you know, ~I need to access the microphone or the webcam or whatever. You could probably do something pretty clean there.

~Um,~

Aurora: a lot of options. The more you play with them, the more you realize. The how many cases this could work for? Definitely,

Noel: ~Yeah. Is there, I guess kind of, kind of ~on that note, ~is it, are there any, um,~ are there any,~ uh,~ specific like aspects of this that have ~kind of ~surprised you while coming up with this talk or experimenting with these new patterns in particular that~ you've kinda like, ~have opened your eyes a little bit?

Aurora: I think just how they all ~kind of. ~Intertwine and I was like reading the old ~uh, ~react V 18 announcement, like it says there, even in the announcement there ~like, ~oh, in the future we plan on using this for data fetching. It's ~like, ~oh, okay. So it's all coming together and it all has same [00:23:00] components that all kind of behave.

~I mean, ~it's a declarative way to,~ um,~ think about your, what's important, what's less important, how do your loading states look like, how do your air states, and it all just works in this one API, ~you know, ~that's really fascinated me recently, how they have the same API or ~the, ~the components function the same, but can handle different things.

Noel: ~Yeah. Yeah. ~That's pretty cool. ~Are there any, are there any particular tools? You, you,~ it sounds like you've had your ear ~to the ground, ~to the ground. Are there any particular,~ um,~ tools ~around, around kind of these like, uh, you know, like concurrency tools or like optimistic updates, um, that have kinda. Kind of changed how you approach them or how, how you think about building, building apps to like make them feel responsive.~

Aurora: ~It's kind of hard to answer because as I've been progressing as a developer, it's been, I mean, I, I'm not 10 years of experience and it's kind of just been there,~

~uh, as I got, as I was learning. So I think it's easier also if you're, if you're a new learner, to kind of grab the new stuff rather than jump into your old patterns.~

~I forgot what your question was, but.~

Noel: ~No, you're good. Yeah, it was kind of a, it was a meandering question for sure, but I I, I was, I'm, I'm, I was just curious if there was any like Yeah, like, um, either tools kind of at the, at the framework level or, or kind of just like meta tools, wrapping any of this stuff, I think is what I'm, or, or even just like.~

~Um, you know, like, like developer tools in the classic sense of the word that you've found, make it easier to, like, are there any like special, uh,~ or like something as simple as like a lin rule or something that happens at runtime? ~Like, is there, ~is there anything you found here that really kinda ~push, like ~helps push you in this direction or makes it easier to interface with these new, like hooks concerned with concurrent rendering and optimistic updates and transitions and all that stuff?

Aurora: Yeah,~ well,~ the reactive tools are great.

Noel: Mm-hmm.~ Mm-hmm.~

Aurora: If you don't use them, probably you should be using them more because they're great. ~Uh, ~there's like new features, like you can, I think you can toggle suspense boundaries. You can see server components. You can, of course you can profile performance, that sort of thing.

And now with the compiler, you [00:24:00] can also see what,~ uh, uh, ~components have been automatically memorized by the compiler. So for sure, the reactive tools.

Noel: Yeah. The active tools ~are, ~are pretty good. Every, I feel like every time ~I, ~I open them up. ~Uh, ~and I'm in there, I'm like, oh, this is ~a neat, ~a neat new feature. ~Like~

Yeah.

~I find ~I find something new every time. ~Um, ~yeah. ~So there's always,~ is there anything else, ~I guess, kind of on,~ on the talk or anything else in particular you wanted to touch on here?

Aurora: ~Um. Well, ~I can maybe talk a little bit about the inspiration.

Noel: Oh, yeah.

Aurora: so yeah, so I was like doing some work,~ um,~ in my consulting job, and I was building, actually, it was a, I was building in the auto complete component. Or a combo box. And we were using Aria kit and I was like playing around with Aria kit, looking at the examples.

And I found this example, which was like Next JS router select. I was like, okay, what is this? This is interesting. I couldn't see the code 'cause it was like premium. I was like, okay, interesting. I'll just play with it. And I noticed that the. When you selected something, it wouldn't actually up,~ uh,~ update the label right away because the way the router works in x js, you have to,~ uh,~ wait for that update to happen.

If it's like a search prem, the search prem,~ uh,~ will trigger and [00:25:00] then it will re-render the page, and then it will update the search prem. So that means that your select is gonna be delayed.

Noel: Yeah. ~Mm-hmm.~

Aurora: And this is a very common problem a lot of developers face when they're, it's not real problem, it's just the way it works.

Developers face this and get confused, like, how do I fix this? And in that case I was like, I really want to make this example better. So I started talking with the creator of Aria Kit and hey, I have this idea, and I read this part about,~ uh,~ in the use transition docs about exposing action properties. And I had never tried it.

Noel: ~Hmm.~

Aurora: And I was thinking maybe I can see if this would work for this case. ~Uh, ~and that was the trigger and I realized, okay, you can actually. Expose action properties just ~like ~the form component does with the form action, but for your own,~ uh,~ your own reusability.

Noel: ~Mm-hmm.~

Aurora: And that allowed me to kinda fix this example where it would be smoother.

So basically that's the story and I really want to build around that because I hadn't seen that pattern done in practice before. 

Noel: Yeah. ~Do you see, ~do you see it everywhere?~ All the, like,~ all the time now, and you're like, ~oh, this I, I, ~I could fix this. ~Like ~this is the,

Aurora: I think it's a little [00:26:00] bit, as you're getting used to new patterns, you don't always see them. ~Right? ~You're

Noel: ~hmm.~

Aurora: ah, maybe. But then as you progress and you start using something, then you all of a sudden you realize where you could make changes. ~So, uh, ~that's why that's like the basis, or one of the things I'm touching on,~ uh,~ in the talk, because I want to showcase how you could build something reusable with actions or transitions.

Yeah.

Noel: ~Yeah. Cool. Cool. ~I feel like that's, as,~ uh, that's as good a ~good a transition as any, we do ~like ~a quick round here, ~so I'm gonna ask. Three. Yeah, I got three questions. Try to keep your answers to like a sentence here on these if you can. Um, so yeah, on,~ on that note of ~like ~getting used to new patterns, what's your favorite UI pattern overall that you think most devs overlook?

Aurora: Of course I'm gonna be influenced by my current work and I've been working with server components recently as I do,

Noel: ~Mm-hmm. Mm-hmm.~

Aurora: and just,~ uh,~ the using the React children,~ uh,~ and the, those APIs to create some sort of wrapper for server components. That's very interesting because you can, all of a sudden it's like a puzzle.

You can,~ uh,~ do some sort of,~ uh,~ UI update based on the contents of. Of a component without actually knowing what's there. And for server components, that means you can keep your data [00:27:00] fetching on the server and such, and ~you don't, ~you don't have to optimize this, but ~it's, ~it's fun to try and,~ uh, in, ~in the client side, maybe there's better options like context or render props.

But yeah, it's a cool pattern for

Noel: ~yeah. That, yeah.~ Especially, yeah. ~For the, ~for the server rendering. Cool. ~Um, ~what is the last library you tried? Just for fun?

Aurora: ~Um, ~Redwood, SDK, the New Redwood. ~Uh, ~I tried that. Yeah, I complete the whole tutorial. I really recommend that it was really long and very detailed and really good.

Noel: Yeah.

Aurora: So definitely,~ uh,~ lets you try out and understand all of the features. So it's like a. More natural and simplified way to work with server components and React 19 and all of the things that you maybe already know from next js, but you don't have the same rules and conventions if that's something that you maybe don't like, which I know some people don't like.

Right?

Noel: ~Yeah, and I, I was very, ~I was very impressed with~ the new, like~ the new redwood,~ uh,~ docks as well. ~I mean, ~I think they have the advantage of it being kind like a clean slate and stuff, but ~it, it, like they are, they're a joy.~ They're a joy ~to go, ~to go through, for sure. ~Um, ~is there a tool or extension you couldn't live without right now?

Aurora: ~Well, ~maybe, you know what I'm gonna say? ~Um, ~cloud four,~ uh,~ copilot agent mode. [00:28:00] So I work for Enterprise, we use Microsoft and, ~uh. ~That's why I use GI Up copilot, and I might be wrong, but it seems like all of these features from Cursor already are available also in copilot. So it works for me. ~Um, ~and it took me some time to get into the whole AI development flow and for the tools to be good enough as well to actually be useful in your like, day-to-day work.

But now I can't live without it anymore.

Noel: ~Yeah. We'll see. ~We'll see ~now, ~now that,~ uh,~ open AI's got ~the new. ~The new model out that cursor can like use with the CLI, I think this will get ~a lot more, ~a lot more interesting. ~Like ~this was like yesterday as we're recording. ~So like we may Yeah. Like, we'll, we'll see who's like, I don't know. It's so hard.~

It's so hard to ~like get good. Like ~get a good barometer of like how well this is actually working for devs. 'cause ~like ~everyone's stories are like, oh, I use this all the time. Some people are like, I can't get it to do anything other than logs. And it's just ~like, ~yeah, we'll,

Aurora: Yeah,

Noel: we'll see how it progresses,

Aurora: ~well,~ I'm happy I got into ~the, ~the correct flow here and I'm able to work more efficiently and more productively,

Noel: Good. Good. Yeah. I'm glad. I'm glad ~you found, ~you found the path that works. ~Um, ~cool. All right. ~That's, ~that's,~ uh,~ that was all I had. Thank you,~ uh,~ for joining me and chatting about components. It was a pleasure.

Aurora: thank you very [00:29:00] much.

Noel: ~Of course, ~of course. Have a good one.