Enhancing Forms with React Server Components

Scharff’s example uses the Next.js App Router, Prisma, and a local database. She connects a form’s action property to a server action that creates a message, then uses Next.js revalidatePath to refresh the displayed messages. The basic submission works without client JavaScript.

Scharff validates submitted data with Zod, checking that message content is present and the data has the expected structure. She shows that invalid data can throw an error caught by an error boundary, or return a structured error state for the form to display. Her example also limits each user to five messages.

The useActionState hook carries the server action’s result into the form, enabling an error message or toast. Scharff preserves submitted content after an error and uses the pending state to disable the button and show that a submission is underway. She keeps a no-script fallback so errors remain visible without JavaScript.

Scharff extracts the submit control into a reusable SubmitButton that reads the parent form’s status with useFormStatus. The same component can show a spinner in different forms, including a reset form whose server action deletes messages and revalidates the page.

With useOptimistic, Scharff displays a message immediately with a sending state while the server processes it. The server response replaces the optimistic state, and messages that fail the server-side limit are rolled back. She presents this as an optional enhancement based on application needs.