useActionState og useFormStatus

useActionState(action, initialState) er en React 19-hook, der omslutter en Server Action for at spore dens tilstand på tværs af afsendelser. Den tager funktionshandlingen og en starttilstand som argumenter og returnerer en tuple, som du kan bruge til at styre hele formularoplevelsen.

Hooket returnerer [state, formAction, isPending]. state indeholder handlingens seneste returværdi og starter som null eller din startværdi. formAction er den indpakkede handling, som du skal give til formularen. isPending er true, mens handlingen udføres på serveren.

Hver gang formularen sendes, kører Server Action, og dens returværdi bliver den nye state. Ved den første gengivelse er state lig med initialState. Det gør det nemt at vise forskellig brugerflade afhængigt af, om der har været tidligere afsendelser, og hvad de returnerede.

Hvis Server Action returnerer { errors: { email: 'Invalid email' } }, kan du vise fejlen direkte i formularen: {state.errors?.email && <p>{state.errors.email}</p>}. Fordi tilstanden bevares på tværs af nye gengivelser, forbliver fejlmeddelelsen synlig, indtil den næste vellykkede afsendelse erstatter tilstanden.

Når handlingen returnerer { success: true }, kan komponenten gengive en succesmeddelelse: {state?.success && <p>Form submitted!</p>}. Formularen kan skjules betinget eller erstattes af succesmeddelelsen baseret på tilstandsværdien.

useFormStatus() er en hook, der læser ventetilstanden for det nærmeste overordnede <form>-element. Den returnerer et objekt, der blandt andet indeholder { pending: boolean }. Denne hook skal bruges i en komponent, der er et underordnet element af formularen — ikke i komponenten, der selv gengiver formularen.

Begrænsningen om, at useFormStatus skal bruges inde i formularen, findes, fordi hooken læser formularens kontekst fra React-træet over sig. Hvis den blev kaldt i den samme komponent, som gengiver formularen, ville den være et søskendeelement til formularen, ikke en efterkommer, og ville derfor ikke have adgang til formularens tilstand.

Standardmønstret er at udtrække indsendelsesknappen til sin egen komponent: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Denne komponent placeres derefter inde i formularen, så den får adgang til formularens ventetilstand.

Hvis du sætter disabled={pending} på indsendelsesknappen, forhindrer det dobbeltafsendelser. Når du klikker på indsend, og Server Action udføres, er pending true, så knappen deaktiveres og ikke kan klikkes på. Når handlingen er færdig, bliver pending igen false, og knappen aktiveres.

Det komplette mønster for formularoplevelsen kombinerer begge hooks: useActionState i formularkomponenten sporer resultatet af handlingen og leverer formAction, mens useFormStatus i en underordnet SubmitButton-komponent sporer ventetilstanden. Sammen giver de valideret visning af fejl og en indsendelsesknap, der reagerer med det samme.

Hvis du ønsker en endnu mere responsiv oplevelse, kan useOptimistic kombineres med useActionState. Du opdaterer straks brugerfladen med det forventede resultat, før serveren svarer, og afstemmer den derefter, når det faktiske svar ankommer. Dette mønster er almindeligt i knapper til synes godt om, opgavelister og andre interaktioner med hurtig feedback.

useActionState(action, initialState) returnerer [state, formAction, isPending] for at spore resultater fra Server Actions. Tilstanden indeholder handlingens returværdi, så du kan vise fejl og succes direkte i formularen. useFormStatus() leverer { pending } i underordnede komponenter i formularen, så indsendelsesknapper kan reagere med det samme. Tilsammen skaber de to hooks en komplet og tilgængelig formularoplevelse.