Optimistic UI with rollback

Problem

Some interactions should feel instant even when the server has not confirmed the change yet. A slow mutation can make a good product feel broken, especially when the expected result is obvious to the user.

Optimistic UI is the pattern of applying the expected state first, then reconciling with the server response. The hard part is not the optimistic update. The hard part is the rollback path.

Demo

Why it works

The demo captures the previous state before making an optimistic change. If the server accepts the mutation, the optimistic state becomes the real state. If the server rejects it, the UI restores the captured previous state and explains what happened.

That previous-state snapshot is the important part. Without it, a failed request can leave the interface halfway between what the user expected and what the system actually saved.

Implementation notes

Use optimistic updates for actions where the user's intent is clear and the failure rate is low: starring, liking, archiving, marking complete, reordering, or small preference changes.

Be more careful with destructive actions, money movement, permissions, and anything where a failed mutation has serious consequences. Those flows need stronger confirmation and clearer server acknowledgement.

Checklist