VVersions.dev

React 17 → React 19

This guide covers upgrading from React 17 to React 19. Reach React 18 first, then upgrade to 19. The concurrent-rendering changes landed in 18, so doing both jumps at once compounds risk.

Version upgradeDifficulty: hardEffort: 2–5 dayshigh risk

Last verified · Updated May 22, 2026

Migrating from React 17 to React 19. Reach React 18 first, then upgrade to 19. The concurrent-rendering changes landed in 18, so doing both jumps at once compounds risk.

Should you upgrade directly?

Not in one jump. Upgrade to React 18 first to absorb the createRoot and concurrent-rendering changes, then take the smaller 18 → 19 step.

Key differences

  • Removed function-component propTypes/defaultProps.
  • Removed string refs and legacy context.
  • ref becomes a prop; forwardRef deprecating.
  • findDOMNode and the shallow renderer removed.
  • createRoot replaces ReactDOM.render (React 18 change you must also make).

Files and patterns to inspect

  • Components using `ref="string"` string refs.
  • Class components using contextTypes/childContextTypes.
  • Any ReactDOM.findDOMNode calls.
  • propTypes/defaultProps on function components.
  • Test files importing react-test-renderer/shallow or enzyme.

Pre-migration checklist

  • Green test suite on the current version
  • Lockfile committed; dependencies audited for React 19 support
  • A dedicated upgrade branch

Related paths

Official sources

  • Official docsReact v19react.devreliability 98%

    Backs the breaking-change and migration-step claims.

  • Migration guideReact 19 Upgrade Guidereact.devreliability 98%

    Backs the breaking-change and migration-step claims.

Copy-ready AI prompts

Structured prompts for an AI coding assistant. Inspect first, then execute incrementally, and keep a human in the review loop.

Repo inspectionRepo inspection prompt
You are helping migrate a React codebase from react-17 to react-19.

Do not edit files yet. First inspect the repository and report:
1. The exact react and react-dom versions in package.json and the lockfile.
2. Files using removed APIs: propTypes/defaultProps on function components, string refs (ref="..."), legacy context (contextTypes/childContextTypes), ReactDOM.findDOMNode, and react-test-renderer/shallow.
3. forwardRef usages that can be simplified to a ref prop.
4. The test runner and any enzyme usage (enzyme is incompatible with React 18+).
5. Build, lint, and test commands.

Return: a migration risk summary, the files most likely to break, a suggested migration order, the commands to run before editing, and any questions that need human confirmation.

Safety: Inspection only. The agent must not modify files in this step.

Works with Claude Code, Cursor, GitHub Copilot

Migration executionMigration execution prompt
Migrate this codebase from react-17 to react-19, one concern at a time.

Work in this order and pause for review after each: (1) bump react and react-dom, (2) run the official React 19 codemod (npx codemod@latest react/19/migration-recipe), (3) replace removed APIs surfaced during inspection, (4) fix type errors, (5) update tests off the shallow renderer / enzyme.

After each step run the project's typecheck, lint, and tests, and report results before continuing. Do not refactor unrelated code.

Safety: Apply changes incrementally and keep each step reviewable. Never bundle unrelated refactors.

Works with Claude Code, Cursor, GitHub Copilot

Test plan

Commands

  • npm run typecheck
  • npm run lint
  • npm test -- --watch=false
  • npm run build

Manual checks

  • Hydration: load server-rendered pages and confirm no hydration mismatch warnings in console.
  • Forms: exercise any forms migrated to Actions / useActionState.
  • Refs: verify focus management and any imperative DOM access still works.

Regression risks

  • Removed propTypes hiding runtime validation gaps.
  • Enzyme-based tests that cannot run on React 18+.
  • Third-party libraries not yet compatible with React 19.

Acceptance criteria

  • Typecheck, lint, unit, and build all pass.
  • No React hydration or act() warnings in test output.
  • All third-party React libraries resolve to React 19-compatible versions.

Frequently asked questions

Can I skip to React 19 from 17?

Reach React 18 first, then upgrade to 19. The concurrent-rendering changes landed in 18, so doing both jumps at once compounds risk.