MR
Mayur Rathi
@github
⭐ 34.1k GitHub stars

React19-Source-Patterns

React19-Source-Patterns是一款code方向的AI技能,核心价值是Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates,可用于解决开发者在code领域的实际问题,帮助用户提升效率、自动化重复任务或优化工作流。

Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.

Last verified on: 2026-05-30
mkdir -p ./skills/react19-source-patterns && curl -sfL https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react19-source-patterns/SKILL.md -o ./skills/react19-source-patterns/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

# 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.

🎯 Best For

  • Claude users
  • GitHub Copilot users
  • Software engineers
  • Development teams
  • Tech leads

💡 Use Cases

  • React component optimization
  • Hook dependency audits

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude or GitHub Copilot and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply React19-Source-Patterns to Your Work

    Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.

  4. 4

    Review and Refine

    Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.

❓ Frequently Asked Questions

Is React19-Source-Patterns compatible with Cursor and VS Code?

Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.

Do I need specific dependencies for React19-Source-Patterns?

Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.

How do I install React19-Source-Patterns?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/react19-source-patterns/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Skipping validation

Always test AI-generated code changes, even for simple refactors.

Missing dependency updates

Check if the skill requires updated dependencies or new packages.

🔗 Related Skills