OpenAIReactApr 25, 2024, 12:00 AM

React 19 Upgrade Guide

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

React 19 Upgrade Guide

Key Points

  • New JSX transform required
  • Run the React 19 codemod recipe
  • Migrate to createRoot/hydrateRoot and remove legacy APIs

Summary

React 19 introduces runtime and JSX improvements that require a few breaking changes. Most apps should be unaffected, but follow a staged upgrade: first move to React 18.3 (adds warnings), enable the modern JSX transform, update packages/types, run the React 19 codemods, and then migrate removed APIs (createRoot/hydrateRoot, removed legacy APIs, test-utils changes).

Key Points

  • Recommended upgrade path:

    • Upgrade to React 18.3 to surface deprecation warnings before moving to React 19.
    • Ensure the new JSX transform is enabled (required in React 19).
    • Install React 19 and React DOM 19: npm install --save-exact react@^19.0.0 react-dom@^19.0.0 (or yarn add --exact ...).
    • If you use TypeScript: update types with npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0.
  • Use codemods to automate changes:

    • Run the React 19 codemod recipe: npx codemod @latest react/19/migration-recipe (runs replace-reactdom-render, replace-string-ref, replace-act-import, replace-use-form-state, prop-types-typescript).
    • Individual codemods available in the react-codemod repo (e.g., npx codemod @latest react/prop-types-typescript, npx codemod @latest react/19/replace-string-ref).
  • Major breaking changes to handle:

    • Error handling: errors thrown in render are no longer re-thrown; uncaught errors are reported to window.reportError and caught errors to console.error. Use createRoot/hydrateRoot options onUncaughtError and onCaughtError for custom reporting.
    • Removed/changed React APIs: propTypes checks removed from React (migrate to TypeScript or external prop-types), defaultProps removed for function components (use ES6 defaults), legacy context (contextTypes/getChildContext) removed, string refs removed (use callback or createRef), module pattern factories and createFactory removed.
    • React DOM changes: ReactDOM.render, ReactDOM.hydrate, ReactDOM.unmountComponentAtNode, and ReactDOM.findDOMNode removed. Migrate to createRoot(...) + root.render(...), hydrateRoot(...), root.unmount(), and DOM refs respectively.
    • Testing updates: act moved to the react package (import { act } from 'react'). Many react-dom/test-utils helpers were removed; prefer testing-library approaches and update tests accordingly.
  • Practical checklist for engineers:

    • Run your test suite after enabling the new JSX transform.
    • Run the codemod recipe and review changes in PRs.
    • Replace deprecated APIs listed above and update error-reporting hooks if you relied on re-thrown render errors.
    • Update type packages and fix any TypeScript signature changes.

Useful commands (examples)

  • Install React 19: npm install --save-exact react@^19.0.0 react-dom@^19.0.0
  • Update types: npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
  • Run codemod recipe: npx codemod @latest react/19/migration-recipe
  • Codemods for targeted migrations: npx codemod @latest react/19/replace-string-ref, npx codemod @latest react/19/replace-reactdom-render, npx codemod @latest react/prop-types-typescript.

Next steps

  • Test your app thoroughly and report issues when testing React 19. See the React 19 release notes and react-codemod repo for details and additional codemods.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

React 19 アップグレードガイド

React 19 アップグレードガイド

React 19 に追加された改善は一部の破壊的変更を必要としますが、アップグレードをできるだけスムーズにするよう努めており、ほとんどのアプリに影響が出るとは予想していません。

この投稿では、アプリやライブラリを React 19 にアップグレードする手順を案内します。

主なポイント:

  • 一部の破壊的変更が含まれる
  • アップグレードをできるだけスムーズにするための対策を講じている
  • ほとんどのアプリには影響しないと予想している
  • 以下で、アプリとライブラリを React 19 にアップグレードする手順を詳しく説明する