mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-11 10:45:56 +00:00
91 lines
2.8 KiB
Markdown
91 lines
2.8 KiB
Markdown
---
|
|
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.
|