optimistic-updates

Optimistic UI updates apply anticipated results instantly to the interface before server confirmation. React 19's `useOptimistic` hook lets you show changes immediately—like incrementing a like count—then automatically revert if the async operation fails, creating a faster-feeling experience without waiting for the server response.

Use `useOptimistic` for mutations that should feel instant: likes, comments, todo additions, and similar actions. Pair it with `startTransition` to display pending states, keeping the update function pure and handling errors when the server denies the operation, ensuring the UI stays in sync with actual data.

`useOptimistic` is designed for async mutations in React 19. It works seamlessly with server actions and async handlers—you apply the optimistic change immediately, let the operation complete in the background, and the hook automatically reverts if the server confirms failure, eliminating the need to manually manage pending states.

If the server rejects or fails the async operation, `useOptimistic` automatically reverts the UI to the actual confirmed state. This reversion is automatic; you don't need manual rollback logic. Pair error handling with the async function to log or notify users of failed actions, keeping the interface honest.

No. `useOptimistic` requires a pure update function—never mutate state directly. Pass the current state and return a new state value. This functional approach ensures React can safely apply the optimistic change, revert if needed, and maintain consistency with server data and `startTransition` concurrency features.