next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
Forms
  • Form Integration
  • React Hook Form
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 callback timeline showing transition states.
isTransitioning: falseisPending: false
Status:Idle
Result:
{}

Callback Timeline

No callback events yet. Execute an action to see them here.

Loading snapshots...

Live server snapshot

{
  "mutationCount": 0,
  "pathRevalidationCount": 0,
  "tagRevalidationCount": 0,
  "lastMutationKind": null,
  "lastMutationAt": null,
  "readAt": "2026-03-07T02:19:30.322Z"
}

Tagged snapshot (playground-revalidation)

{
  "mutationCount": 1,
  "pathRevalidationCount": 0,
  "tagRevalidationCount": 1,
  "lastMutationKind": "revalidateTag",
  "lastMutationAt": "2026-03-05T19:25:01.315Z",
  "cachedAt": "2026-03-05T19:25:04.136Z"
}