AutoGineer
Generated banner for React19 Source Patterns
Generated logo for React19 Source Patterns

React19 Source Patterns

GitHubOfficialFirst committed by SaravananRajaramanDistributed by GitHub

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

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

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/github/react19-source-patterns/download

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

PatternActionReference
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 refInline fix
forwardRef(...) wrapper→ ref as direct propSee references/api-migrations.md
Component.defaultProps = {}→ ES6 default paramsSee 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)RemoveOnly 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.md

Attribution

This folder is an unmodified copy of the Agent Skill "react19-source-patterns", distributed by AutoGineer (https://autogineer.com/agent-skills).

The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.

Files added by AutoGineer

  • ATTRIBUTION.md: this file, written by AutoGineer

  • LICENSE: copied from LICENSE

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.

Attribution and licence

First committed by
GitHub avatar of SaravananRajaramanSaravananRajaraman
Publisher
GitHub (Official)
Distributed by
GitHub
Source
github/awesome-copilot · skills/react19-source-patterns · commit 797337f
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Contributors
SaravananRajaraman

AutoGineer is not affiliated with or endorsed by SaravananRajaraman or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react19-source-patterns.zip