useActionState

React 🟡 Mid

Définition

Hook stable de React 19 (5 décembre 2024) qui remplace l'ancien useFormState. Il enveloppe une Action et retourne [state, dispatch, isPending] : l'Action reçoit l'état précédent et le payload (souvent un FormData), et son retour devient le nouvel état. Un troisième argument permalink permet la soumission avant hydratation (progressive enhancement).

Analogie

Un formulaire papier qu'on renvoie avec, agrafé dessus, le dernier accusé de réception : on sait toujours où l'on en est.

Exemple de code

'use client';
import { useActionState } from 'react';
import { updateName } from './actions'; // Server Function

function Form() {
  const [state, submitAction, isPending] = useActionState(
    async (prev, formData) => ({ error: await updateName(formData.get('name')) ?? null }),
    { error: null }
  );
  return <form action={submitAction}>
    <input name="name" />
    <button disabled={isPending}>Valider</button>
    {state.error && <p>{state.error}</p>}
  </form>;
}

Cas d'usage

Formulaire avec erreurs de validation renvoyées par le serveur et bouton désactivé pendant l'envoi, sans état local manuel.

Anti-pattern

Appeler dispatch hors d'une transition ou d'une prop action (React l'exige), ou passer un état initial non sérialisable avec une Server Function.

Termes liés

#hooks#react19#forms#interview

En entretien

Explique-moi ce que fait useActionState.
C'est un hook stable de React 19 (5 décembre 2024) qui remplace useFormState : il enveloppe une Action et retourne [state, dispatch, isPending], l'Action recevant l'état précédent et le payload, souvent un FormData. C'est comme un formulaire papier renvoyé avec, agrafé dessus, le dernier accusé de réception.
Quel piège éviter avec useActionState ?
Appeler dispatch hors d'une transition ou d'une prop action, ce que React exige, ou passer un état initial non sérialisable avec une Server Function. C'est utile typiquement pour un formulaire dont les erreurs de validation viennent du serveur, avec un bouton désactivé pendant l'envoi.

Sources

Fiche mise à jour le 2026-09-27