useActionState

Allows to update state based on the result of a form action. It receives an async or sync action function and an initial state, returning the current state, a wrapped action handler, and a pending status indicator.

import { useActionState } from 'react';

// Action receives previous state and form data
const action = async (previousState, formData) => {
    const name = formData.get('name');
    if (!name) return 'Name is required';
    await save(name);
    return 'Saved successfully!';
};

export const MyComponent = () => {
    const [message, formAction, isPending] = useActionState(action, '');

    return (
        <form action={formAction}>
            <input name="name" type="text" />
            <button type="submit" disabled={isPending}>Save</button>
            {message && <p>{message}</p>}
        </form>
    );
};