React19 Source Patterns — Agent Skill by GitHub

From the author

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

— the description by SaravananRajaraman

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured set of migration patterns and best practices for updating React source code to version 19. It covers breaking API changes, the removal of legacy methods, and modern approaches to handling refs, context, and component properties. The guide includes a quick reference table for common tasks and detailed before-and-after code examples to ensure a smooth transition to the latest React standards.

What it does

Provides migration patterns for ReactDOM root and hydration APIs.
Outlines replacements for removed APIs like findDOMNode and unmountComponentAtNode.
Demonstrates how to modernize forwardRef usage by passing refs as standard props.
Offers guidance on handling legacy context and string refs.
Clarifies the status of PropTypes in React 19.
Provides instructions for updating defaultProps to ES6 default parameters.

When to use it

When upgrading an existing React codebase to version 19.
When refactoring components to remove deprecated React APIs.
When needing to verify correct implementation of the new root-based rendering patterns.
When standardizing component property handling and ref management.

Advantages

Reduces manual effort by providing clear before-and-after code examples.
Ensures consistency across the codebase during the migration process.
Helps developers avoid common pitfalls with removed APIs.
Provides clear documentation on how to maintain PropTypes for tooling purposes.

Usage examples

“How do I update my ReactDOM.render call for React 19?”: The agent provides the pattern to switch from ReactDOM.render to createRoot().render, including the necessary import changes from react-dom/client.
“What should I do about findDOMNode in my class components?”: The agent explains that findDOMNode is removed and guides the user to refactor the component to use React.createRef() and direct DOM node access.
“How do I handle PropTypes in React 19?”: The agent confirms that PropTypes are still valid for documentation and IDE support, and provides the required comment to include above propTypes blocks.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/react19-source-patterns/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip react19-source-patterns.zip -d .agents/skills

Documentation by SaravananRajaraman

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.

Files

ATTRIBUTION.mdAdded by AutoGineer899 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.9 KiB
references/api-migrations.md10.9 KiB

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k