Everything You Need to Know About React 19

Hello, folks. Thank you so much for coming to my talk. If you haven't realized, React 19 is announced and in RC stage, which means that it is ready for app developers. But it's ready for library authors, but not ready yet for app developers.

So if it's not ready, why am I giving this talk? Well, I feel like every time a new version of React comes out, my mind just goes like, OK, shiny thing, let's upgrade. Through this talk, I want to show you what are the different things that are going to be in React 19. As an app developer, what are some things you need to care about, especially if you are on the client side? I feel like as somebody who has just moved their company's code from React 16 to React 18, I have a little bit of nervous breakdown every time I see a new version come out. And I'm like, oh, my God, is my code stale now? Do I have to upgrade it? But through this talk, I want to show you all the things you need to know to move your components from React 18, 17 to React 19.

So we're going to talk about everything you need to know about React 19. And there are a few things we're going to talk about today, which is what's new in React 19, what's changing, and a demo of some features through which you'll understand what it looks like in code. And we'll be talking about converting a form from React 18 to 19. And through that, we'll learn about React actions and two new hooks, use action state and use form status.

Before I proceed on with my talk, I want to quickly introduce myself. My name is Shruti Kapoor. I'm a front-end engineer at Slack. You can find me on the internet at ShrutiKapoor08. I've also included a link to the slides right here. So if you're interested, you can scan this code. I cannot see anybody, and if you're scanning, so I will pause here for three seconds.

Cool. If you have attended any of my talk, you know what's coming up next. Dev jokes. Yay! So the way this works is when I say knock-knock, you say, who's there? Knock-knock. You got it. Cool. Okay. Knock-knock. Yeah. Don't Yahoo! Google it. Knock-knock. Who's there? Tailwind. You got it. Tailwind relative inline flex item center Px2, Py2. Yeah. Knock-knock. Google it. Knock-knock. Tailwind. Java. Tailwind relative inline flex item center. Sorry if you're a Java developer. If you know a dev joke, Knock-knock. Make a pull request. Here's the GitHub URL if you want to learn more dev jokes, if you've got a dev joke. But anyways, you're like, I came here for React 19, let's get to the good stuff. So let's get to the good stuff. I'm going to talk about the new features of React, some new hooks, and some new APIs. So the new features of React, I think the two main popular features that I'm going to talk about are React Actions. And let's take a look at how React Actions work by taking a look at some of the code that we currently write.

So here's an input value, input field, and we add an onChangeHandler to this. There's usually a button. This is kind of an extension, like a simplification of a form. So there's usually a button which has a handle click. Pretty simple stuff. If you need to add any lower state, we'll usually put like isPending, manually capture a flag, set it to true before doing like an API call, and then set it to false once the API is returned.

With React 19, we can actually put an async function using a StartTransition hook itself. In case you're not familiar with StartTransition, this was a hook that was introduced in React 18, which basically lets you mark certain updates as non-urgent updates. So in React 19, you can actually now put an async function within StartTransition, and that is an action. So simply speaking, functions that use async transitions are actions. They're also supported on the server, so we also have server actions with React 19.

React 19 also introduces an action in the DOM itself. So this may look familiar to you if you have ever used PHP. Now we have a form action, which can be now attached to the action itself that we just created. So instead of now having like an onclick handleSubmit or having an onSubmit on the form, you can attach an action and don't have to worry about capturing the pending states anymore. Another cool thing that React 19 also introduces is a new hook called useFormStatus, which is really cool because it can be used to get the pending flag out of it, so you can use it to track loading states or even get the data object out. Data is all of the fields that were submitted to the form. So that's React actions in brief. We'll look at it in detail in the demo as well.

But let's talk about React Compiler. So with React 19, we don't have to use useMemo or useCallback anymore, and I'm very happy about that because React Compiler can now take care of auto-memoization. Woo! I know. It's awesome. It's really cool because you don't have to manually memorize your code anymore. We used to do that with useMemo or ReactMemo or useCallback. But you know that if you ever memorize your code, it's often easy to forget where to memorize and even doing it right is an art. So I'm so happy that React Compiler can optimize re-renders, and the way it optimizes performances is by two things. So one, it skips re-rendering of children when parent updates. An example that you may have seen is, let's say that there's a component and it accepts a list of friends or a list of data. The component will re-render completely if friends changes.

