Command Palette

Search for a command to run...

Hectal
Phase 19Advanced20 of 28 in React

React 19: Actions and Modern Forms

Everything new in React 19: async Actions, form actions, useActionState, useFormStatus, useOptimistic, document metadata, resource loading and the removals.

React 19 changed how React apps send data. Before it, every form needed the same hand-written code: preventDefault, an isSending flag, a try/catch, an error message, a reset. React 19 turns that pattern into a feature called Actions: async functions that React runs inside a transition, with the pending state, errors, ordering and form reset handled for you.

This phase starts with a full map of what changed in React 19 (including what was removed, so old code and tutorials make sense), then builds up the Actions family one piece at a time: async transitions, <form action>, useActionState, useFormStatus and useOptimistic. It ends with the smaller features that make everyday code shorter: <title> and <meta> inside components, stylesheet and script loading, ref as a prop, <Context> as a provider and the new error reporting options.

Every example runs live in React 19.2. The actions here are client functions that call a fake server with setTimeout. In Phase 20 the same hooks work with Server Functions ("use server"), where the action really runs on the server.

0/8 · 0%
8 topics ~3 h 24 code blocks & diagrams
Start with the first topic
1
19.1

What's New in React 19

React 19 (December 2024) added Actions and the form hooks, use, document metadata, resource loading, ref as a prop and <Context> as a provider, and removed long-deprecated APIs such as ReactDOM.render, string refs, legacy context, propTypes checks and defaultProps on function components; 19.1 and 19.2 added Owner Stacks, <Activity>, useEffectEvent and more.

23 min 3 code practice

2
19.2

Actions: Async Transitions

In React 19 startTransition accepts an async function: React calls it an Action, keeps isPending true until it finishes, sends errors it throws to the nearest error boundary, and lets the rest of the UI stay responsive while it waits.

23 min 3 code practice

3
19.3

Form Actions

Pass a function to <form action={fn}> (or formAction={fn} on a button) and React calls it with the form's FormData as an Action: no preventDefault, a pending state through the form hooks, and uncontrolled fields reset automatically when it succeeds; requestFormReset resets a form on demand.

23 min 3 code practice

4
19.4

useActionState

const [state, formAction, isPending] = useActionState(fn, initialState) wraps an action so React keeps whatever it returned last as state, tells you while it runs, and queues calls one after another; it is the standard way to show a form's result and validation errors.

23 min 3 code practice

5
19.5

useFormStatus

useFormStatus() from react-dom lets any component rendered inside a <form> read that form's submission status (pending, data, method, action) without props, which is how design-system submit buttons show their own loading state.

19 min 2 code practice

6
19.6

useOptimistic

useOptimistic(state, update?) shows a temporary, hoped-for version of some state while an Action runs; when the Action ends React drops the temporary value and shows the real state again, so a failed request reverts by itself.

20 min 2 code practice

7
19.7

Document Metadata and Resource Loading

In React 19 any component can render <title>, <meta> and <link> and React places them in the document <head>; stylesheets with a precedence and async scripts are inserted once in the right order, and preload, preinit, preconnect and prefetchDNS from react-dom tell the browser early about resources it will need.

21 min 3 code practice

8
19.8

Ref as a Prop, Context as Provider and Other Improvements

React 19 removes everyday friction: function components receive ref as a normal prop, ref callbacks can return a cleanup function, <Context value> is a provider, hydration errors show one message with a diff, custom elements get properties instead of strings, and createRoot takes error reporting callbacks.

25 min 5 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A newsletter form with a form action

Turn the newsletter form into a React 19 form action: pass an async function to <form action={...}> (no onSubmit).

Beginner
2

A reusable submit button with useFormStatus

Write a SubmitButton component that uses useFormStatus() from react-dom.

Intermediate
3

Signup errors with useActionState

Use useActionState(signup, initialState) for the signup form. signup(prevState, formData) is already written: it returns { errors, values } when something is wrong and { errors: {}, values: { username: "" }, message } on success.

Advanced
4

Optimistic likes that revert

The like counter waits 400 ms for the server before the number changes. Make it optimistic with useOptimistic: the number in #count goes up by one immediately when #like or #like-fail is clicked.

Advanced
5

Mini app: optimistic to-dos with a live title

Build a to-do list with a React 19 form action. The form has an input name="text" (id new-todo) and a submit button.

Advanced