React 19 with Shruti Kapoor
===

Paige: [00:00:00] Hi, and welcome to PodRocket, a web development podcast brought to you by LogRocket. LogRocket provides AI first session replay and analytics which surface the UX and technical issues impacting user experiences.

Start understanding where your users are struggling by trying it for free at LogRocket. com. Hello everyone, I am your host today, Paige Niedringhaus. I am a staff engineer at the IoT Startup Blues. And today we have Shruti Kapoor, a lead member of technical staff at Slack, and she's here to talk about React 19.

Welcome to the show, Shruti.

Shruti: Thank you so much for having me here, Piage..

Paige: We are very glad to have you on because React 19 is new, it's hot, ~it's thing, ~it's what everybody is talking about. So maybe you could briefly summarize for us the key updates that React 19 introduced and some of the most exciting features to you. 

Shruti: [00:01:00] You

and ~also add some improvements to refs and, uh, Um, ~also has a better support for forms. So overall, the big theme of react 19 that I've noticed, especially as a front end developer, who's working on the client side is that forms are getting a better support.

~Um, ~we'll talk about in detail, but the main features that react 19 introduces is react actions. Which is how forms are getting a better support. ~Um, ~some new hooks like use action state, use form status, use optimistic. ~Um, ~so actions and server components are also becoming stable. We do not need to forward refs anymore, which I am super excited about because I had so many places where I was forgetting that refs wasn't getting passed through and I was not seeing the value.

So thankfully don't need to do any more. ~Like. ~Wrapping around of refs with forward refs anymore. So super excited about that. ~Um, ~and one major update because of react compiler is that you don't need to use, useMemo and use callbacks anymore, which, oh, thank God. CauseMemorization on.

Paige: It [00:02:00] is. Those are two things that I've always ~kind of ~stayed away from because I'm never sure if I'm memoizing or calling back the correct thing or not.

Shruti: Yeah, you might as well put it everywhere and that's not the right tactic, but where do you put it? How do you figure it out? It's an art.

Paige: Okay, so let's talk a little bit about React Actions because there are React Server Actions and now there's just React Actions in general. So what are they and like, why were they introduced to React 19?

Shruti: Yeah. So react actions,~ um,~ are actually inspired by a remix and react actions simply put our async functions. So in react 19, we are now introducing a new way to ~kind of ~handle forms. ~Um, ~and I talked about like react forms are getting a better support. So maybe this is a good time to ~kind of ~introduce that.

So typically in react 18 and before the way we handle forms is ~we'll have like a,~ we'll have a whole form and then we'll have an on click or a handleSubmit. Button at the end. And then when we click on that button is how we attach event handler. [00:03:00] And then the event handler will be where we ~kind of like ~call our API or do whatever state update we need to do.

~Um, ~typically ~in re ~in applications, like prior to react,~ um, Uh, ~especially people who've used PHP may remember that forms usually come with a thing called action, like there would be a form action and then ~like ~a get call or a post call with the method get or post,~ um,~ and that's where kind of actions are inspired from.

So now in React, instead of having to send a handleSubmit event callback where you like submit your form, you can instead attach an action to the form itself. And this is how the form will get submitted. So it's ~kind of ~taking inspiration from the original ways of submitting forms in PHP, which is really cool.

~Um, ~currently Remix also supports actions, which is ~kind of ~where React's actions are inspired from. So that's what React actions are. ~Um, ~so in short, actions are ~kind of ~the place where we do mutations in a form, and these are asynchronous functions. So actions in React 19 are just asynchronous functions where we do mutations, [00:04:00] especially for the form.

Paige: ~So, ~I'm just thinking about some of the data fetching libraries that are already out there, like TanStackQuery and SWR. Is this meant to replace those sorts ~of, ~of libraries? Or is this more just very form specific and just meant to help make form manipulation easier, which has always been something that people have had trouble with and, ~and had a lot of,~ had to put a lot of focus into?

Shruti: Yeah, this is specifically for form. It's not meant to replace,~ um,~ any of the other libraries. ~Uh, ~this is just how we used to handle forms before with like manual handleSubmits. We don't need to do that anymore. So this is just specifically about form.

