React 19 Actions, useActionState & useOptimistic

React 19 Native Form Actions

React 19 introduces native support for asynchronous functions in <form action={...}> alongside useActionState and useOptimistic.

import { useActionState, useOptimistic } from 'react';

async function updateProfile(prevState, formData) {
    const name = formData.get('name');
    await fetch('/api/user', { method: 'POST', body: JSON.stringify({ name }) });
    return { name };
}

export function ProfileForm({ initialName }) {
    const [state, formAction, isPending] = useActionState(updateProfile, { name: initialName });
    const [optimisticName, setOptimisticName] = useOptimistic(state.name, (current, update) => update);

    return (
        <form action={async (formData) => {
            setOptimisticName(formData.get('name'));
            await formAction(formData);
        }}>
            <h2>Hello, {optimisticName}</h2>
            <input name="name" defaultValue={state.name} />
            <button disabled={isPending}>{isPending ? 'Saving...' : 'Update'}</button>
        </form>
    );
}