But with React 19, the component is smart enough, or React Compiler is smart enough to understand that through fine-grained reactivity, if none of the friends changes, then friendsListCard only needs to update for a specific friend with a specific ID. So the entire component doesn't need to re-render. Another thing that it also does is skip expensive calculations for certain functions. An example is here. So it only memorizes components and hooks not every function. An example being, let's say there's a really big function at the top of the file, expensive process. If the compiler was to look at this, it'll memorize the call of that function, which is at the line const data, where the function is actually being called. But because the function is outside of React's boundary, React's component, it won't be memorized. So that's an important point to remember.

Now what does compile code kind of look like and how do you know if code has been compiled? What you can do is actually copy-paste your code into the React Compiler Playground, which looks like this. One caveat, though, this is a public thing, so if your code is open-source, this would be a good idea. So you can copy your code and put it on here, and on the right side, you'll see stuff that is compiled. And so specific things to look out for is the $="C", which is the hook that React is using to auto-memoize the code. So in short, no more useMemo and callback. Thank God.

What if you're like, I love memoizing myself? Use compiler. Here are some frequently asked questions that I saw on the internet, which I want to kind of answer in my talk. Do I need to remove useMemo and useCallback now? I feel like it's a very commonly asked question. The answer is, it is safe to leave as is in the current code. The way that React Compiler code memoizes is different from useMemo and useCallback, so it's safe to leave your code as is. You don't have to go back and remove it just yet. Can React Compiler be used with less than React 19? One thing that I want to point out that is usually kind of a misconception is that React 19 comes with React Compiler out of the box. React Compiler is actually a plugin which can be used with React less than 19 as well. So the answer is yes, you can use React Compiler with other versions of React as well. There is a React Compiler runtime that you can use for React versions less than that. Is memoization the same between React Compiler and useMemo, useCallback? The answer is no. The way useMemo and useCallback memoizes is different from the way compiler memoizes code, so the compiler memoizations are different. Can I prevent compiler from optimizing certain files? The answer is yes. You can use useMemo on a file that you want to ignore from compiler, but if you write useMemo, compiler won't look at the file at all, so even if you want to go back and change some things, you're going to have to remove useMemo if you want the compiler to look at it again. So if you are seeing issues after compiler, what do I do? Don't do anything. There are a few things to check for troubleshooting. First is check if you are breaking any rules of React. One of the cool things that I found about Playground is that if you copy-paste your code there, it will actually give you some warnings that actually give you some really helpful hints, as in if you're breaking rules of React, it will point that out for you. Another point is try fixing the error with useNoMemo. So if your code is breaking by adding compiler, try to fix your code without the compiler added, and if you still see issues and if you're not able to get through it, then provide feedback in GitHub discussions, which is the working group of React compiler.

So that was React compiler. Let's talk about the new hooks that comes with React 19. One of the hooks that I had just pointed out was useFormStatus, which is actually a really helpful hook because it gives you the information of the last form submission. Specifically, the flags pending in data are really helpful, especially if you want to add a loading state and if you want to extract data out of the form that was submitted. One caveat, though, of this hook is that it can be only used within a form's child. So here in this state, for example, you have a form, and you write useFormStatus in the same component as the form. This won't work. To make it work, you have to move it within a child component, so you move it within a submit, and now you can add useFormStatus. Another hook that is also really helpful with forms is useActionState, and this is really helpful because it can give you updated state based on an action when an action was fired. And the things that it gives you back is state, which is initialized by the initial state during the first render but also is updated by the data that was returned afterwards.

It looks like this. We have a form. We attach the action to it, and the action comes back from the useActionState hook. And then there is another hook called useOptimistic, which is used to optimistically update UI. Optimistically updating UI actually means, in case you're not familiar, means that let's say you have a Like button. You click on the Like button. You have to wait to update that on the server, but while you're waiting, you want to show some sort of optimistic update, which means that you want to show that the heart is clicked. Then you can use optimistic updates for that. useOptimistic hook can be really helpful there because it can give you back an optimistic state that can be used to return the merge value of the current state with the optimistic value.

