mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-12 19:25:55 +00:00
chore: publish from staged
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user