00:00 Hello, everybody. My name is Kent C. Dodds, and I am super excited to be joined by Aurora. Oh, I didn't ask you how you say your last name, so I'm going to just try. OK. Go ahead. Is it sharp? Yeah, that's perfect. Thank you. Yes. Nailed it. So I'm joined with Aurora.

00:17 I met Aurora at React Conf earlier this year, and it's just a pleasure to get to know you a little bit there and excited to chat with you some more today. Can you introduce yourself to our audience today? OK, so my name is Aurora. I'm primarily a web developer. I'm from Norway.

00:36 I live in Oslo, and I'm working as a consultant. So that's my full-time job, and then I do this conference on the side, sort of, whenever I have time for that. Yeah. So you work for yourself, then? No, this is a consulting company. So we have a lot of that in Norway, actually, and one of many.

00:56 And it's great. I really enjoy it there. Cool, cool. Do you work at home, or do you go into an office? I live right by the office, so I usually go there. And I really love just having coworkers to chat with and learn from. And yeah, it's very important to me

01:15 to have that in-person working culture. Yeah. I don't know that I would ever go into an office again, but the more that I think about it, the more I think it might be kind of nice to rub shoulders with people.

01:34 I find myself working out of the house, away from the house, going to, I guess, those second places, or whatever, where I just want to be around other people. I don't really want to talk to other people, necessarily. I just want to be around other people. That makes sense.

01:53 I like that as well. When, for example, when traveling, I really like working wherever you're waiting for something to happen, like if it's at the airport or on a long train ride. That's also nice, because you're doing something, but you're also working. But I prefer a bit of both.

02:12 Yeah, it's funny. I've got this office, and I have all these fancy lights and everything in this office. And I spend so much time away from the office. My wife is like, why did you spend all that time making the office great? But yeah, that's great.

02:29 And so in your consulting work, I'm assuming you're mostly doing React stuff for the companies that you work for. Yeah, so I've been doing React ever since I started this consultancy, because I used to be working at a startup, where we were doing some full stack stuff, some Azure functions, and different things.

02:49 But ever since I started this company, I've been doing React, and now, recently, Next.js for the last eight months, I would say. OK, and when you say started this company, are you the owner of the company? Oh, no, no, sorry, just when I started working there.

03:06 It was just last year, in January. Cool, and yeah, that sounds like a lot of fun, working with React every day. And do you end up having lots of different clients, or do you stay with a single client for a long time?

03:24 I've had two different ones, and in both of my projects, I've been responsible for the front end of the project. So it's smaller projects, both of them, but I've been the front end on those. And I really like that you're responsible for building the product, of course, but you also

03:42 have to do a lot of work with communicating with the designers, the product owner, whatever you need to do to make the best possible product. Yeah, yeah, consulting always kind of attracted me in this idea that you stay on a product for a while, and then you can move on to another product,

04:02 and you kind of get that fresh. Yeah, it's nice. And doing smaller projects is also fun. I had a job where I was the only front end developer for quite a while, at the entire company. And it was really cool, because I got to make all the decisions. Yeah, that's where I'm at now. It's great.

04:21 It's terrifying also, but it's great, of course. Yeah, you learn a lot. You have to do things you don't do as often. Yeah, it's nice. I like it. And then you can't just build something, and then let's see, you have to consider the different consequences, and what's

04:39 going to be the best outcome in the long run. Yeah, absolutely. Also, at your talk at React Conf, which was super, by the way. People should definitely go look it up. Actually, let me, what was the title of the talk? I want to make sure that. It's called Enhancing Forms with React Server Components. Yeah, yeah. It was great.

04:58 I actually literally just watched it right before jumping into this call, because I wanted to refresh myself on that. And it really was very good. A whole live-coded evolution of, let's add more and more features. Really, really great talk.

05:15 And so I wanted to ask you a little bit about your feelings as you've been. Actually, I don't remember. Did you mention, how long have you been using React? It's been on and off, maybe since I started working. Since I started having a developer job, which

05:34 is maybe four years ago. But it wasn't really that much until I really started all in since last year. Like, full-on React since last year. Maybe February, something like that. Very cool. And you've been using Next.js, which has had these features for a while.

05:53 So is this the way that you're building your forms regularly now? Well, actually, that's a funny story. Because in the real world, you can't always get what you want. So we have a component library, and it's not really compatible the same way.

