React 18 → React 19

This guide covers upgrading from React 18 to React 19. Yes — go directly from 18 to 19.

Version upgradeDifficulty: moderateEffort: 0.5–2 daysmedium risk

Last verified May 20, 2026 · Updated May 22, 2026

Migrating from React 18 to React 19. Yes — go directly from 18 to 19.

Should you upgrade directly?

Yes. React 18 → 19 is a single major step with a well-supported codemod. There is no benefit to an intermediate version.

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.

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

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-18 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-18 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 18?

Yes — go directly from 18 to 19.