Handling Forms via Form Actions

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, typed Reactive Forms, inject(), @if/@for). API calls live in a service class.

Builds on Working with Forms & User Input (FormData, uncontrolled inputs, validation). In Next.js, the same hooks work with Server Actions (see Next.js, Entry 9).

Test yourself

15 questions

1
Form Actions: <form action={fn}>
In React 19, a form's action prop can be a function. React calls it with the form's FormData when the form is submitted.
2
Validating Inside an Action
Checking the submitted values in the action function and collecting error messages to show the user.
3
useActionState: Action Results as State
useActionState(action, initialState, permalink?) wraps an action so that whatever it returns becomes component state. It returns [state, formAction, isPending].
4
Automatic Reset and Keeping Entered Values
After a form action finishes, React resets the form's uncontrolled fields. To keep what the user typed (for example, after validation errors), return the values from the action and use them as defaultValue.
5
Async Actions and Pending State
An action can be async. While it runs, isPending (from useActionState) is true.
6
useFormStatus: Pending State in Child Components
useFormStatus() (from react-dom) returns the submission status of the parent <form>: { pending, data, method, action }.
7
Multiple Submit Buttons with formAction
A <button formAction={fn}> overrides the form's action for that button, so one form can trigger different actions.
8
useOptimistic: Instant UI Before the Server Responds
useOptimistic(state, updateFn) returns a temporary copy of state that you can change immediately while an action runs. When the action finishes, it switches back to the real state.
9
Choosing Between Actions and onSubmit
React 19 offers two submission styles: form actions (uncontrolled, FormData) and onSubmit handlers (often with controlled state).
10
Summary