react19-source-patterns — GitHub Copilot skill: React 19
A reference for moving React source files to React 19, covering API changes, refs, context, and props. Useful during an existing project upgrade.
npx skills add github/awesome-copilot --skill react19-source-patternsWhat react19-source-patterns does
This skill helps review source patterns affected by a React 19 migration. It maps ReactDOM.render to createRoot().render(), ReactDOM.hydrate to hydrateRoot, and unmountComponentAtNode to root.unmount().
It also covers direct ref props instead of forwardRef, ES6 default parameters instead of defaultProps, useRef(null) instead of an empty call, and legacy Context migration to createContext. String refs move to createRef(). The reference keeps .propTypes assignments because the prop-types package still works as a standalone validator.
Install it when you are updating React code and need concrete source-file migration patterns. It is less useful for a small project that does not use these APIs.
What it helps with
- replace
ReactDOM.renderwithcreateRoot().render() - move server hydration to
hydrateRoot() - remove
findDOMNodein favor of a directref - migrate legacy Context to
createContext - check
defaultProps, string refs, anduseRef()calls
Example prompts for the agent
- Review this project for React 19 source migration patterns.
- Replace `ReactDOM.hydrate` and `unmountComponentAtNode` using the skill.
- Find places where `forwardRef` can become a direct `ref` prop.
How to install react19-source-patterns
1Skills CLI (Vercel)
npx skills add github/awesome-copilot --skill react19-source-patterns2GitHub CLI
gh skill install github/awesome-copilot react19-source-patterns3Manually: put the files in place
.github/skills/react19-source-patterns/SKILL.md1Skills CLI (Vercel)
npx skills add github/awesome-copilot --skill react19-source-patterns -a claude-code2Manually: put the files in place
~/.claude/skills/react19-source-patterns/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react19-source-patterns/
Manually: put the files in place
.agents/skills/react19-source-patterns/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/react19-source-patterns/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
Platform CLI
gemini skills install https://github.com/github/awesome-copilot --path skills/react19-source-patternsManually: put the files in place
.devin/skills/react19-source-patterns/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set554
The whole set →Similar
Questions about react19-source-patterns
How do I install react19-source-patterns in GitHub Copilot?
Run npx skills add github/awesome-copilot --skill react19-source-patterns or gh skill install github/awesome-copilot react19-source-patterns. The skill file is placed at .github/skills/react19-source-patterns/SKILL.md.
What does react19-source-patterns do?
It provides source migration patterns for React 19. The reference covers ReactDOM APIs, refs, Context, defaultProps, useRef(), and .propTypes.
Should `.propTypes` be removed during a React 19 migration?
No. The skill keeps .propTypes assignments because the prop-types package remains a standalone validator. It also suggests a comment that clarifies the runtime validation change.
Source text
SKILL.md · MIT
---
name: react19-source-patterns
description: 'Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.'
---
# 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](references/api-migrations.md#legacy-context) |
| String refs `this.refs.x` | → `createRef()` | [→ api-migrations.md#string-refs](references/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:
```jsx
// 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.
© github · MIT · github/awesome-copilot