React 19 also introduces a new API called Use. Looks like a hook but is not a hook. It can be used to read resources. Specific resources that it's really helpful to use is context, and you can actually use just like that with the context that's provided. Super easy, and I find it very handy to use. Also can be used to read promises. However, there's a caveat. It cannot be used to read promises that are called within Render. So it can only be called within Render, and promises like with a suspense library can be used with Use.

In short, what's new in React? There's two main features, React Compiler, React Actions. Three main hooks, useActionState, useFormStatus, and apisuse. Let's do a quick demo. I have five minutes. Hopefully I can do it within that time. So in this demo, I'm trying to show you what the difference between rendering a form between React 18 and React 19 will look like while giving an example of how to use useActionState, useFormStatus, and the action hook. This is a very simple form. It only has one field, and so if I write my name, Shruti, all it's doing is updating the UI with the name that was typed, and if I click Update, it's going to simulate a loading state which is actually simulating an API send, and I'm just waiting for 500 milliseconds, and all I'm doing is just updating my API at that point. So this is a simple React 18 form, so let me show you what forms look like in React 18 in case you need a refresher. So there's a form component here. Typically, there'll be an OnSubmit here as well, but you can also attach an onClick handler as well and have your handle submit. I have exactly one field here just to demonstrate the purpose, and now I have an IsPending flag, so the way I handle IsPending flag in React 18 is in my handle submit function, I'll set the IsPending to true, which is starting my loader, and then I'll fake all my API and then set IsPending to false.

So that's very simple. This is how we do React hooks right now. This is how we do forms right now. Now let's take a look at how this changes if we have React 19.

Okay, if I refresh this, ha-ha, it doesn't work because I quit my server. NPM run dev. Reload this. Huh, thank God. Okay, and if I add my name here, it doesn't do anything. So what I'm doing here is I'm writing my name, but I want to submit that name, send it to the server, and then pretend that my server is sending that data back to me. So how would that work in React 19? Similar form, but a little bit different.

So first of all, in my React 19, I have an action attached to the form, and this form action actually comes from the hook UseActionState. UseActionState accepts two parameters. One is the action itself, and the second one is an initial state. Let's look at what this action itself is. So here, it's a very simple one. It's not doing anything. It's just getting the data that was submitted to the form from FormData object, and I get the input name, which is actually the name that I'm typing. Then I'm pretending that this is an API again, waiting for 500 milliseconds, and then returning my data appended with the previous state, which is another parameter that SubmitForm action gives back to us. So I'm appending PreviousState with the name, and then I'm just sending it back to the client.

Now, on the client, in actually RenderName component, I'm looking for the state. I'm going to get the name out of it, which is what my action just gave back to me, and all I'm going to do is just render that. Now, I talked about how UseFormStatus gives back a pending component as well, a pending flag as well. This is really cool because this is how I can track loading states, and it can be also really helpful if I want to disable my button based on whether or not the form is submitting. So what I can do is if I'm typing something and I update, the button is disabled. And that's how to add pending states and loading states within React 19. So to summarize the difference between React 18 and 19 is now I have a DOM element called action, which I can attach to form. I have a DOM attribute called action, which I can attach to form. And instead of manually tracking updates, I can actually have the pending attribute that comes back from UseFormStatus. And if I need to receive any data based on what the data was submitted to the form, I can get that from UseActionState using FormAction.

Okay. Now, so basically what's new and what... So we just talked about what's new. So here's some things that have changed with React 19. Ref is now a prop. That means no more forward refs. I know. I used to have so many bugs in my code because of forward refs, not forgetting to put forward refs. But thankfully, no more forward refs. If you've ever used ref, you know that you would have so many issues because of that. So ref is now just a prop. You pass it down, you get it. There's no more, like, wiring that's needed. You don't need to use useMemo and useCallback anymore. React auto-memoizes code for you using React Compiler.

