Building Instant Feedback with useOptimistic

Use React 19’s useOptimistic to show instant UI updates while an async action is still in flight, then reconcile with the real result.

A responsive interface keeps users engaged. They should see their actions reflected immediately, without waiting for background processes to complete. Traditionally, we’d update the state only after the server responds. React 19 introduces the useOptimistic hook, which lets us optimistically update the UI first — showing instant feedback — and then merge in the real result when it arrives, or roll back gracefully if the operation fails.

Concept: What useOptimistic does

useOptimistic lets us derive an optimistic state from our base state while an action is pending.