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

Verify it's correct:

// 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 in React 19. Do not touch these patterns during migration:

// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}

useDeferredValue No Migration Needed

// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);

Suspense for Code Splitting No Migration Needed

// 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:

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