06:11 So it's not going to be what I presented like that. But actually, the example that I did there is something that I have made for this project, but a more client-side version. Not really optimizing the server components as much. Not as much, but still, it's there.

06:29 So I'm using this stuff regularly, for sure. Good, good. Yeah. So because I don't use Next.js, and Remix doesn't yet support server components, it will come eventually. But my personal website does use React 19, because it's my personal website.

06:48 I can do whatever I want. And so I could use form actions, at least. And I just haven't taken the time to do that. But I'm really interested to hear the feedback from people who are actually using some of the stuff that is hopefully

07:06 soon going to come in a stable release of React. Well, I can say it's very useful, especially because, like I mentioned, I have a lot more client-side code than I would maybe want to because of the restrictions. But the whole use form status, it's really great for building reusable,

07:25 for example, submit buttons. So that's actually a pattern I've been using in my own project because it's simplifying a lot of your code. You don't have to pass any props. You just put it there and put whatever it's supposed to contain of content, and then it's going to handle your loading state by itself.

07:45 And that's really nice. It's just so much less code. Yeah, it's nice, the React 19. Yeah, that is super. The use form status, that one, part of me is a little disappointed with it because to be able to use it, you have to make another component.

08:04 But I think in practical situations like the one you're describing, you're going to make one anyway. And that's what I realized. I was like, what is the point of this? It's so hard to find a good use case. But then I just was looking at my app and like, hold on. I can just make, I have this pattern. I've already created this spinner pattern with a component library that I'm using.

08:24 I'm just going to make it into a reusable button, right? And so I have the submit, the typical that I'm using for everything. It has all the props, like the component library with the icons and everything, right? But it's also handling its loading state on its own. And then you can make an icon version, right? Same thing. And it's going to take the normal button props, whatever.

08:44 It's really nice when you realize, OK, I have this use case. I'm using this library. Just make a reusable button, and then you don't have to worry about it again. It's super nice that React is building these sorts of features into the framework. Yeah, definitely. Have you used other form libraries before?

09:04 As you've been adopting these version 19 features, have you needed to use them less? So I'm using Formic because the component library has some restrictions again. But whenever I have a simple form that I don't need to use Formic for, I'm just using the built-in in React 19 now.

09:23 So it kind of depends on how complex. So Formic, Reactive Form, is still completely viable for if you're building something complex, right, or something that you need this dynamic validation, everything that you want on the client side. But then if you have something simple, you can do that as well, right, in the same app. You don't have to pick one or the other,

09:40 which is what I really like. OK, so I think maybe it would be good and useful to bring people up to speed. Aurora, if you could describe a little bit about the demo that you had at React Conf. There are a couple of things that I thought were really cool about the way you presented it I want to pick apart. Yeah.

10:00 So my goal there was really to showcase a lot of different features of this, like the useFromStatus, useActionState, useOptimistic, and the whole server component story, but make it feel really easy. Start from something simple.

10:17 You have a simple just a chat box, really. And it looks nice, easy to get into what's happening. And then step by step, I'm using basically starting all the way from the server and then adding features as I go.

10:33 So we get first the basic, well, not basic, but the form action and the server action to submit, which is kind of the first thing you see with these new forms, right? It's like, OK, you can just put an action, a server action, and then it's already working, right?

10:50 And then making it interactive with a scroller, which is now using the new server component patterns by wrapping a client component around a server component, which is something that I think a lot of people think is not something you can even do, but it's actually really useful and not hard.

11:08 And it's just the perfect way to get these different features showcased, I would say, and look easy and have a real world purpose, not just some random thing. Yeah, I really love how you brought that in, because it doesn't necessarily have to do with forms,

11:27 but it is such a great showcase of the composability between the server and the client. And even, actually, we just got a peek of your implementation of that. And I've implemented that before.

11:39 And normally, I would just say, tell me the array of things that you're rendering, and I'll put that in my use effect. But you used a mutation observer, which was like, what? Oh, I haven't done that before. I thought that was so much better. So yeah, I thought that was really great.

11:58 This whole thing is something that I just solved. So what happened is I did something, a talk that was similar to this one in Paris. And I was actually going to use that for React Conf, but then I made this message box for my project at work, right? And I was like, I have to do this. This is the perfect example, because I just

12:17 solved this mutation observer thing. And I was like, I have to find a way to use this. This is way better. And the component itself and the hook was just a couple lines. It was very elegant. Yeah, it's not much. It's nice. It's nice. And it just goes to show how awesome the composability