There are some other updates. Some things that I'm going to talk about, though, is the metatag that's available. So it's really cool, especially if you're doing, like, a blog site or, like, a content... or, like, a page that depends a lot on SEO. So what you can do is add metatags to each of your components or the components that need metatags so that you don't have to depend on metatags coming from somewhere else. So you can tailor the content based... you can tailor the metatags based on the content that you're displaying, which is really cool for SEO. Another thing that I'm really excited about is the style sheets precedence. So now, instead of having, like, having to remember which order the links should come in, you can actually give a precedence of default or hide to link style sheets as well.

To recap, forms are getting a better support. Finally, getting the first-class citizen that they're supposed to be. It's now becoming easier to manage pending states using useFormStatus and useActionState. There's no more useMemo and useCallback with the help of React Compiler. There are no more forward refs because ref is now just a prop. There are other features, such as React server components, which officially gets announced with React 19 as a stable feature.

StartTransition now accepts async functions. I don't have time to go over all of these functions, all of these features, but here's a snapshot of everything that's coming in React 19. And I'll pause here for one or two seconds in case anybody wants to take a screenshot.

If all of this went over your head and you're like, I'm just new to React, I just want to tell you that you don't have to upgrade to React 19 anymore. You don't have to upgrade to Write 19 just yet. React 18 and all of your knowledge about React 18 is still valid, but if you're looking for something that you want to understand how React works. I also have a course on O'Reilly. Here it is. I'll pause here for one or two seconds in case anybody wants to take a photo.

With that, I come to the end of my presentation, but we cannot leave with one final death joke. Thank you so much, everyone.

So, first question. Given that developers are generally used to the current interface, in your opinion, what is the advantage of React 19 has over something like React 18 and less or other compiled frameworks like Svelte?

Oh, good question. I think one of the big things that I'm seeing with React 19 is that I don't have to use useMemo and useCallback, especially in like scaled applications at work. And the reason is every time you build a component, you have to think about what are the data sets going in, you have to manually optimize it, look at performances, you have to look at the console to see what is the difference between useMemo and all of that. So, with React Compiler, you can kind of automatically do that and don't have to worry about one thing, which is honestly a big headache that's gone away. So, I'm really happy about that.

I think one thing that I'm also really excited about is how forms are now getting a really better support with React 19 as compared to React 18 and other versions. I think this is really good, especially for applications like form-based applications, something that I used to do at PayPal a lot, where we would have like 10 different input fields, and then you have to kind of manually see which fields have what data, and it was a mess with form data and React 19 getting better support for forms, it's becoming a lot easier, which is something I'm very excited about.

Yeah, definitely. Next question. What specifically is the difference between how the compiler works and useCallback useMemo?

Yeah, it's a really good question. The difference between React Memo and React Callback is that React compiler uses low-level optimizations. Specifically, it's using a hook called underscore c. It's an internal React hook that it's using for memoization as opposed to React useMemos. Nice.

Next one. Tools like Formic have made it pretty straightforward to work with form state in React. Do you expect people on Formic will use form status hooks instead?

Oh, that's a really good question.

Do you expect people on Formic will use form status hooks instead? Oh, that's a really good question. I have not used Formic, so I cannot give very specific examples. I imagine that library authors like Typeform and Formic would be using these hooks internally, so you probably don't have to integrate with useForm status if you're already using a third-party tool.

Yeah, cool. Let's see. We already answered this one. Here we go. Do you have an example use case where you would want to use useNoMemo if the compiler is optimizing my code behind the scenes? Yeah, I think one of the really good examples is that if you're using React compiler and your code starts breaking, that's a really good place to start useNoMemo. I think one of the other things that I noticed online that I was reading is that React use effect has been leading to a lot of problems, especially with React compiler, so that's a good place to put useNoMemo as well.

What do these new hooks mean for the future of React query and React hooks form? Ooh, I love that question. You know what? We're going to take that question to the panel tonight. I like that. There will be a panel later, by the way, and Shruti will be moderating, so you can check that.

