react19-concurrent-patterns · React19并发模式迁移指南

先看看示例

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

输出

方法说明

---
name: react19-concurrent-patterns
description: 'Preserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.'
---

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