12:36 of React is. It's really great. Anywhere else, you'd have to have some way to include the script. And maybe you're writing your back end in PHP, and you're like, OK, now I'm going to jump over to Inertia so I can add this feature and jump to a totally different language and have some disconnect between these two things.

12:55 I'm pretty sure that Inertia makes it so that there's less indirection. But it's still like, you can't get it so nice with that composability. And then it's just all in the same tree. And what I did purposely there was I made the on-mic scroller have a class name, right? So that I can just replace the div with it.

13:14 So that it's just, literally, you don't do anything, right? You can just see how reusable it is and how it just fits there in the tree. You don't even worry about the whole client-server not working together. It just works. Yeah, it's magic. It really is. It's fantastic.

13:32 So you add that progressive enhancement bit there with the auto-scrolling. And then what did you do next? So what I'm doing is I'm just making the form feel better. So I'm adding some loading state to the Submit button. I'm adding error messages with use.

13:52 So both of this is use action state. In this talk, I'm not using use form status, I think. But using use action state to check on the server what we're going to do with the form, right? And I want to show that you can add error messages by limiting the amount of messages

14:10 that you can send as a user. So that we're checking if there's how many messages there is already for the user. And then erroring if there's too many. And at first, we're making it simple, just returning it as a red text. And then changing it into something

14:27 that feels more interactive, again, with the Toast message. I really liked how you did that, too. And I don't know, the video, I can't remember if you were taking a drink because everybody was clapping whenever anybody took a drink. It was the opposite. I was drinking when they were clapping

14:46 because I didn't know what else to do. Sometimes it's kind of like, oh, what do I do? But no, when you switched from a div that showed the text to Toast message, what I loved about that was that you left the div there. You just changed it to a NoScript.

15:05 And I would not have done that. I wouldn't have thought of that. And I really thought it was fantastic. And it played it really nicely when you eventually turned off JavaScript and said, look, this still worked. I thought that was awesome. I was really happy with the execution there,

15:22 like how it kind of, you know, it's a story, right? It's a story. And also the part, hold on, let me think there. With the error boundary, I did some error handling thing, which was actually some feedback from the React team. So I was changing this maybe three days before adding this error boundary because I was like,

15:42 wow, that's a great way to add that in, right? So I use it to catch an error. And then I'm just going to leave it there for whatever goes wrong later. So I don't have to explain why I'm not dealing with that.

15:59 Yeah, you know, React has gotten so great in the last couple of years. And error boundaries are just a fantastic feature. I guess that came out like six years ago or maybe more. But it's the declarative error states

16:15 and declarative pending states and with suspense boundaries too is really awesome. And use action state being hooked into transitions. And so like you can, I'm kind of jumping ahead here, but use that with use optimistic and stuff like that.

16:35 I feel like React has really kind of secretly jumped in a really nice place for giving us really great primitives to work with in building the web such that you may not need abstractions on top of those primitives. You can just use them directly.

16:55 And the whole, I mean, I don't talk about suspense there because it's not really, doesn't have a place in my talk. But I'm using it a lot in my real project, of course, and with the use hook as well. And it really just all makes sense when you actually figure it out.

17:14 Like, OK, this is the purpose. This is why you need this. But at first, it takes a while for you to really get it, I would say, when you don't know the full story of the server and the client. Doesn't really come to you when you're going to be using what. But then as you do, it all makes sense. You can make these really nice skeletons, right, with the suspenses.

17:34 And then you have your use hook for your client components so that they can suspend. And it's really nice. It's amazing. It's fun to work with as well. Yeah, yeah. I am very hopeful that Remix will help with that. Because I always feel kind of, I don't know,

17:54 like, let me give an example of observables and RxJS. Or even another example being very hardcore functional programming with currying and all these different things. When I look at code like that, I'm

18:13 like, this feels like a different language to me. And people will tell me, well, once you get over that, then it's amazing. And so I always feel kind of weird when I say that about React. I'm like, well, once you just get the mental model, it's so great. It's true. It really is like that. Yeah, we all just kind of have our ways that we enjoy building software.

18:33 And they don't have to be the same. That's true. But it's really cool to find your people, right? Like, find the thing that you really enjoy building. And hopefully, we can find ways to make it so that the little hump you have to get over to finally get it,

