Motifs de batching automatique React 18
Référence pour diagnostiquer et corriger le changement brisé silencieux le plus dangereux de React 18 pour les bases de code utilisant des class components.
Le changement fondamental
| Localisation de setState | React 17 | React 18 |
|---|---|---|
| Gestionnaire d'événement React | Batched | Batched (identique) |
| setTimeout | Re-rendu immédiat | Batched |
| Promise .then() / .catch() | Re-rendu immédiat | Batched |
| async/await | Re-rendu immédiat | Batched |
| Callback Native addEventListener | Re-rendu immédiat | Batched |
Batched signifie : tous les appels setState dans ce contexte d'exécution se vident ensemble en un seul re-rendu à la fin. Aucun rendu intermédiaire n'intervient.
Diagnostic rapide
Lisez chaque méthode async de class. Demandez-vous : du code après un await lit-il this.state pour prendre une décision ?
Le code lit this.state après await ?
OUI → Catégorie A (bug silencieux de lecture d'état)
NON, mais un rendu intermédiaire doit être visible pour l'utilisateur ?
OUI → Catégorie C (flushSync nécessaire)
NON → Catégorie B (refactoriser, pas de flushSync)Pour le motif complet de chaque catégorie, lisez :
references/batching-categories.md- Catégories A, B, C avec code avant/après completreferences/flushSync-guide.md- quand utiliser flushSync, quand NE PAS l'utiliser, syntaxe d'import
La règle flushSync
Utilisez flushSync avec parcimonie. Cela force un re-rendu synchrone, contournant le scheduler concurrent de React 18. En abuser annule les bénéfices de performance de React 18.
Utilisez flushSync uniquement quand :
- L'utilisateur doit voir un état d'interface intermédiaire avant le début d'une opération async
- Un spinner/état de chargement doit s'afficher avant qu'une fetch ne commence
- Les étapes d'interface séquentielles ont des états visibles distincts (assistant de progression, flux multi-étapes)
Dans la plupart des cas, la correction est un refactorisation - restructurer le code pour ne pas lire this.state après await. Lisez references/batching-categories.md pour l'approche correcte selon la catégorie.