Paige: Okay, so you say that it's more that React Actions are about asynchronous functions and you have a really great video, which I think we'll link to in the show notes for anybody who wants to ~kind of ~see it in detail. But maybe you could talk a little bit more about start transition and is pending and some of the things that you can now do thanks to React Actions.

~Thanks.~

Shruti: ~so~ I'll talk about this in brief detail. [00:05:00] It's ~kind of ~hard to explain code and in an audio, but I'll try my best. ~So, um, ~typically when we submit a form, we need to show the user some form of feedback that the form is getting submitted. And this is where we would show like a loader state. And the way we've done typically loaders is that in our handleSubmit functions, we'll have ~like ~a state, like a use state, which is,~ uh,~ is pending.

And then before we call our API, we'll set the spending to true. Then we call our API, then we'll set the spending to false. Then this is the is spending state, which will read and have like a loader component, which checks for if the spending is true, show the loader component. And then when is spending is set to falls after the API has been called or the mutation is done, then the loader component goes away.

So that's ~kind of ~where,~ um,~ the challenge currently comes where you have to currently manually keep track of is pending state with. Use transition,~ um,~ use transition was actually introduced in react 18. So it's not a new hook to react 19. But one of the main things about,~ uh,~ use transition is [00:06:00] that it helps to mark which,~ um,~ updates are urgent.

And specifically, for example, if,~ um,~ in this case, you are submitting the form, you need to show like a pending state. You need to, there are certain updates that would be urgent. showing the loader stay. So you need to give the user some sort of feedback that something is happening. And this is where use transition hook can be really helpful.

So what use transition hook does is it gives you an is pending already ~out of, ~out of the hook itself. So you don't need to keep track of it manually. And now, because. Start transition hooks are getting an update where now we can add async functions within it, which are actually the actions. What we can do is have an action within the start transition function.

And so what that gives us is that it gives us back the is pending state. So we don't have to manually track it anymore. ~So ~initially we were using set states to create like a spending variable, but now with the help of use transition, We can actually get it out of the use transition hook itself. So no [00:07:00] longer need to manually track that is pending anymore.

So this way, all we do is we move our async function inside the use transition hook and use the pending state that comes out of use transition and use that within our component. So no need to manually add setState for isBending anymore.

Paige: ~I mean, ~that's to me sounds like such a huge win because I can't tell you the amount of times I have either forgotten to start the loader or to tell it it's done.

Shruti: Yes!

Paige: So having that handled for me, it sounds like a massive improvement.

Shruti: Yeah, sometimes I think ~like, um, ~especially setting it to false, like isBending to false, that has been ~kind of ~tricky, like knowing when is the right time to set it to false. ~Um, ~and I think that has also led to a lot of issues as well, where the loader would keep showing, but the data is probably back, so.

Not having to manually keep track of it makes me feel a lot better.

Paige: So another,~ uh,~ one of the new hooks that you talked about was use form status. So maybe you could tell us a little bit more about how that improves the handling for loading states as well, compared to previous react versions. 

Shruti: ~Um,~

~submitted ~[00:08:00] ~ ~ submitted to the form, which actually super helpful because in case we want to fetch fields that was submitted to the form, this is really helpful.

The method, which could be the get or post, and then the action, which is like ~the action, ~the asynchronous action that was used to submit the form. ~Um, ~And why this is helpful is because let's say that you have a component where you have a loader and then you have ~like ~a name,~ um,~ and you have like other fields.

So all of these components need to depend on, let's say the pending state. So what you can do is you can create the use, or you can call the useFormStatus hook within these child components of the form, like the name, the loader, and so on. Then you can reuse the pending state from that. So all of these components will get the pending state at the same time, and they will be updated at the same time.

So if one [00:09:00] of your component needs to be disabled, if the loader is showing, then you can use this. ~Um, ~an example I showed in the video that I was talking about is, let's say that you have a button that needs to be disabled when the form is being submitted, so you can prevent over submitting of the form.

Then you can the useFormStatus hook to receive if. pending status true or false. ~Um, ~another really cool thing about the form is that because it has the data attribute, which is the fields that were submitted to the form, you no longer have to manually keep track of the fields on like your form level.

You actually get it back from the hook itself, which honestly I found really helpful because I have built forms where there were like 20 different fields and then I have to manually track all of those 20 fields to see ~like ~which field has data and which field doesn't. With this, you have the data within this object itself.

It's gonna be a form data object, so you're gonna have to do like data, get property, and so you can have access to whichever property you need in whichever component without having to pass it through props. ~So, ~which is [00:10:00] really cool.

Paige: That is really cool. And it's funny that you say that because I'm building a form right now that has about, it feels like 20 different optional inputs. So using something like this where I don't have to check if it's undefined ~or, ~or null sounds really helpful.

Shruti: Yeah, exactly. Oh my God. Optional fields are so hard to ~like ~keep track of. Is it submitted, is it validated or,

Paige: Right. ~Is it?~ Yeah. Has a user clicked into it, but they didn't actually enter anything into the select. Yeah, that's exactly what I'm going through.

Shruti: Yeah,

Paige: All right, so one question is you mentioned that you actually have to use, use form status within child components. So ~is this, how does this, ~how does this impact like your form refactoring process?

~Um,~

Um, bit and talk about what we're talking about, which is,~ Um,~ Use form status can only be [00:11:00] used in the child component of a form.

Shruti: ~So, ~which means that if you have a form where you have a parent, like the form itself, the form element itself, and then you have ~like ~a loader in there where you're just You're like inline loader where you have ~like ~is pending and show a loader and then you have another field which is also inline within the form so it's not like a child component.

In this case you're reading some values like is pending data and stuff like that. Now with use form state if you want to ~use ~use form state you have to create a child component within the form so you cannot use it at the same level as your form and so if you have any inline components which,~ um, ~reading like is pending state of the data state, you have to now create a new component within it.

I think overall it leads to more cleaner code, but it is true that it is going to be a lot more like refactoring of the code, specifically if you have like design systems where people are already used to using this, so I could see that as a little bit of challenge. ~Um, ~yeah, I, when I was building my,~ um,~ demo [00:12:00] app for the video, I also noticed that ~Uh, ~this was in fact a problem where I was like, okay, now I have to ~like ~move all of this data out into smaller components, but hopefully it leads to more cleaner code,~ um,~ after refactoring, I did notice it was a lot cleaner.

So hopefully,~ um,~ it shouldn't be a lot more challenge, but I can see that especially in design systems where people are already used to having these inline components, that could be a problem.

Paige: Yeah, ~I mean, it's, I think ~it's kind of like when hooks were first introduced, everybody hated them. Nobody wanted to ~kind of ~move away from class components because we couldn't really understand component life cycles versus how hooks worked. Right. But then people got used to it. It became an accepted pattern.

Everybody's fine with it for the most part now. So it's probably just going to be, like you said, a little bit of pain to do the first set of refactoring. And then people will get used to it and see the benefits ~and, ~and adopt it widely.

Shruti: I think from like after refactoring, it does make sense because,~ um, like in,~ that's how it ~kind of ~should be. Like if you have some inline components, they should actually be components themselves. And so they should be like child components themselves. So I think it does make sense for it to be in a [00:13:00] child component, but ~it, it,~ I can see that it can take a little bit of understanding to know that use form status needs to be within a child component and not within the parent.

So I can see that could be, that could lead to some errors down the lane. ~So~

Paige: Yeah, I mean, ~it'll, ~it'll be a foot gun like most other things and people eventually will figure out from the error messages what they're supposed to be doing. So speaking of refactoring, what are some of the best practices that you would recommend for using actions and these hooks in real world applications?

Shruti: one thing that I would recommend is that if you have an async function or specifically, if you have a mutation, moving it out into its own file,~ um,~ and I've showed this in the,~ uh,~ demo in the video as well, but one thing I would do is move any of your async functions or any of your mutations into its own, like actions file, and if you've used Redux, you would ~kind of ~be familiar with this because it's ~kind of ~similar concept, but moving actions out into its own file And then just calling the actions through and use,~ um,~ action, use action, status, use form, use action state.

~Oh, the names are like, still not, still not concrete in~

Paige: ~a lot. Yeah.~

