useTransition
React 🟡 MidDéfinition
Hook qui marque une mise à jour comme non urgente : React peut la différer pour garder l'interface réactive. Depuis React 19 (5 décembre 2024), startTransition accepte une fonction async : c'est une « Action », qui gère automatiquement l'état pending, les erreurs et les mises à jour optimistes.
Analogie
Comme un panneau 'en cours de rénovation' : les clients voient l'ancien décor pendant que tu renoves en arrière-plan.
Exemple de code
const [isPending, startTransition] = useTransition();
// React 18 : mise à jour lourde non urgente
startTransition(() => setFiltered(heavyFilter(query)));
// React 19 : Action asynchrone
function handleSave() {
startTransition(async () => {
const err = await updateName(name); // isPending = true pendant l'await
if (err) setError(err);
});
}Cas d'usage
Filtrage de longues listes, navigation entre onglets, et depuis React 19 toute mutation asynchrone (soumission, appel serveur) dont on veut l'état isPending sans state manuel.
Anti-pattern
Termes liés
En entretien
Explique-moi ce que fait useTransition.
Il marque une mise à jour comme non urgente, ce qui permet à React de la différer pour garder l'interface réactive, comme un panneau 'en cours de rénovation' où les clients voient l'ancien décor pendant que ça se rénove en arrière-plan. Depuis React 19, startTransition accepte aussi une fonction async, une Action qui gère automatiquement l'état pending, les erreurs et les mises à jour optimistes.
Quel est le piège classique avec useTransition ?
Envelopper des mises à jour urgentes comme la saisie de texte dans startTransition, ce qui rend l'input laggy. Il est plutôt fait pour du filtrage de longues listes, de la navigation entre onglets, ou une mutation asynchrone dont on veut l'état isPending.
Fiche mise à jour le 2026-09-27