React 19 Migration Patterns
OfficialFreeStreamline your React 19 source-file migrations.
Free · Opens the source repo
What React 19 Migration Patterns does
The React 19 Migration Patterns skill serves as a comprehensive reference for developers transitioning their codebases to React 19. It provides clear instructions on how to update source files according to the new API changes introduced in this version. With a focus on common migration patterns, this skill helps ensure that your React applications are compliant with the latest standards, minimizing potential issues during the upgrade process.
The skill includes a quick reference table that outlines specific code changes required for various React APIs. For example, developers will learn to replace ReactDOM.render(...) with createRoot().render() and to update legacy context usage to the new createContext approach. Each migration pattern is linked to the detailed documentation in references/api-migrations.md, which covers edge cases and provides before-and-after code examples for clarity.
In addition to the migration patterns, the skill emphasizes the importance of retaining .propTypes assignments for documentation and IDE tooling purposes, even though React 19 has removed built-in runtime checking. This ensures that developers can maintain type validation without losing critical information about component properties.
Overall, this skill is designed for React developers who need to efficiently update their applications to align with the latest React 19 features and best practices. It is particularly useful for teams managing large codebases that require systematic migration strategies.
When to use it
Use this skill when upgrading a React application to version 19 and needing to address API changes and migration patterns.
When not to use it
This skill is not suitable for projects that do not use React or for developers who are not upgrading to React 19.
What you can build with it
Upgrading a Large Codebase
When managing a large React application, this skill helps streamline the migration process by providing clear patterns for updating multiple files.
Maintaining Type Safety
Use this skill to ensure that your `.propTypes` remain intact while transitioning to React 19, maintaining type safety in your components.
Learning React 19 Changes
If you're new to React 19, this skill serves as a practical guide to understanding the key API changes and how to implement them.
How to install React 19 Migration Patterns
View source1. Install with the skills CLI
npx skills add github/awesome-copilot/react19-source-patterns --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by githubReact 19 Source Migration Patterns
Reference for every source-file migration required for React 19.
Quick Reference Table
| Pattern | Action | Reference |
|---|---|---|
ReactDOM.render(...) | → createRoot().render() | See references/api-migrations.md |
ReactDOM.hydrate(...) | → hydrateRoot(...) | See references/api-migrations.md |
unmountComponentAtNode | → root.unmount() | Inline fix |
ReactDOM.findDOMNode | → direct ref | Inline fix |
forwardRef(...) wrapper | → ref as direct prop | See references/api-migrations.md |
Component.defaultProps = {} | → ES6 default params | See references/api-migrations.md |
useRef() no arg | → useRef(null) | Inline fix add null |
| Legacy Context | → createContext | → api-migrations.md#legacy-context |
String refs this.refs.x | → createRef() | → api-migrations.md#string-refs |
import React from 'react' (unused) | Remove | Only if no React. usage in file |
PropTypes Rule
Do not remove .propTypes assignments. The prop-types package still works as a standalone validator. React 19 only removes the built-in runtime checking from the React package the package itself remains valid.
Add this comment above any .propTypes block:
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
Read the Reference
For full before/after code for each migration, read references/api-migrations.md. It contains the complete patterns including edge cases for forwardRef with useImperativeHandle, defaultProps null vs undefined behavior, and legacy context provider/consumer cross-file migrations.
Frequently asked questions about React 19 Migration Patterns
Similar skills
React Composition Patterns
Streamline your React component architecture with proven patterns.
Pester Should Migration
Easily convert Pester v5 assertions to v6 syntax.
Radix to Base UI Migration
Seamlessly migrate React components from Radix UI to Base UI.
Migrate Next.js to Vinext
Seamlessly transition your Next.js projects to Vinext.
WinUI 3 Migration Guide
Streamline your UWP to WinUI 3 migration process.
Refactor
Enhance code maintainability without altering behavior.