Catalog
github/react19-source-patterns

github

react19-source-patterns

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

v1.0Latest
New~475Updated Jun 26, 2026

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.

Files2
2 files · 11.9 KB

Select a file to preview

Overall Score

88/100

Grade

A

Excellent

Safety

95

Quality

87

Clarity

88

Completeness

82

Summary

A comprehensive reference guide for React 19 migration patterns, documenting API changes, ref handling, context updates, and prop defaults. The skill provides before/after code examples and a migration checklist to guide developers through updating React 18/earlier codebases to React 19 compatibility.

Detected Capabilities

code reference readingpattern documentationcode example generationmigration path guidance

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

react 19 migrationupgrade react versionremove forwardrefcreateroot apilegacy context migrationref handling patternsreact 18 to 19

Use Cases

  • Migrate ReactDOM.render to createRoot API
  • Update forwardRef usage to direct ref props
  • Replace defaultProps with ES6 default parameters
  • Convert string refs to createRef or callback refs
  • Migrate legacy context API to createContext
  • Update useRef calls to include explicit null initializer
  • Remove unused React imports after JSX transform
  • Audit projects for React 19 breaking changes

Quality Notes

  • Excellent before/after code examples for each pattern with clear labeling
  • Comprehensive coverage of all major React 19 breaking changes documented in official release notes
  • Includes practical grep commands for automated detection of migration targets
  • Clear caveats and edge cases documented (e.g., defaultProps with null behavior, useImperativeHandle still valid)
  • Well-structured reference material with table of contents and cross-links
  • PropTypes retention rule is clearly explained with rationale
  • Checklist format at end provides systematic migration path
  • All referenced patterns include both old and new implementations side-by-side
Model: claude-haiku-4-5-20251001Analyzed: Jun 26, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Use github/react19-source-patterns in your dev environment

Command Palette

Search for a command to run...