Actions (transitions asynchrones)

Dé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

Sources

• react.dev/blog/2024/12/05/react-19