Optimistic UI and Pending States with Server Actions
Build snappy interfaces by combining Server Actions with useOptimistic, useFormStatus, and useTransition for instant feedback.
Why Optimistic UI
Server Actions involve a network round trip. Optimistic UI updates the screen immediately as if the action succeeded, then reconciles with the real result for a fast feel.
Pending State with useFormStatus
The useFormStatus hook reads whether the parent form is submitting, letting you disable buttons or show spinners.
"use client";
import { useFormStatus } from "react-dom";
export function Submit() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>;
}All lessons in this course
- Basic Server Action Forms
- Mutating Data & Revalidation
- Error Handling in Actions
- Optimistic UI and Pending States with Server Actions