npx skills add ...
npx skills add github/awesome-copilot --skill react19-concurrent-patterns
npx skills add github/awesome-copilot --skill react19-concurrent-patterns
Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.
React 19 introduced new APIs that complement the migration work. This skill covers two concerns:
These patterns exist in React 18 codebases and must not be accidentally removed or broken:
If the R18 orchestra already ran, ReactDOM.render → createRoot is done. Verify it's correct:
useTransition from React 18 works identically in React 19. Do not touch these patterns during migration:
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 contextreferences/react19-actions.md Actions, useActionState, useFormStatus, useOptimisticreferences/react19-suspense.md Suspense for data fetching (the new pattern)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.
// React 18 useTransition unchanged in React 19:
const [isPending, startTransition] = useTransition();
function handleClick() {
startTransition(() => {
setFilteredResults(computeExpensiveFilter(input));
});
}// React 18 useDeferredValue unchanged in React 19:
const deferredQuery = useDeferredValue(query);// React 18 Suspense with lazy unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
);
}# Verify nothing touched these during migration:
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."