useActionState og useFormStatus

useActionState(action, initialState) er en React 19-hook som pakker inn en Server Action for å spore tilstanden på tvers av innsendinger. Den tar action-funksjonen og en startverdi for tilstanden som argumenter, og returnerer en tuppel du kan bruke til å styre hele skjemaforløpet.

Hooken returnerer [state, formAction, isPending]. state inneholder den siste returverdien fra Server Action-en og starter som null eller startverdien din. formAction er den innpakkede actionen som skal sendes til skjemaet. isPending er true mens actionen kjører på serveren.

Hver gang skjemaet sendes inn, kjøres Server Action-en, og returverdien blir den nye state. Ved første gjengivelse er state lik initialState. Dette gjør det enkelt å vise forskjellig brukergrensesnitt avhengig av om det har vært tidligere innsendinger, og hva de returnerte.

Hvis Server Action-en returnerer { errors: { email: 'Invalid email' } }, kan du vise feilen direkte i skjemaet: {state.errors?.email && <p>{state.errors.email}</p>}. Fordi tilstanden bevares mellom nye gjengivelser, forblir feilmeldingen synlig til neste vellykkede innsending erstatter tilstanden.

Når actionen returnerer { success: true }, kan komponenten vise en suksessmelding: {state?.success && <p>Form submitted!</p>}. Skjemaet kan skjules eller erstattes av suksessmeldingen basert på tilstandsverdien.

useFormStatus() er en hook som leser ventetilstanden til det nærmeste overordnede <form>-elementet. Den returnerer et objekt som blant annet inneholder { pending: boolean }. Denne hooken må brukes i en komponent som er underordnet skjemaet — ikke i komponenten som selv gjengir skjemaet.

Begrensningen om at useFormStatus må brukes inne i skjemaet, finnes fordi hooken leser skjemaets kontekst fra React-treet over seg. Hvis den kalles i den samme komponenten som gjengir skjemaet, ville den vært et søsken til skjemaet, ikke en underordnet komponent, og ville ikke hatt tilgang til skjemaets tilstand.

Standardmønsteret er å trekke sendeknappen ut i en egen komponent: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Denne komponenten plasseres deretter inne i skjemaet, slik at den får tilgang til skjemaets ventetilstand.

Hvis du setter disabled={pending} på sendeknappen, forhindrer du doble innsendinger. Når brukeren klikker på sendeknappen og Server Action-en kjører, er pending lik true, og knappen blir deaktivert og kan ikke klikkes. Når actionen er fullført, blir pending false igjen, og knappen aktiveres på nytt.

Det fullstendige UX-mønsteret for skjemaer kombinerer begge hookene: useActionState i skjemakomponenten sporer resultatet av actionen og gir formAction, mens useFormStatus inne i en underordnet SubmitButton-komponent sporer ventetilstanden. Sammen gir de visning av valideringsfeil og en responsiv sendeknapp.

For en enda mer responsiv opplevelse kan useOptimistic kombineres med useActionState. Du oppdaterer brukergrensesnittet umiddelbart med det forventede resultatet før serveren svarer, og samordner det deretter når det faktiske svaret kommer. Dette mønsteret er vanlig i likerknapper, todo-lister og andre interaksjoner som gir rask tilbakemelding.

useActionState(action, initialState) returnerer [state, formAction, isPending] for å spore resultater fra Server Actions. Tilstanden inneholder actionens returverdi, slik at du kan vise feil og suksesser direkte i skjemaet. useFormStatus() gir { pending } i underordnede komponenter i skjemaet, slik at du kan lage responsive sendeknapper. Sammen gir hookene en komplett og tilgjengelig skjemaløsning.