Mastering React 19: Actions, useActionState, and Async Transitions

React 19: Simplifying Asynchronous UI

React 19 brings a cohesive mental model for state updates, form submissions, and optimistic UI transitions. The need for external mutation libraries or complex status states is dramatically reduced.

1. The Power of Native Actions

Actions in React 19 automatically manage pending states, error handling, and sequential executions:

import { useActionState } from "react";

async function updateProfile(prevState: any, formData: FormData) {
  const name = formData.get("name");
  const res = await saveProfile({ name });
  return res;
}

export function ProfileForm() {
  const [state, formAction, isPending] = useActionState(updateProfile, null);
  return (
    <form action={formAction}>
      <input name="name" defaultValue="Chánh Đang" />
      <button type="submit" disabled={isPending}>
        {isPending ? "Saving..." : "Save Changes"}
      </button>
      {state?.error && <p className="text-red-500">{state.error}</p>}
    </form>
  );
}

2. Optimistic UI with useOptimistic

Provide instantaneous feedback to users while background mutations complete:

• Render user actions instantly in the UI.
• Automatically revert back if the network request fails.
• Combine with Framer Motion for buttery smooth visual transitions.