Skip to content
Optimal Lab

Frontend · interactive

Optimistic updates

You tap Like. The server takes 800 ms to confirm. Waiting feels sluggish; updating the screen immediately and assuming success feels instant, but you need a plan for when the server says no.

t = 0 ms · tap

Post by Ada: “Shipped the new dashboard!”

♥ Liked42
  1. 0ms
  2. 50ms
  3. 400ms
  4. 800ms
  5. 850ms
  6. 1200ms

The heart fills instantly. The request runs in the background.

Approach

Server responds

0 ms

Step 2 of 4

  1. 1

    Most actions succeed

    Likes, checkboxes and reordering almost never fail. Make them feel instant.

    Perceived speed matters more than measured speed.

  2. 2

    Update now, remember the old state

    Change the UI immediately and keep a snapshot to restore.

    useOptimistic(likes, (s, n) => s + n)

  3. 3

    Roll back and tell the user

    Restore the snapshot and show a clear, retryable error.

    Silent rollbacks confuse people.

  4. 4

    Not for risky or irreversible actions

    Payments, deletes and anything that often fails should wait for confirmation.

    TanStack Query and SWR support this pattern.

In production

Tools and technologies

Snappy apps update the UI before the server confirms.

Not tied to one language — use these names when you search docs or design a system.