18:52 make that hump a little smoother so people don't have to work so hard. For sure. Because it is hard. It is hard in the beginning. Because everything is different. It requires you to really push yourself to get there. But you know, one of the things that I really

19:08 appreciate about React is that all of the features can technically work without anything but JavaScript. In Epic React, we have a workshop called React Server Components and Form Actions, Server Actions.

19:26 And the whole thing is built without any build tools at all. And so it's not recommended. There are a lot of missed opportunities for optimization and things. And it's not the greatest developer experience. But those can be added on top of it. They're not a requirement to use the features.

19:44 And I think that when you have that kind of a constraint on your development of a framework, if you just say, I want to make sure that it's possible to do this without the build tools or whatever, that the end result is something that's simpler. And I really appreciate that about React Server Components,

20:03 about the form utilities and everything that React does, is that at the end of the day, it's just JavaScript. Yeah, it's nice. Well, cool. So let's talk about what you did next. So use Optimistic and things in making it.

20:22 So it's cool to show a pending UI. But what would be cool is to make it look like it's not pending at all. Yeah. So at the end, I didn't live code it because it would be just too much to get into those 20 minutes. I wouldn't have time to do the other stuff. But I made this branch, which it's not that big of a change.

20:41 But I just checked it out because I have already prepared an Optimistic version of the message box there. And it's really just, all it's doing is using useOptimistic to not have any loading state and just add the message optimistically. And then you can send multiple, right? Because you're clearing the field right away.

21:01 You can send more messages and have them all pop into the box and scroll. And it looks really nice. You can really feel, it feels really interactive. So that's kind of just the final demo there to show what more you can do with useOptimistic.

21:16 Yeah, so I think useOptimistic was one that took a second for me to understand why it was needed. And maybe you can correct my understanding, but I believe that the idea is that when a form is being

21:33 submitted, when an action is happening, we're in the middle of a transition. And during those transitional periods, state updates are kind of just hung on until the transition is done. And once that transition is done, then all the state updates will be reflected in the UI. But Optimistic UI is something that you

21:52 want to make a state update that happens in the middle of the transition. And just that bit of understanding was what kind of unlocked useOptimistic for me. It helped me understand, oh, OK. So this is like a special state change that you can make that you want to go away when the transition is done. But it's like you want it to happen during the transition. Exactly.

22:12 And what's so nice is that if you're, of course, you're usually firing some kind of mutation, right, during this transition. And then if the mutation has succeeded, the UI has already updated with this new value. And even though the Optimistic doesn't really exist anymore,

22:31 you don't feel that happening because it's at the same time, and now it's from the server. And that's what's so cool. And then you don't have to worry about rolling back anything because it's just Optimistic UI that disappears after the transition is done. Yeah, yeah. And that's the hard part about Optimistic UI is the rollback.

22:51 Like, what happens if it doesn't work? So having this temporary queue of things that go away, whether it succeeds or fails. So your only challenge is making sure that the Optimistic thing you're doing will resemble what it looks like when it's done successfully. Definitely.

23:09 And I've been doing a different version of my demo, like in a different branch, making some retry, something like that. I got a question after my talk, like, how would you make this retry? And you have to kind of fake the state. Like you're saying, fake this real, and you have to add IDs to make it.

23:28 For example, the messages have to be in the correct order. They don't have to scroll when there's a new message that isn't the same element, right? So you have to add IDs and keys that are the same so that it doesn't trigger the scroller. So there's a lot of things you have to think about with this Optimistic state,

23:47 but it's still way better than the rollback, when you're doing complex Optimistic updates, that is, when you have a lot of properties that need to match a certain way. Yeah, 100%. If that makes sense. I can almost hear the people listening, like, but you should just do local first, and then you don't need Optimistic UI.

24:07 There's that, too. That's a whole other can of worms. But Aurora, I wanted to ask you also about your experience speaking at React Conf and getting into speaking. So earlier, you mentioned that you occasionally do conferences and go and speak. What is it that got you interested in speaking

24:27 at conferences, and what do you like about it? Well, I started last year, and my partner, actually, he challenged me. He was like, oh, just submit to this NEC portal. You're not going to get accepted, but just try, see what happens.

24:47 And then I got accepted, and then I didn't know what to do anymore, because OK, what do I do now, right? I'm accepted there. So that was kind of my first how I got into speaking, but it's something that has always been kind of a fear of mine to speak in front of people

