React Forms & Actions

What you'll learn

• Why Actions replace the controlled-input + onSubmit pattern
• How useActionState collapses three pieces of state into one
• How useFormStatus reads its parent form without prop drilling
• Optimistic UI with useOptimistic, and how reconciliation works
• Validation that survives an Action and pairs with schemas
• File uploads through FormData and multipart Actions
• Accessibility patterns for focus, errors, and aria-invalid

1. 01
   Forms before Actions

   The old controlled-input pattern, what was tedious about it, and what Actions are about to fix.
   13 min
2. 02
   What an Action is

   An async function passed to a form. The shape that works on the client, the server, and without JavaScript at all.
   16 min
3. 03
   useActionState

   One hook that holds the result of your last submit, the action to call next, and a pending flag.
   17 min
4. 04
   useFormStatus

   A child component peeking at whether its parent form is mid-submit, with no prop drilling.
   13 min
5. 05
   useOptimistic

   Showing the future before the server confirms it, and reconciling cleanly when the answer arrives.
   16 min
6. 06
   Validation

   Surface errors as return values from Actions, paired with schema validation in the same shape.
   15 min
7. 07
   File uploads

   Files in FormData, multipart Actions, and the small set of rules that make them work.
   13 min
8. 08
   Accessibility in form Actions

   Where focus goes after a submit, how screen readers learn about errors, and the aria-invalid story.
   15 min