← Lessons

quiz vs the machine

Platinum1780

Frontend

The Optimistic UI Patterns

Show the result instantly and reconcile when the server confirms.

6 min read · advanced · beat Platinum to climb

What optimistic UI means

An optimistic UI updates the screen immediately assuming a request will succeed, instead of waiting for the server. The like appears instantly, then the network call runs in the background.

  • The UI reflects the intended state before confirmation
  • A request is sent and tracked
  • On failure the UI rolls back to the previous state

Keeping a rollback

To undo cleanly you must capture the previous state before applying the optimistic change, so a failed request can restore exactly what was there. Show an error and offer a retry rather than silently reverting.

Optimistic flow

Ordering and conflicts

Rapid actions can race, so reconcile by request identity and ignore stale responses. When the server returns the authoritative record, replace the optimistic value to fix any drift, such as a server assigned id.

Key idea

Optimistic UI applies the intended change at once over a saved snapshot, then confirms or rolls back from the server while reconciling by request identity to handle races and drift.

Check yourself

Answer to earn rating on the learn ladder.

1. What must you capture before applying an optimistic update?

2. How should rapid overlapping optimistic actions be reconciled?

3. What is the right behavior when an optimistic request fails?