Agent skill · software engineering · github

react19-concurrent-patterns

Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.

Why this skill is useful

Provides specific migration patterns and safety rules for React 19 that the AI wouldn't reliably generate on its own.

What it needs

About 1k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.

What this skill does

React 19 Concurrent Patterns React 19 introduced new APIs that complement the migration work. This skill covers two concerns: 1. Preserve existing React 18 concurrent patterns that must not be broken during migration 2. Adopt new React 19 APIs worth introducing after migration stabilizes Part 1 Preserve: React 18 Concurrent Patterns That Must Survive the Migration These patterns exist in React 18 codebases and must not be accidentally removed or broken: createRoot Already Migrated by the R18 Orchestra If the R18 orchestra already ran, ReactDOM.render → createRoot is done. Verify it's correct: useTransition No Migration Needed useTransition from React 18 works identically in React 19. Do not touch these patterns during migration: useDeferredValue No Migration Needed Suspense for Code Splitting No Migration Needed --- Part 2 React 19 New APIs These are worth adopting in a post-migration cleanup sprint. Do not introduce these DURING the migration stabilize first. For full patterns on each new API, read: references/react19-use.md the use() hook for promises and context references/react19-actions.md Actions, useActionState, useFormStatus, useOptimistic references/react19-suspense.md Suspense for data fetching (the new pattern) Migration Safety Rules During the React 19 migration itself, these concurrent-mode patterns must be left completely untouched: If the migrator touched any of these files, review the changes the migration should only have modified React API surface (forwardRef, defaultProps, etc.), never concurrent mode logic.

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills github/react19-concurrent-patterns

View the source on GitHub

Browse the @skills marketplace