← Lessons

quiz vs the machine

Gold1470

Frontend

Optimistic UI Updates

Update the screen before the server confirms, then reconcile.

5 min read · core · beat Gold to climb

The instinct

When a user clicks like, waiting for a round trip makes the app feel sluggish. An optimistic update changes the UI immediately, assuming the request will succeed.

The flow

  • Apply the change to local state right away and show the new value.
  • Send the request to the server in the background.
  • On success, keep the change, often replacing the guess with server data.
  • On failure, roll back to the previous state and surface an error.

Getting it safe

You must keep the previous value so a rollback is possible. Generate a temporary id for created items, then swap in the real id when the server responds. Concurrent updates need care so a late failure does not clobber newer state.

When to avoid it

Skip optimism when failure is costly or hard to reverse, such as payments. There, honest pending states beat a guess you might retract.

Key idea

Optimistic UI applies a change instantly and reconciles with the server, rolling back on failure, which demands keeping the previous state for recovery.

Check yourself

Answer to earn rating on the learn ladder.

1. What does an optimistic update do before the server responds?

2. What must you keep to handle a failed optimistic update?