← Lessons

quiz vs the machine

Gold1410

Frontend

The Optimistic Updates

Apply a change to the UI before the server confirms, then roll back if the request fails.

5 min read · core · beat Gold to climb

Update first, confirm later

An optimistic update changes the local cache as if a mutation already succeeded, before the server responds. The user sees an instant result, such as a liked post or a sent message, while the request flies in the background.

  • The UI feels fast because it does not wait for a round trip.
  • You assume success because most writes succeed.
  • You keep a snapshot so you can undo if the server disagrees.

The rollback contract

Optimism only works if you can recover from failure. The pattern has a clear shape.

  • Snapshot the current cache value before changing it.
  • Apply the optimistic change to the cache.
  • On error, roll back to the snapshot and surface a message.
  • On settle, invalidate the key so the server truth wins.

Where it shines and where it bites

Optimistic updates shine for small, low risk toggles where failure is rare and easy to reverse. They bite when the result depends on server computed fields you cannot guess, like a generated id or a recomputed total. In those cases prefer a normal pending state.

Key idea

Optimistic updates apply a change to the cache immediately and keep a snapshot to roll back on failure, trading a small risk for a fast feeling UI.

Check yourself

Answer to earn rating on the learn ladder.

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

2. When is an optimistic update a poor fit?