What’s New in React 19: A Comprehensive Overview

What’s changing in the upcoming major release of React 19? Andrew Clark, one of the core members of the React team, teased out this tweet a couple of days ago, and we’re going to read through it. Then, we’ll jump into the blog post that the team put together to see what’s coming for the months ahead or for the next major release of React, which is React 19 now. He said, “By the end of 2024, you’ll likely never need these APIs again.

• `useMemo`, `useCallback` or `memo` are all going to be handled with react compiler.
• `forwardRef` is going to be just a `ref` prop instead of having to wrap your components with the `forwardRef` function can just pass the `ref` as a prop.
• The `React.lazy` is going to be replaced with react server components (`RSC`) and `promise-as-child`. With the introduction of streaming and suspense, there’s no need for React.lazy.
• The `useContext` is going to be changed into using the use hook `use(Context)` which you can pass a context or even a promise `use(Promise)` to use on the client side.
• And then the <Context.Provider> is going to remain, but it’s going to just um change into <Context> because we no longer would have the `useContext` hook we’re going to just then use(Context). So there is no consumer side to this context <Context.Provider>. So the provider won’t make sense, so there’s going to only be a <Context> component that you can wrap and then use the context, use(Context)  inside any component that you want.

React 19 Compiler & new React Features

Now with this teaser or starter, let’s go to the blog post that the React Labs or React team puts out. Firstly, if you haven’t read this React Labs post or the previous blog post that they had, typically explaining what they’ve been working on. I highly recommend reading them, they’re jam-packed with concepts and new things that the team is working on. And they usually link to different resources and videos which is extra helpful if you are curious to learn what the team is working on. Now, let’s go to the first topic, which is the React compiler.

The React 19 Compiler

Now, in short, react compiler automatically memorizes our React applications without us, as developers, needing to use the used `memo` the `useCallback` or `memo` from React, which is considered manual memorization of your React code. If you go back to the previous post, they mentioned why they’re introducing this new compiler. React can sometimes render a lot, and we used to put cart-rails for react not to re-render a lot using `Callbacks` or `hooks` like `useCallback` and `useMemo` to memorize some values, arrays, and functions, and computations that haven’t changed from a render cycle. So react won’t render, for example, specific children where the prop hasn’t changed. Now, this differs a bit from the philosophy of React being a declarative programming Library where you’re supposed to just say what you want, so if you’re focused on what, then React would take care of how. But with manual memorization, you’re getting into the how-to section of how react should optimize your applications.

The goal is to create a better developer experience by doing this memorization automatically because they are hard to maintain, easy to get wrong, and require extra effort from you. On top of your React components to optimize your applications, they also provide a default better experience for the users because your apps are now more performant or optimized. That’s the first thing that’s coming up, it is now deployed to production on Instagram. If we were going to see this in the React 19 upcoming major release, or it’s going to be coming soon, it’s out of the research and development; it’s now working in production.

React Actions: Stable React 19 Features

Now, the next section is about actions, as you might have already known. Action server actions as a way to pass data from the client to the server or mutate data on the server, exposing functions to the client to perform mutations on the server. This is now going to be stable in React version 19 features. Now, actions allow you to pass a function to the DOM element such as a <form/>.

This `action` function can operate synchronously, or asynchronously. You can define them on the client using standard JavaScript or on the server using the `use server` directive. When you’re using an action, React manages the life cycle of the data submission, providing hooks like `useFormStatus` and `useFormState`. By default, actions are submitted within a `transition`. Transitions are a way to Mark State updates as non-blocking, so your current pages stay interactive while the action is still processing. Since actions support asynchronous functions such as a request now, transitions also support async and an async/await syntax.

This allows you to show a pending UI with the `isPending` state returned from your used transition hooks, so you can show a pending UI while an asynchronous request like a `fetch` is processing. Alongside actions, the `useOptimistic` hook was also introduced for managing optimistic State updates. This allows you to optimistically update the UI while we’re awaiting the response of an action, which then automatically reverts to whatever result that comes back from the action.

Introducing React Canary

These new features, or any forthcoming ones, will be available on React Canary before they go to the latest stable sever release and that’s why we have been able to practice with them or use them in Next.js because it uses the Canary version of React, and we’ve had access to these directives even before they’re in React itself. Things like “use client” and “use server” directives things like server actions suspense metadata or actions in general as I mentioned are now features that are on the stable Channel, and they would be released on react itself. If you’re using or if you’re looking to use these features outside a framework like Next.js, they’re ready to release.

When will React 19 be released?

Now, the React 19 upcoming major release, as I mentioned, is going to have some major changes or breaking changes with the way that suspense document metadata and some of these new features would work. Over the coming months, it’s important to keep an eye to see what is going to be needed, what is going to be changing, how to adapt to these new client features, and how to build support for React Server Components. Stay tuned for more updates on the React 19 release date.

Offscreen Components Renamed

Another feature that the React team is working on is these offscreen components, they have renamed this to activity. This refers to components that are offscreen or are not inactive, for example, you have a model that opens up but leaves the page behind it in an inactive state. When you want to remove a component from the tree, there are two ways to do it: One is to remove the component from the tree, which causes you to lose the state. The other way is to not remove it from the tree but make it invisible so that you can keep the state around. Now this is one of the new React features, they’re calling it “activity”. You can mark a component to be active or inactive, so the component remains around the state and then all the updates are deprioritized for inactive components, so React will post them later.

Once they become active, they’re now in sync with your hold react tree without having to unmount and remount these components, and lose the React state or sometimes the DOM state for these components such as scroll position. This is something I don’t think will be in React 19 upcoming major release; It’s still in the research phase to develop, or you can say React 19 beta. But the rest of the stuff we talked about will be in the next major release of React 19. That wraps up the changes coming in React 19. If you have been using Next.js, probably most of these changes are familiar to you because they’ve been using them inside the app router. As mentioned, the app router is using the React Canary version with all these features, which are now going to be stable.

Final Thoughts and React Future

Taking a closer look at what’s coming in React 19, it’s obvious the React team developing new React features. They’re making it easier for developers to handle tricky parts of building apps, like managing state and making things run smoothly. The React team bringing in a new tool called the React compiler, tweaking how we use some common tools in React, and making it easier to work with data from servers. It’s not just a simple update, it’s a whole new way to think about creating React 19 web components. They’re moving towards making things work better automatically, which means less headache for developers trying to make their apps fast and efficient. As we wait for all these cool changes to happen and see what else the React team has up their sleeves, it’s a pretty thrilling time to be working with React. Whether you’re playing around with the newest features or getting ready to learn a bunch at the React Conference in 2024, the road ahead for React is looking really good, focusing on making things work better, easier to use, and bringing everyone together.

Upgrade Your React Experience with Our Services!

Upgrade your React experience with our IT staff augmentation services! As React 19 introduces game-changing features, including a new compiler and server actions, ensuring a seamless transition and optimized performance is essential. Let our expert team handle the migration process, fine-tuning your applications for speed and efficiency. Whether you need assistance with migration, optimization, or training, we’ve got you covered.