What migration strategies to React 19 exist?

Question

Accepted Answer

**Migration to React 19** — a step-by-step process of updating the codebase considering breaking changes.

**System design context:** React 19 introduces breaking changes that can silently break existing code. The migration is not just a version bump — it requires auditing every component for deprecated patterns, updating TypeScript types, and verifying that third-party libraries are compatible. A rushed migration can introduce subtle bugs that are hard to trace.

**Step 1: Update dependencies:**
```bash
npm install react@19 react-dom@19 @types/react@19 @types/react-dom@19
```

**Step 2: Remove outdated APIs:**
```jsx
// React 19 removed:
// - React.PropTypes
// - React.createClass
// - defaultProps for functional components
// - Legacy Context (contextTypes)
// - String Refs (ref="myRef")
// - findDOMNode

// Replacement:
// defaultProps → destructuring with initial values
function Button({ variant = "primary", children }) { /* ... */ }

// String Refs → useRef
const inputRef = useRef(null);

// findDOMNode → ref on element
```

**Step 3: Use new features (optional):**
```jsx
// Server Components (if using Next.js)
// Server Actions (if needed)
// use(), useOptimistic(), useActionState()
// Document Metadata (title, meta directly in components)
// ref cleanup (returning function from ref callback)
```

**Step 4: TypeScript check:**
```bash
npx tsc --noEmit  # Make sure there are no typing errors
```

**Step 5: Update tests:**
```bash
npm test  # Check that tests pass
```

**Scaling patterns for large codebases:**
- Migrate **module by module**, not the entire app at once.
- Use **React 19 codemods** to automate simple renames.
- Create a **compatibility layer** for shared components used across teams.
- Run **canary builds** in CI to catch issues early.

**Common pitfalls:**
- Third-party libraries that still use `defaultProps` — update or fork them.
- Forgetting to update TypeScript types (`@types/react@19`).
- Not testing string refs — they were silently working before.

**Recommendations:**
- Migrate gradually (module by module).
- Use codemods (react-codemod).
- Update libraries (react-router, MUI, etc.).
- Test each change.

React: What migration strategies to React 19 exist?