react19-concurrent-patterns

# 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: ```jsx // CORRECT React 19 root (same as React 18): import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); ``` ### useTransition No Migration Needed `useTransition` from React 18 works identically in React 19. Do not touch these patterns during migration: ```jsx // React 18 useTransition unchanged in React 19: const [isPending, startTransition] = useTransition(); function handleClick() { startTransition(() => { setFilteredResults(computeExpensiveFilter(input)); }); } ``` ### useDeferredValue No Migration Needed ```jsx // React 18 useDeferredValue unchanged in React 19: const deferredQuery = useDeferredValue(query); ``` ### Suspense for Code Splitting No Migration Needed ```jsx // React 18 Suspense with lazy unchanged in React 19: const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <Suspense fallback={<Spinner />}> <LazyComponent /> </Suspense> ); } ``` --- ## 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**: ```bash # Verify nothing touched these during migration: grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \ src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." ``` 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.