Shruti: ~use action status. No, it's use action state. Uh, ~[00:14:00] and then using the use action state to call that form action. I think ~that would be, ~that would be one of the best practices I would recommend. ~Um, Another one I would recommend, sorry.~

Another one I would recommend while we were just talking about this is,~ um,~ like we said, like making child components instead of having inline components, I think it's just going to lead to a much more like modular code, just as a best coding practice and react in general, but also having, being able to ~use ~use farm status within the app, I think it's going to make it easier as well.

Paige: Yeah,~ I've, ~I've worked on code bases before where there have been multiple components within one file and it just makes me feel so uncomfortable to read code like that and have to like jump up to see ~what, ~what the component is and then go back down to see where it's being used. And yeah, just make it even if it's a really small component, just break it out.

~It's. ~It's fine. Nobody cares.

Shruti: Yeah, it makes for a much more reusable components as well. ~Right. ~Which is kind of like the essence of react or you can use that component somewhere else as well. Maybe you're not using it today, but tomorrow you probably need a new component and it will be much easier as well at that time.

Paige: It's good advice as well. Do you have any ~extra ~extra advice for developers who might [00:15:00] struggle because, ~you know, ~pending and these form states now that they're ~kind of ~obfuscating the use state, which was very explicit before and easy ~for, ~for developers to understand what was happening, ~you know, are there good doc,~ is there a documentation or other things that you would recommend for people who are trying to get used to this new paradigm?

Shruti: ~Hmm. ~That's a good question. So documentation to replace pending from the manual pending state to. ~The form itself, right? ~The hook itself.

Paige: yeah, because before you had, ~you know, ~two pieces of state, the is pending and set is pending and, ~you know, ~getting the form data out or the name for your specific repo. ~So. ~Now, is pending just kind of exists and it comes out of the form, they'll use form actions or different things like that. So it ~kind of, ~it's a lot less explicit if you don't understand that that's where it's coming from.

So I was hoping, ~you know, ~maybe you had some advice for people who want to learn more, ~get, ~get more familiar with all the different things that these hooks now can do for them.

Shruti: ~You know, uh, ~two of the best,~ uh,~ resources that I've found so [00:16:00] far. ~Um, ~and it's a little bit challenging right now because it's so new. There aren't a lot of resources, but the original documentation that React dev has on React 19 use from status and use action state actually is really helpful because it ~kind of ~walks you through how to de factor it,~ um,~ Also, the original conference presentation from the React Conf 2024 is also really helpful.

~Um, ~I can share the specific talk that I'm talking about, but it's a React Actions talk. ~Um, ~I think Andrew presented that talk and that is a really helpful talk as well in terms of ~like ~figuring out what actions introduced and how use form status and use,~ uh,~ action state. ~Um, ~pending attributes kind of help.

So those two resources I would definitely recommend.

Paige: Absolutely, that's fantastic. So now that React has taken a more formal approach to handling forms, How do you see that shaping up in the future? ~Like ~what are the next things that you could see for the future of front end and react? 

Shruti: ~is~

~ known in react updates since last react 18 update, um, and react 19 update this time is it's able to. It's the, the React team is thinking a lot of how to remove the manual stuff that developers have to do. Um, React 18 introduced this with start transitions where we were manually having to like set.~

~Um, urgent updates or like having to manually add suspense states. Um, and with react 19 now with forms where it's all, um, able to take care of adding this, um, kind of like removing this ability to, uh, or removing this need to handle, submit the form. Um, so having to like manually take care of the form. So~ one of the big things that I'm noticing with react updates is that react team is taking care of how to ~kind of ~remove the manual needs [00:17:00] that we have as ~a ~react developers to do these small tasks and let the developers kind of take care of building the applications and react ~kind of ~does this background job of removing the jankiness,~ um, ~taking care of pending states, handling the form status.

And things like that. So I'm actually very excited about the updates that UI,~ um, ~will have ~in the fall, ~in the coming years with react updates,~ um, ~specifically around handling these ~like ~manual tasks that we have to do right now. ~Um, another big thing with. ~Another big theme with React 19 updates this year has been the removal of manual memorization and the introduction of React compilers.

So I think the React team is really thinking about having to remove this like cognitive overload from direct developers of the manual tracking of tasks that we have to do. And I'm very excited about that.

