Rendering and architecture · Pattern

Optimistic UI

Showing the result of an action straight away, such as a like or a sent message, before the server confirms it, and quietly undoing it if the request fails.

Patterns · updated

How it works

Most requests succeed, so instead of showing a spinner the app updates the screen immediately and sends the request in the background. If the server rejects it, the app rolls back to the previous state and tells the user. The result feels instant even on slow connections.

React's useOptimistic hook, TanStack Query's onMutate callback and similar tools in other frameworks handle the bookkeeping. It suits likes, list edits, reordering and chat messages; it does not suit payments, bookings or anything where showing success too early would mislead.

More in Rendering and architecture

Patterns

All 16 Rendering and architecture terms

Crafted in the dark. Shipped to the world.

Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.