Modèles concurrents React 19

React 19 a introduit de nouvelles API qui complètent le travail de migration. Cette skill couvre deux préoccupations :

Préserver les modèles concurrents React 18 existants qui ne doivent pas être cassés pendant la migration
Adopter les nouvelles API React 19 qui valent la peine d'être introduites après la stabilisation de la migration

Part 1 Préserver : les modèles concurrents React 18 qui doivent survivre à la migration

Ces modèles existent dans les bases de code React 18 et ne doivent pas être accidentellement supprimés ou cassés :

createRoot Déjà migré par l'orchestrateur R18

Si l'orchestrateur R18 a déjà été exécuté, ReactDOM.render → createRoot est fait. Vérifiez que c'est correct :

// Racine React 19 CORRECTE (identique à React 18) :
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

useTransition Aucune migration nécessaire

useTransition de React 18 fonctionne de manière identique dans React 19. Ne touchez pas à ces modèles pendant la migration :

// useTransition React 18  inchangé dans React 19 :
const [isPending, startTransition] = useTransition();

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

useDeferredValue Aucune migration nécessaire

// useDeferredValue React 18  inchangé dans React 19 :
const deferredQuery = useDeferredValue(query);

Suspense pour le fractionnement de code Aucune migration nécessaire

// Suspense React 18 avec lazy  inchangé dans React 19 :
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Part 2 Nouvelles API React 19

Celles-ci valent la peine d'être adoptées dans un sprint de nettoyage post-migration. Ne les introduisez PAS pendant la migration — stabilisez d'abord.

Pour les modèles complets de chaque nouvelle API, consultez :

references/react19-use.md le hook use() pour les promises et le contexte
references/react19-actions.md Actions, useActionState, useFormStatus, useOptimistic
references/react19-suspense.md Suspense pour la récupération de données (le nouveau modèle)

Règles de sécurité de migration

Pendant la migration React 19 elle-même, ces modèles de mode concurrent doivent être laissés complètement intouchés :

# Vérifiez que rien n'a touché à ces éléments pendant la migration :
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Si le migrateur a touché l'un de ces fichiers, examinez les modifications — la migration ne doit avoir modifié que la surface de l'API React (forwardRef, defaultProps, etc.), jamais la logique du mode concurrent.

react19-concurrent-patterns