useActionState

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

Termes liés

Sources

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