React useOptimistic Playground

useOptimistic is a React 19 hook that lets you show an optimistic (predicted) UI state immediately while a background async operation runs. You provide the real state and a reducer function. React derives the optimistic state from your real state plus any pending optimistic updates, automatically reverting when the operation completes.

When you call addOptimistic(data), React temporarily overlays the optimistic change on top of your real state. If the async action succeeds and you call setRealState(), React merges the real result. If the action throws an error and you don't catch it, React automatically drops the optimistic overlay and reverts to the last real state — no manual cleanup needed.

useState holds authoritative data — it only changes when you explicitly call setState. useOptimistic holds temporary predicted state that auto-reverts. Think of useOptimistic as a 'ghost layer' on top of your real state: it shows what you expect to happen, while the real state catches up asynchronously.

No — useOptimistic is a React 19 API. For React 18, you can implement the same pattern manually: optimistically update a useState variable, run the async call, and revert with the original value in the catch block. It's more boilerplate but the same concept.

React queues and merges multiple optimistic updates. Each addOptimistic call adds to the optimistic layer. As each corresponding async operation completes (or fails), its contribution is committed (or dropped) independently. This lets you handle multiple simultaneous mutations safely.

No — useOptimistic works for any state shape. It's common with todo lists and forms, but you can use it for counters (optimistic like count), field updates, status toggles, or any UI that should feel instant. The reducer can transform state in any way.