Get your codebase ready for React 19

React has come a long way since its debut in 2013, starting as a client-side JavaScript library for building user interfaces.

I think back to the days when Create React App was the starting point for a new React project and React was strictly a client-side Javascript library. Times before lifecycle methods were abstracted into Hooks, and before React Server Components were a thing!

And here we are ready for its 19th version.

What’s new in React 19?

React 19 doesn’t have a release date yet, but let’s look at what’s coming soon and discuss how we can prepare our codebases for this future release.

Say goodbye to these APIs…

We’ve all seen the now-famous tweet from Andrew Clark (@acdlite on Twitter) discussing API changes in React 19. It seems like we’ll be saying goodbye to a few APIs we all used to know and love:

• Hooks like useMemo, useCallback, and memoization will be handled with automatic optimization with React Compiler;
• forwardRef will become deprecated since ref will become a prop!
• Hooks like useContext will be replaced with the use hook, which is more flexible, lets you read the values of Promises or Context, and makes it easy to send a promise from the server to the client;
• The use hook can also handle rejected Promises, removing the need for throw(Promise);
• Context.Provider will be replaced with a simpler signature: Context.

It’s worth checking out the React docs for more information on these features as they’re being developed and tested with Canary releases.

React Canary

Canary releases have been used to announce new and breaking changes early. Though it’s controversial, canary releases can be used in production and have been used for the development of frameworks like Next.js.

If you’re using a framework like Next.js, the best thing you can do to prepare is to keep an eye out for new updates, releases, and blog posts. As new features and breaking changes trickle down from Canary releases into Next.js, you’ll be the first to know and will have plenty of time to make changes to your codebase.

React Compiler

Sometimes React re-renders too many things when state changes. The React Compiler will be set up to work “out of the box on as much code as possible,” by enforcing the rules of JavaScript and the rules of React and automatically re-rendering the right parts of UI when state changes.

The goal is that eventually, manual memoization will be a thing of the past; Memo APIs like useMemo and useCallback will be handled by the React Compiler itself.

If you want to embrace the benefits of the React Compiler as soon as it’s released, the React team recommends enabling Strict Mode and using React’s ESLint plugin to future-proof your code. I’m not sure if this will be included in React 19, but it’s worth mentioning.

React Server Actions

Not to be confused with Route Actions in Remix, Server Actions aim to make it easier to send data from the client to the server. Actions work synchronously and asynchronously on the client side or the server.

When using Actions, React handles the life cycle of data submission, giving you hooks like useFormStatus and useFormState to access the current state and response of a form action.

Actions are submitted within a transition:

• useTransition is a hook that lets you update state without blocking UI.
• useOptimistic is a hook that will allow for optimistic state updates that are reverted when an Action has been completed.

Most developers working on an app or product won’t need to do anything to prepare for Actions. However, the React core team expects that library authors will implement their own, custom action props for component APIs.

Other React 19 changes

If you’ve used Next.js, you’re already familiar with directives that signify whether a component should be rendered client-side or on the server. Directives are designed for use in full-stack React frameworks, so you should familiarize yourself with them if you haven’t used them yet.

React 19 will also bring support for rendering title, meta, and link tags anywhere in the component tree.

Finally, for asset loading, we’ll have new resource-loading APIs for better control over when to load and initialize resources.

Activity (formerly known as Offscreen)

Previously, we’ve had two options if we wanted to hide or show a component:

• Add (mount) or remove (un-mount) the component(s) from the DOM tree completely, losing state every time we un-mount;
• Keep the component mounted and toggle its appearance using CSS at a performance cost.

Activity aims to solve this problem by visually hiding the UI while deprioritizing its’ content. This feature is still being researched, but soon we’ll be able to mark certain components as “active” or “inactive,” keeping them mounted (and preserving state!) while mitigating performance costs.

React 19 Breaking changes

There’s been word that React will break WebAssembly components, but we’ll need more information from the React Core team before we know exactly what’s going to happen.

Is your app ready for React 19?

Now that you know what to expect when upgrading your app to React 19, what changes will impact you the most? What are you most excited about?

I hope you’re as excited for React 19 as I am! If you have any questions, feel free to reach out.