Hook · React 19
useOptimistic
Optimistic UI without blocking
useOptimistic shows a provisional state while an async operation is in progress. The UI responds instantly; if the operation fails without updating real state, React reverts automatically.
The signature
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn). state is the real one; updateFn describes how to compute the provisional state from it and a temporary value.
When to use it
Actions that almost always succeed: likes, votes, sent messages, drag and drop. Don't use it when failures are frequent or costly to undo visually.
Common pitfalls
- 01The optimistic value is only temporary: it disappears when the async action settles.
- 02If the action throws without updating the real state, the revert is automatic — but the user will see a flash back to the original state.
- 03useOptimistic requires React 19 or Canary. It does not work in React 18.
Was this helpful?
Sign in to give feedback