25:06 and at school and everything. And I really wanted to do it so that I pushed through this fear that I had, right? So even though I was terrified of the first time, I really wanted to do it so that I would come out the other end better, pretty much. And then it went really well, and I really like teaching, and I really like the research process

25:26 when you're preparing for your talk, becoming really good at something. And especially in my case, where you're working with it in your job as well, it's like an extra push to really learn. Because every time I learn something, it's like, oh, maybe I can use this in my project. Maybe it can make my code better or my app better, something like that. So it's a great motivation to keep going.

25:46 Especially when you're showing off something that you are doing at work. You're like, I sure hope that I'm not showing something bad. I better research a little bit and make sure that it's good. And you find out, oh, actually, I was doing something wrong, and now you fixed it at work, and it's better. Exactly.

26:01 That's exactly what happened to my mutation observer. I implemented it first at work, and I was using, and then I did it for the talk. And then I was looking at my logs, like, why am I getting these error messages? And I was using the deprecated API for this scrolling, this mutation of server functionality.

26:21 I forgot what it's called. DOM, what is it called? Something that's deprecated. And I was like, oh, good thing I caught that, so I don't show deprecated features in my talk. And then, of course, I go and change it, and then the component's way better, because it has the props reusable.

26:40 So it's composable now. So that's exactly what happens a lot to me. I make something for my talk, and then I can go and improve my current code. Yeah, yeah. Content-driven development. Yeah, I actually can relate a little bit to getting accepted to something you weren't expecting to.

26:57 So I proposed to speak at a conference called JFocus. And I didn't realize until I got accepted that it was in Sweden. I'd never traveled internationally before, so I had to go and get my passport and everything. And I was like, oh, shoot, what do I do now?

27:16 And even my talk was using React in an AngularJS application. And I'd never done that before. I just knew it was possible, and I knew I could figure it out. But because I got accepted, now I had to learn how to do that. It's really great. At the time, I was an AngularJS developer,

27:35 and so that kind of helped me learn a little bit more about React. And so I'm with you. I think that speaking is a really great way to push yourself to improve, personally just as a speaker, but also professionally as an industry professional.

27:54 Yeah, and especially when you're speaking about something that's new, you can't refer to other people as much. For example, with all this new React stuff, all you have is you have the docs that are like, they're OK. They're not perfect yet. And then you just have to try a lot of examples for yourself.

28:12 And then hopefully you find something on Twitter that you can use, or you can look in the pull requests of React and see what's there. For example, with the reset, the form resets automatically. This was just been added so that I was able to use it in my Next.js app because it was just coming to React

28:32 as a part of React 19 RC, right? So it really also pushes you to do your own work because you can't rely on everything else. Because the features are new. It's up to you to try your best to demo them in the best way. And I know I've also done things that maybe could have been better, but you try your best. Yeah, yeah, absolutely.

28:52 And additionally, when you're creating content like that, especially for something new, the React team, or whatever you're working with, whatever you're teaching, the team for that is going to be very interested in helping you as well. It's a lot easier for them because they

29:09 know that their impact of the time it takes to help you is going to have a larger impact because of the people you help. So lots of benefits there. People should go speak. It's good. Cool. Aurora, was there anything that we didn't get to chat about that you really

29:28 were hoping we could talk about? I think we covered a lot. Maybe just the fact that you don't have to do the whole server thing if you don't want to. You can still use React 19 and get lots of benefits. I think that's something that doesn't come through as much. And even me, when I was doing my talk,

29:48 the React team was telling me, oh, maybe you can mention that this is still something. You don't have to be on the server to use these things. And yeah, you're right. This is completely usable also with your client apps the same way. You can get lots of benefits. But y'all should be using the server because it's a better UX. You should, definitely. It's a great DX as well. Yes.

30:07 Oh, for sure. Like just throwing that use server on top of that file and being able to reference it in a client component. And actually, I loved how the form that you were rendering was a server component the whole time until you added a use action state.

30:26 And so it was just like, oh, yeah, this whole thing was just only on the server up until this point. It's so cool. And you were able to add use client and still reference a server function. It's magic. It really is magic.

30:45 It's nice. Cool. Well, Aurora, thank you so much for giving me and everybody else some of your time today. I hope that you have a wonderful evening. And yeah, we'll see you around on the internet. Thanks, everybody. Thank you. Thank you for having me. Bye. Bye.