react19-source-patterns
Helps your agent understand and apply React 19 source code changes. This includes API updates and how to handle references and contexts.
What it does
This guide helps you update your React code for version 19. It shows how to change specific code parts that stopped working or moved in the new version.
When to use it
- ✓When updating your React project to version 19.
- ✓When a part of your React code stops working after the update.
- ✓To understand necessary changes in specific files.
Example of what to ask your AI
“How do I update ReactDOM.render for React 19?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI compares your old code with React 19's migration patterns. It suggests the exact changes needed for each code part, like replacing `ReactDOM.render` with `createRoot().render()`.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill react19-source-patternsOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react19-source-patterns/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
React 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.
FAQ
Do I need to remove `.propTypes`?
No, you don't need to remove `.propTypes`. They still work as validators, but React 19 no longer runs them automatically. It's good to keep them for documentation and tooling.
What are 'String refs'?
These are an old way to reference elements in React (e.g., `this.refs.myElement`). React 19 suggests using `createRef()` instead.
What about `useRef()` with no argument?
If you use `useRef()` without an initial value, React 19 asks you to add `null` as the argument, making it `useRef(null)`.
Details
Original description by the author
Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5333
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC