30
React Forms & Actions

React Forms & Actions

Learn the React 19 form story end-to-end. Eight lessons, the new pattern as default, the old one only for context.

~ 120 min·8 lessons·updated apr 2026

What you'll learn


Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

8 lessons · ~118 min total

  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

Prerequisites

  • · Finished React Hooks In Depth
  • · Comfortable with controlled inputs
  • · Have submitted an HTML form before

After this, try