What's New in React 19

Sun May 26 2024

Introduction

React 19 brings significant updates and improvements to the React ecosystem. This blog post provides a comprehensive overview of the key changes and new features in React 19, helping developers understand what to expect and how to upgrade their applications smoothly.

Installation

To install React 19 RC, use the following command:

npm install react@rc react-dom@rc

If you're using TypeScript, update the types in your package.json as shown:

{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}

New JSX Transform

React 19 requires the new JSX transform introduced in 2020, which offers improved bundle size and performance. Ensure your project uses the modern JSX transform to avoid warnings and take advantage of these improvements.

Codemods for Easy Upgrades

To simplify the upgrade process, React 19 provides codemods that automate many of the necessary code changes. Run the following command to apply all React 19 codemods:

npx codemod@latest react/19/migration-recipe

Breaking Changes

Errors in Render

Errors during render are no longer re-thrown. Uncaught errors are reported to window.reportError, while caught errors are logged to console.error. Update your error handling if necessary.

Removed Deprecated APIs

propTypes and defaultProps: Removed from function components in favor of ES6 default parameters and TypeScript.
Legacy Context: Replaced with the contextType API.
String Refs: Use ref callbacks instead.
Module Pattern Factories: Replace with regular functions.
React.createFactory: Use JSX instead.
react-test-renderer/shallow: Prefer react-shallow-renderer directly.
ReactDOM.render and ReactDOM.hydrate: Use ReactDOM.createRoot and ReactDOM.hydrateRoot.
unmountComponentAtNode: Use root.unmount().
ReactDOM.findDOMNode: Use DOM refs instead.

New Deprecations

React 19 introduces new deprecations, including element.ref and react-test-renderer. Update your code to align with these changes and avoid future issues.

Notable Changes

StrictMode Enhancements

StrictMode now includes several improvements, such as better handling of useMemo and useCallback, and simulating ref callback functions during initial mount.

Removal of UMD Builds

React 19 no longer produces UMD builds. Use an ESM-based CDN like esm.sh to load React with a script tag.

Improved useReducer Typings

useReducer now has improved type inference. Avoid passing type arguments directly to useReducer for better compatibility.

TypeScript Changes

React 19 includes several TypeScript changes, such as:

Removed deprecated TypeScript types.
Required argument for useRef.
Default ReactElement props now use unknown instead of any.
Scoped JSX namespace for better type isolation.

Conclusion

React 19 brings many new features, improvements, and breaking changes. By following this guide, you can smoothly transition your projects to React 19 and take advantage of its latest capabilities.