Master React 19 form actions with useActionState, useFormStatus, useOptimistic, and the new use() resource-reading API
0 / 5 completed
1 / 5
What does the new useActionState hook return in React 19?
useActionState: returns [state, formAction, isPending]. You give it an action (prevState, formData) => newState and an initial state. The returned formAction is wired to a form's action prop; React tracks the transition and exposes isPending so you do not need a separate loading flag.
2 / 5
How does the useFormStatus hook obtain submission state?
useFormStatus: reads the last form submission via context, so a submit button rendered deep inside a form can show a spinner without prop-drilling. It returns { pending, data, method, action }. It must be called from a component rendered inside the <form>, not the component that renders the form itself.
3 / 5
What does the useOptimistic hook do?
useOptimistic: returns [optimisticValue, addOptimistic]. While an action runs, you call addOptimistic with a provisional value so the UI updates instantly. When the action settles and React re-renders, the optimistic value is discarded in favour of the actual state — giving snappy UX without manual rollback code.
4 / 5
What is special about an action passed to a form's action prop in React 19?
Form actions: passing a function to <form action={fn}> tells React to call it with the submitted FormData inside a transition. React handles the pending state and resets uncontrolled fields after a successful submit. The action may be a client function or a Server Action; with Server Actions, forms also work before hydration (progressive enhancement).
5 / 5
What does the use API allow in React 19?
use(): reads a resource. const value = use(promise) suspends the component until the promise resolves, integrating with Suspense. use(MyContext) reads context. Unlike traditional hooks, use is exempt from the rules of hooks — it can appear inside conditionals and loops, making conditional context reads and inline promise consumption possible.