Paige: And that's actually a perfect segue because React compiler was what I wanted to talk about next. So ~you, ~you said briefly that it's removing the need for people to ~use, ~useMemo and use callback themselves, but. Could you dive into a little bit more detail about how that works and how [00:18:00] developers soon won't have to worry about those two hooks any longer?

Shruti: ~Okay.~

~Um, ~ ~Um,~ and it does depend on react 19 as a dependency.

So you ~kind of ~need that. ~Um, ~but what react compiler does in the background is that once you have it enabled, it'll look through your code. It'll go through it. File by file and figure out the places it needs to memoize your code. ~Um, ~and you may have useMemo and use callback already. So it'll figure out exactly where it needs to memoize the code.

And so it does that by doing a few different things. ~Um, ~the two main things that it's taking care of is skipping re rendering, which is actually a really big thing because of which most of the components re render. So for example, If you have a parent component and you have ~like ~five different child components in it, anytime the props change, the component re renders.

[00:19:00] So the entire component has to re render. ~Um, ~and so that has been a ~big, ~big problem because of which the components have been re rendering many times. And we would typically look at react profiler to figure out which components re render and that's where we would add useMemo or use callback. And so React compiler figures it out itself and figures out which components can be cached.

So for example, if you have a component that depends on a really big data, that component probably needs to cache if the data does not change. So it will figure that out and do it itself. And then if there are other components, sibling components within that same parent component, that probably don't need to re render if the props change.

If that component, like the, it doesn't depend on it. ~Um, ~and an example in the React docs is if there is like a. Profile component and there is a friends list ~which does not, ~which does depend on ~like ~a big data component. And then there is maybe like a tick or something, which does not depend on the data component.

So anytime data props change, maybe the tick component that does not depend on the data prop, does not need to re-render. So that kind of [00:20:00] stuff we are compiler can figure it out for us and we don't have to manually memorize if we were doing it. ~Um, ~right now without compiler, we would have to look at which components need to re-render.

And then the other ones you would ~kind of ~like cache or add useMemo and things like that. So ~it'll, uh, ~it'll just take care of ~like ~memoizing ~your, um, ~the components yourself. ~Um, ~one thing that it also takes care of is skipping expensive calculations, especially in form,~ um,~ and specifically in things that are handled by react.

~Um, ~so which basically means that if there is a function that is,~ uh, ~handled by react, like it's a react component and it is returning a data. ~Um, ~React will figure it out if it needs to,~ um, ~skip that recalculation. It's ~kind of ~like an equivalent of useMemo. ~Like ~if we were calculating something, we would cache that value with useMemo.

React compiler will now figure that out. ~Um, ~so anything that is controlled by React, React can actually memoize that for us. So those are the two main things that it's doing, skipping re rendering and skipping expensive calculations. And that's how it figures out ~what to, um, ~what to kind of memoize. ~Um, I think there was another follow up question.~

~I'm trying to think what was that?~

Paige: ~well, Just like, you know, ~how does that optimize react applications? And [00:21:00] I think one thing that I've heard also is that because react is now the one figuring out what should be memo eyes, it's actually able to do more fine grain optimizations than users could even do themselves.

Shruti: Yeah, so I was actually reading about this. ~Um, so, um, ~I was initially thinking that perhaps compiler is doing the same thing as useMemo. However, ~compiler,~ what I found out is that compiler is doing a more low-level code optimization and ~it's more, ~it's different from useMemo. ~So, um, there could be situations where compiler, ~there are situations where a compiler, because it's a low-level cache memorization, it's actually better than useMemo.

~Um, ~which is really cool because. First of all, it's nice that you don't have to manually cache it. But secondly, also it's more performant than useMemo, which is really cool. ~Um,~

Paige: So for somebody who was enabling useMemo ~in there, or sorry, ~in react compiler in their application, would they then be able to remove any useMemo and use callback hooks that they had previously put in? 

Shruti: ~Mm~

Mm caveat though,~ um, because I said,~ I was talking [00:22:00] about this just a second ago, which is that useMemos. Memorization is different from,~ um,~ the compiler's memorization.

