useActionState en useFormStatus

useActionState(action, initialState) is een React 19-hook die een Server Action omwikkelt om de status ervan tussen inzendingen bij te houden. De hook ontvangt de actiefunctie en een beginwaarde voor de status en retourneert een tuple waarmee je de volledige formulierervaring kunt aansturen.

De hook retourneert [state, formAction, isPending]. state bevat de meest recente geretourneerde waarde van de actie, aanvankelijk null of je beginwaarde. formAction is de omwikkelde actie die je aan het formulier doorgeeft. isPending is true zolang de actie op de server wordt uitgevoerd.

Elke keer dat het formulier wordt verzonden, wordt de Server Action uitgevoerd en wordt de geretourneerde waarde de nieuwe state. Tijdens de eerste render is state gelijk aan initialState. Hierdoor kun je eenvoudig een verschillende gebruikersinterface tonen afhankelijk van de vraag of er eerdere inzendingen zijn geweest en wat deze hebben geretourneerd.

Als de Server Action { errors: { email: 'Invalid email' } } retourneert, kun je de fout inline weergeven: {state.errors?.email && <p>{state.errors.email}</p>}. Omdat de status tussen renders behouden blijft, blijft de foutmelding zichtbaar totdat de status door de volgende geslaagde inzending wordt vervangen.

Wanneer de actie { success: true } retourneert, kan de component een succesmelding renderen: {state?.success && <p>Form submitted!</p>}. Je kunt het formulier voorwaardelijk verbergen of vervangen door de succesmelding op basis van de statuswaarde.

useFormStatus() is een hook die de wachtstatus leest van het dichtstbijzijnde bovenliggende <form>-element. De hook retourneert een object met onder andere { pending: boolean }. Je moet deze hook gebruiken binnen een component die een kind van het formulier is, niet in de component die het formulier zelf rendert.

De beperking dat useFormStatus binnen het formulier moet worden gebruikt, bestaat omdat de hook de context van het formulier uit de React-boom erboven leest. Als je de hook aanroept in dezelfde component die het formulier rendert, is deze een broer van het formulier en geen afstammeling. Daardoor heeft de hook geen toegang tot de status van het formulier.

Het standaardpatroon is om de verzendknop uit te breiden tot een eigen component: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Vervolgens plaats je deze component binnen het formulier, zodat deze toegang krijgt tot de wachtstatus van het formulier.

Door disabled={pending} in te stellen op de verzendknop voorkom je dubbele inzendingen. Wanneer de gebruiker op Verzenden klikt en de Server Action wordt uitgevoerd, is pending true, waardoor de knop wordt uitgeschakeld en niet kan worden aangeklikt. Wanneer de actie is voltooid, wordt pending weer false en wordt de knop opnieuw ingeschakeld.

Het volledige patroon voor een goede formulierervaring combineert beide hooks: useActionState in de formuliercomponent houdt het actieresultaat bij en levert formAction, terwijl useFormStatus in een onderliggende SubmitButton-component de wachtstatus bijhoudt. Samen zorgen ze voor een duidelijke weergave van validatiefouten en een responsieve verzendknop.

Voor een nog snellere gebruikerservaring werkt useOptimistic samen met useActionState. Je werkt de gebruikersinterface onmiddellijk bij met het verwachte resultaat voordat de server antwoordt en stemt deze vervolgens af wanneer het werkelijke antwoord binnenkomt. Dit patroon komt vaak voor bij vind-ik-leuk-knoppen, takenlijsten en andere interacties die snel feedback geven.

useActionState(action, initialState) retourneert [state, formAction, isPending] om de resultaten van Server Actions bij te houden. De status bevat de geretourneerde waarde van de actie, waarmee je inline fouten en succesmeldingen kunt tonen. useFormStatus() levert { pending } binnen kindcomponenten van het formulier, zodat je responsieve verzendknoppen kunt maken. Samen zorgen beide hooks voor een volledige, toegankelijke formulierervaring.