React 19 Actions and useOptimistic: The Future of Forms

What Are Actions?

React 19 introduces Actions – async functions passed to action prop on <form>. React manages pending states, errors, and optimistic updates automatically.

Basic Form Action

function UpdateName() {
  async function updateName(formData) {
    const name = formData.get('name');
    await updateUser(name);
  }
return (
<form action={updateName}>
<input name=“name” />
<button type=“submit”>Update</button>
</form>
);
}

useOptimistic Hook

function Thread({ messages, sendMessage }) {
const [optimisticMessages, addOptimistic] = useOptimistic(
messages,
(state, newMsg) => […state, { …newMsg, sending: true }]
);

async function formAction(formData) {
const message = formData.get(‘message’);
addOptimistic({ text: message });
await sendMessage(message);
}
return (
<>
{optimisticMessages.map(m => <Message key={m.id} {…m} />)}
<form action={formAction}><input name=“message” /></form>
</>
);
}

useFormStatus (in child components)

function SubmitButton() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? ‘Saving…’ : ‘Submit’}</button>;
}

Performance Impact

Actions reduce boilerplate by 60% compared to manual loading/error state management. Optimistic updates make UI feel instant.

Interview Q&A

Q: How is useOptimistic different from just setting state optimistically? useOptimistic automatically rolls back if the async action fails.
Q: Can Actions work with Server Actions (Next.js)? Yes – same API works on client and server.

Conclusion

React 19 Actions make form handling and mutations declarative. Adopt now – they’re stable.