Actions (transitions asynchrones)
React 🟡 MidDéfinition
Depuis React 19 (5 décembre 2024), une fonction asynchrone passée à startTransition ou à la prop action d'un <form> est une « Action ». React gère pour vous l'état pending, le séquencement, les erreurs (remontées à l'Error Boundary) et la réinitialisation du formulaire. Les hooks useActionState, useFormStatus et useOptimistic sont bâtis dessus.
Analogie
Un serveur de restaurant qui prend la commande, annonce « c'est en cours », et revient vous prévenir si la cuisine a un souci : vous n'avez plus à surveiller la porte.
Exemple de code
function UpdateName() {
const [name, setName] = useState('');
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
function handleSubmit() {
startTransition(async () => { // Action
const err = await updateName(name); // isPending géré par React
if (err) { setError(err); return; }
redirect('/profile');
});
}
return <button onClick={handleSubmit} disabled={isPending}>Enregistrer</button>;
}Cas d'usage
Toute mutation déclenchée par l'utilisateur (enregistrer, liker, supprimer) où l'on affichait auparavant un état isLoading manuel.
Anti-pattern
Termes liés
En entretien
Explique-moi ce qu'est une Action en React 19.
Depuis React 19 (5 décembre 2024), une fonction asynchrone passée à startTransition ou à la prop action d'un <form> est une Action : React gère pour vous l'état pending, le séquencement, les erreurs remontées à l'Error Boundary, et la réinitialisation du formulaire. Les hooks useActionState, useFormStatus et useOptimistic sont bâtis dessus.
Quel anti-pattern les Actions remplacent-elles ?
Gérer à la main isLoading/error avec trois useState pour chaque mutation déclenchée par l'utilisateur, alors qu'une Action fournit isPending et la propagation d'erreur automatiquement. Ça réduit le code répétitif autour de chaque bouton d'enregistrement ou de suppression.
Fiche mise à jour le 2026-09-27