Sometimes if you have the value of useMemo being reused in a use effect, that could cause,~ um,~ either over rendering or under rendering, which is ~kind of a,~ an interesting thing. And actually, if that is something that happens in your app. ~Um, ~if you notice that,~ uh, you should form, ~you should log a ticket with react compiler working group, cause that is a bug and the team is actually working on fixing that.

So with use effect states, or like the, with use effect that could create a problem. So the team's recommendation is that if you have,~ um,~ you can actually use, leave useMemo and use callback as of now,~ that's,~ that's Like ~that, ~that's still exists true. However, if you have,~ um,~ a dependency of useMemo value within a use effect hook,~ um,~ it's better to keep it ~because, ~because the memorization is different between the two things, which is React Compiler and useMemo, you could over render or under render, so it's better to leave it.

However, if you do not have dependencies, [00:23:00] you do not need to. Keep useMemo, use callback. You can remove them. And also going forward, you do not need to add any more useMemos and use callbacks.

Paige: ~know. ~Cool. All right, let's talk a little bit about refs, because you mentioned those early on, that there's a lot less need for them now, and we don't have to worry about them. ~So, ~you said that refs can now be passed as props without needing to use forward refs, so how does this change component design and code maintainability?

Shruti: Oh, good question. So in terms of code maintainability,~ um,~ I think the only difference, honestly, this would have is that once you pass refs, you'll be able to automatically read it without having to do anything else. Previous to React 19, what you would have to do is when you pass in a ref, you create a ref, you pass in a ref.

And when you read it, you go and notice that you don't have any data coming back in that ref. And the reason was because you had to manually pass refs using forward refs. Again, another theme that you don't have to manually do anything. React is taking care of most of the things for you, which is really cool.

So with React 19, you don't have to add forward ref to a ref [00:24:00] anymore. ~Um, ~as soon as you pass the prop,~ Uh,~ a ref prop, you'll be able to read it within your component. And so that's the only difference you don't need to pass a forward ref anymore.

Paige: Beautiful. One less thing to keep track of.

Shruti: Yes, one less bug

Paige: Exactly. Okay, so for teams who are looking to upgrade to React 19, what are your suggestions for first steps, and are there things that they should watch out for ~pitfalls ~during the upgrade process?

Shruti: ~Yeah, so, uh, ~for teams that are looking to upgrade to React 19,~ um,~ I would first figure out a component,~ um, ~where you would see ~kind of ~like the best,~ um, best, um, uh, ~ROI, ~um, ~and the reason for that is because ~especially,~ specifically if you're looking to upgrade to React 19 within a company, you want to kind of, you~ kind of, you know, ~Show that story that upgrading to react 19 is worth the time investment that you're going to put in And so I think figuring out a component that can show you the best return ~on that ~On that time investment would be really great So for me, ~I would recommend~ the tips that I would recommend is forms because it's a big theme in react I think forms would be a really great component to pick.

~Um, ~so if you are Handling forms anyway, specifically if you have a form that's huge, I think this would be a [00:25:00] great one. I would start with a simple form, like a small form, note down the performance of that form,~ um,~ and note down like the lines of code you would have to change,~ um, ~and then start refactoring from the form.

Then the next bit that I would target is useMemo and use callback hooks. And if you have a component where you have a lot of them, I would actually ~maintain the, I would actually like ~find out the performance of it before changing upgraded to react 19, figure out the performance after and see how the code gets optimized and ~kind of ~build the story from there.

Paige: ~Um, ~Are there any things that people need to watch out for when they're doing these upgrades to react? ~Night. Do~

Shruti: one of the big things with React compiler is that people have noticed that the performance kind of gets worse. ~Um, ~and I think that's probably happening because of the thing that I was talking about, which is that useMemos,~ um,~ memorization is different from the React compilers memorization. So I would keep a watch out on that and notice the performance optimized, like performance numbers.

And this is why I mentioned,~ like,~ it's important to measure performance before and after. So, you know, like what's changing. ~Um, ~and if that happens, I would definitely log a ticket.

Paige: you have any particular performance tools that you like to use [00:26:00] for these measurements?

