How would you model pending, validation, and success state for a Server Action form?

Uses semantic forms, action state, pending feedback, server validation, focus behavior, and progressive enhancement.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I submit a semantic form to a Server Action and use useActionState for the action's structured result. A submit component can read useFormStatus to show pending state and prevent accidental duplicate intent. The server validates the FormData and returns field or form errors as expected data, while a successful action redirects or returns a clear success state.

Full answer below

Practice focus

React 19 form Actions, useActionState, useFormStatus, validation, accessibility, and mutation UX.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
A good form remains understandable before hydration, during a request, after expected errors, and after success.
I submit a semantic form to a Server Action and use useActionState for the action's structured result. A submit component can read useFormStatus to show pending state and prevent accidental duplicate intent. The server validates the FormData and returns field or form errors as expected data, while a successful action redirects or returns a clear success state.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
Inputs keep labels, descriptions, and stable names so the form still submits through progressive enhancement. Errors are associated with their fields and a summary or status message uses an appropriate live region without stealing focus on every render. I disable only controls that truly must pause, preserve correct user input after a validation failure, and never rely solely on client validation. Unexpected exceptions go to the nearest error boundary instead of being disguised as a validation message.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Treating the browser required attribute as server validation.
Using thrown exceptions for ordinary field errors.
Disabling the whole form without preserving context or focus.

How would you model pending, validation, and success state for a Server Action form?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Next interviewer turn

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?