What do the performance improvements look like in React 19? So React team has actually put out a document about saying that React compiler has improved the performance. I don't know the metrics off of my head, but I think what we have noticed is that with useMemo and useCallback, if your applications are already well-memoized, you may not see a big difference with React compiler. However, with React compiler, because manual memoization is so hard to do, with React compiler, you are bound to see more performance in React 19. Hopefully that made sense. I think so, yeah. That tracks for me.

Does the pending values from useActionState and useFormStatus... Sorry, this question. Let me re-word it.

However, with React compiler, because manual memoization is so hard to do, with React compiler, you are bound to see more performance in React 19. Hopefully that made sense. I think so, yeah. That tracks for me.

Next one here. Does the pending values from useActionState and useFormStatus... Sorry, this question. Let me re-word it. Does the pending values from useActionState and useFormStatus are effectively as traditional state? Could there be latency that allows multiple button clicks? Wait, say that again. I know, yeah. Basically, let me see if I can n-word this differently. Do the pending values from useActionState and useFormStatus, are they as effective as traditional state? Will there be latency? Oh, I think the idea is that is it still reliable? Is pending state reliable to use as a loader component? In my experience, it has worked really well, so I don't have any concerns with that. Cool.

Are there any breaking changes going from React 18 to 19? Ooh, good question. Hmm. I cannot think of anything. I cannot think of anything. Yeah. I intrinsically don't trust auto-memorization. How does it compute dependencies? Convince me I'm wrong. Oh, God. Wow, if I could. I think one thing that I've seen with dependencies, especially in use effects, is that especially if you have something that is memoized by useMemo, it sometimes leads to a lot of re-renders, and that has broken some use effects, and there's been a lot of backlash on it. Try it out. Give it a shot. That's all I can say. Yeah. That's good. Yeah.

Yeah. All right. You mentioned the React compiler is memoizing differently now. Is it using signals similar to Svelte or Solid? It's actually using underscore C, which is a React internal hook. I don't know if it signals. Yeah. Cool.

Does the React compiler work with mutable state managers like MobX? Ooh, good question. I don't know. Yeah. Yeah. I don't know either. Okay. Let's see. Oh, somebody said no. Somebody said no? All right.

Do you see the React 19 form updates making libraries like React hook form redundant? All right. Another React hook form. How do you see the roles of React form libraries changing post-React 19? Wow. These questions. I wish I was a library author. I can't answer that question for you because I'm not that library author. Ask that library author. Yes. Yes. I'm not a Java dev, and I didn't get the Java knock knock joke. Why was it infinitely loading? So the joke is knock knock. Who's there? Long pause. Java. Because Java takes long.

Nice. In the React 19 example, the UI didn't update while typing. Would that have been implemented the same as in React 18? Oh. React didn't update. I think the difference between what I showed in the form with React 18 and 19 was that I was using like a set state to show you as I was typing. The difference between that and what I showed with React 19 was in React 19 I was submitting the form. So you can do the same thing with React 18 as well, just a different feature I was trying to show. Nice.

All right. We got time for maybe one or two more. Is there anything being deprecated from React 18? Oh, I think I already answered that question. If anything is breaking. Yeah. Yeah.

How would I mock the data for use of form status in vTest or Jest? How do I mock the data? Jest. Yeah. Use the testing library? Yeah, use the test library. Yeah. All right. I think we could do one more here. Let's see. Let's find a good one. Actually use RTL. What's that? Use RTL. React Testing Library. Oh, yeah. Use React Testing Library. Yeah. Sick. All right.

Do you think it's okay to use new features right after the release? Oh. I think right now because React is in RC stage, not a good time to do it right now. However, once it's in stable stage, I would be upgrading some of my forms to React 19 for sure. I've actually already started upgrading some of my side projects to React 19. I'm seeing it as being pretty stable. I haven't seen any major issues, so I don't see a problem.

However, if you are at a company, I think the answer is it depends. I can't really answer that right now. However, in side projects, I've been seeing it as pretty stable. I haven't seen any issues yet. Awesome. One more time, give it up for Shruti Kapoor. Thank you so much, Shruti. Thank you. Thank you.