useFormStatus

React 🟡 Mid

Definition

Hook qui donne l'etat de soumission du formulaire parent (pending, data, method, action). Doit etre utilise dans un composant enfant du <form>.

Analogie

Comme un indicateur lumineux sur une machine a cafe : il te dit si elle est en train de preparer (pending) ou prete.

Exemple de code

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? 'Envoi...' : 'Envoyer'}
    </button>
  );
}

Cas d'usage

Desactiver le bouton submit et afficher un spinner pendant la soumission d'un formulaire avec Server Actions.

Anti-pattern

Utiliser useFormStatus dans le meme composant que le <form> : il doit etre dans un enfant.
#hooks#react19#forms