next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
Integrations
  • Form Integration
  • React Hook Form
  • TanStack Query
Framework
  • Navigation & Framework
  • GitHub

Optimistic Updates

useOptimisticAction with instant UI updates and revalidation callbacks.

Optimistic Todo List
useOptimisticAction with currentState/updateFn, items appear instantly before server confirms.

No todos yet.

Status:Idle
Optimistic state:
{
  "todos": []
}
Revalidation + Callbacks
revalidatePath/revalidateTag with transition states.
isTransitioning: falseisPending: false
Status:Idle
Result:
{}

Loading snapshots...

Live server snapshot

{
  "mutationCount": 0,
  "pathRevalidationCount": 0,
  "tagRevalidationCount": 0,
  "lastMutationKind": null,
  "lastMutationAt": null,
  "readAt": "2026-06-20T13:58:15.995Z"
}

Tagged snapshot (playground-revalidation)

{
  "mutationCount": 0,
  "pathRevalidationCount": 0,
  "tagRevalidationCount": 0,
  "lastMutationKind": null,
  "lastMutationAt": null,
  "cachedAt": "2026-06-20T13:58:16.090Z"
}