Back to Blog
React JSReact JS
Thursday, May 9, 2024

React 19 Beta Upgrade Guide

React 19 Beta Upgrade Guide

The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 beta.


Note This beta release is for libraries to prepare for React 19. App developers should upgrade to 18.3.0 and wait for React 19 stable as we work with libraries and make changes based on feedback.


The improvements added to React 19 require some breaking changes, but we’ve worked to make the upgrade as smooth as possible and we don’t expect the changes to impact most apps.


To help make the upgrade easier, today we are also publishing React 18.3.


Note React 18.3 has also been published To help make the upgrade to React 19 easier, we’ve published a react@18.3 release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. For a list of changes in 18.3 see the Release Notes.


In this post, we will guide you through the steps for upgrading libraries to React 19 beta:


If you’d like to help us test React 19, follow the steps in this upgrade guide and report any issues you encounter. For a list of new features added to React 19 beta, see the React 19 release post.


Installing


Note: New JSX Transform is now required We introduced a new JSX transform in 2020 to improve bundle size and use JSX without importing React. In React 19, we’re adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform. If the new transform is not enabled, you will see this warning: Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: Click Here . We expect most apps will not be affected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the announcement post.


<Markdown
    remarkPlugins={[remarkGfm]}
    className="niogin-paragraph-text"
>
    {centent}
</Markdown>