Shruti: For me, I love the react profiler tool. ~Um, ~it helps me figure out where the changes are happening and why components are changing. ~Um, ~sometimes I've noticed that,~ um, like, ~especially like re rendering of parent components. That has been really helpful from the react profiler. It is such a cool tool. I love that tool.

Actually react dev tools also gets an upgrade in react 19. It's,~ uh,~ I think react version. DevTools version five. So I would check that out as well with react compiler. There's also a playground that comes that also shows you which code has optimized and it comes with like a,~ uh,~ in react dev tools, it marks that component with ~like ~a memo thing.

~Um, ~so it's also really cool to see which component has been memorized with react compiler.

Paige: Oh, cool. So they've got a whole bunch of things for you to be able to measure and show these marked improvements.

Shruti: Yes. It can show you like which components are getting more performance optimized, which is really cool.

Paige: Very nice. So are there any other hidden gems for React 19 that you think developers would want to know about?

Shruti: ~You know, ~one of the things that I love that react 19 has now ~kind of had~ added ~as a, ~as a little feature is,~ um,~ [00:27:00] the ability to add meta tags to pages, and this is really cool ~to ~specifically, if you ~have like a page, like a blog page, um, that you can. And, uh, you have like different blogs on, or like, uh, ~let's say you have ~like ~a blog on react 19 and then you have a blog on like canvas and things like that, which I do a lot and you're building this as a react app.

So you can actually add meta tags to each and every component specifically. And so that can be really helpful to improve the SEO of your site. Specifically, if you depend on that kind of stuff a lot,~ um, like ~as a blogging platform, which is really helpful. So I think that's really cool because now we have an ability to sort of Specify meta tags for each component.

Paige: ~That's, ~that's awesome. Yeah. And you're absolutely right. That's the kind of thing that people want for their blogs and their, ~you know, ~their e commerce pages probably too.

Shruti: Exactly.

Paige: Very cool. So what is next on your radar in terms of upcoming React features or just general web development trends?

Shruti: So I am actually very excited to get rid of my useMemos and use callbacks and not have to worry about that anymore. Cause honestly, it has been such a pain, like having to remember where to add useMemo, use callback. ~Um, ~usually what we do is like we build a [00:28:00] feature and then figure out the performance of it and figure out like how we can improve it, but with the help of React compiler, this is something that can be taken care of.

Automatically. So I'm very excited about it. I'm looking forward to refactoring my app and removing use callbacks and useMemos wherever needed,~ um,~ and not having to worry about them again.

Paige: That's a good refactor to look forward to.

Shruti: Yes.

Paige: ~Well, ~Shruti, it has been a pleasure talking to you today. Is there anything that we haven't touched on with React 19 that you think other developers should know about or would like to hear?

Shruti: I think one thing that we didn't talk about is the working group of React compiler,~ um,~ as people start experimenting with React compiler, there's also a working group ~that the React 19 team, ~that the React team has opened up. And if you experience any issues, I would highly recommend being a part of React working group.

~Uh, ~this is open to everyone. If you are a team using React compiler in production, this is kind of like a helpful resource for you to go ask questions. ~Um, ~I've been a part of the React working group in the past and it has been such a wonderful experience. It's been a learning, great learning experience, but also a [00:29:00] great way to learn about like just React concepts in general, that those are not even related to like React 18.

So, ~um, ~if you're ~using or~ planning to use React compiler in production or ~upgrading your app to, or like~ refactoring your app,~ um,~ and using React compiler, I would highly recommend ~getting big, ~being a part of the React working group. I can share a link for that in the description.

Paige: Absolutely, that would be fantastic. And if people want to get in touch with you, either ask questions about React 19 or more about anything that you've talked about,~ uh,~ where's the best place to find you online?

Shruti: Yes, so if you're interested in any tutorials on React, I'll have a lot of React 19 stuff coming up on my YouTube channel. You can find me anywhere,~ uh,~ using my,~ um,~ handle shrutikupur08. And if you have any questions on React 19 or if you're encountering any issues, find me on my Discord. ~Um, ~I'll leave the link to that as well, where you can ask me one on one questions.

Paige: Perfect. ~Well, ~once again, thank you for joining us on PodRocket. It's been a pleasure to have you.

Shruti: Thank you so much, Faze. This is awesome.