Kelly Mears

Optimistic UI

Updating the UI as if a server request has already succeeded, before the server has actually responded.

Web Platform2 min read308 words15 out · 18 in
also calledOptimistic Updates

Optimistic UI updates what the user sees immediately, on the assumption that a pending server request will succeed, rather than waiting for the response before showing any change. Liking a post, checking off a to-do, sending a chat message: the UI flips to the new state the instant the user acts, the request goes out in the background, and only if it fails does the UI revert and surface an error. The bet is that most requests succeed, so most of the time the app feels instantaneous instead of waiting on a round trip the user doesn't actually need to see.

The part that's easy to skip and expensive to skip is the failure path: an optimistic update with no rollback isn't optimistic, it's just wrong — the UI silently drifts from server truth the first time a request fails, and nothing ever corrects it. A real implementation keeps the previous state around specifically to restore it, and needs a way to surface the failure without being jarring, since the whole point was a smooth experience.

Concurrency compounds this: if a second optimistic update starts before the first one's request resolves, a naive rollback can restore state from before the second update, discarding it along with the first update's failure. Libraries built around this pattern (React Query, SWR, Apollo's cache) handle it by keying rollback to the specific mutation, not to "whatever the UI showed before," which is the detail that separates a correct implementation from one that merely looks correct in the happy path.

It's a close cousin of client-side prediction in networked games (see Rollback Netcode) — same bet, same rollback requirement — and it depends on the same reversibility guarantee that makes Rollback viable at the deployment layer: an action is only safe to assume before it's confirmed if undoing that assumption is actually possible.

See also13

Debounce and Throttle

Two opposite strategies for limiting how often a handler runs against a rapid stream of events.

Web Platform11 connections

Virtual DOM

An in-memory representation of the UI that a framework diffs against the previous version to compute minimal real DOM updates.

Web Platform9 connections

WebSocket

A persistent, full-duplex connection between browser and server, replacing repeated request-response with an open channel.

Web Platform16 connections

Cache Invalidation

Deciding when a cached value has stopped being correct — famously one of the hard problems.

Web Platform30 connections

Toggle Switch

An on-screen control for a single on-or-off setting that takes effect immediately, borrowed from light switches, distinct from checkboxes and radio buttons, and notorious for leaving people unsure which state it is in.

Design & Interface11 connections

State Management

How a front-end application keeps track of the data that changes as people use it, and decides where each piece lives, from local component state to global stores to server caches.

Web Platform12 connections

Direct Manipulation

Ben Shneiderman's 1983 name for interfaces where people act on visible objects with immediate, reversible feedback, such as dragging a file or resizing a shape, instead of typing commands that describe the change.

Design & Interface14 connections

Skeleton Screen

A gray outline of the layout shown while content loads, so the page feels faster and doesn't jump when the real content arrives.

Design & Interface11 connections

Idempotency Key

A unique token a client attaches to a request so the server can recognize a retry and return the original result instead of doing the work twice, the standard defense against double charges and duplicate orders.

Data & Content10 connections

Toast Notification

A brief, non-blocking message that slides in to confirm an action or report a background event, then disappears on its own.

Design & Interface10 connections

Promise

JavaScript's object for a value that will arrive later, how it replaced nested callbacks, and the microtask queue that decides when its handlers run.

Web Platform10 connections

Long Polling

The ways a client learns that something changed on a server, from asking repeatedly, to holding a request open until there's news, to the push channels that replaced both.

Networks & Distribution11 connections

Progress Indicator

Spinners, progress bars, and step counters that tell people a system is working and how long is left, which changes how long a wait feels more than how long it is.

Design & Interface9 connections

Linked from18