Stop 09 · Connecting Frontend & BackendTopics · 6/8

Optimistic UI

Part of the Full Stack Developer Roadmap

In short

When you like a post on Instagram, the heart turns red instantly, before the server even replies. That's optimistic UI, and it makes apps feel much faster than they are.

Updating the UI immediately as if a backend action succeeded, before the server actually confirms it, then rolling back if it fails — makes a full-stack app feel instant.

The jaadu stands at a classroom door ticking a checkbox on a clipboard as a student walks in.

Think of it like this

Marking attendance in advance

The class rep ticks your name as present the moment you walk in, before the professor signs the register. Almost always it's fine. If the professor says no, the tick gets erased. Optimistic UI assumes success and quietly undoes it if needed.

Watch it happen

A like that fails

Like button

API

save { liked, 41 }

1/5Before anything changes, the code saves a snapshot of the current state.

The big ideas

What you need to know

Update first, confirm later

Change the UI right away, then send the request in the background.

Keep a snapshot

Save the old state before changing it, so you can roll back if the server says no.

Roll back on failure

If the request fails, restore the snapshot and show a small 'Couldn't save' message.

Use it for likely wins

Great for likes, toggles and to-dos. Avoid it for payments or anything that often fails.

See it in code

Walk through the code

tsx

1async function toggleLike() {2  const prev = { liked, count };             // snapshot3 4  setLiked(!liked);                          // update now5  setCount(liked ? count - 1 : count + 1);6 7  try {8    const res = await fetch(`/api/posts/${id}/like`, { method: "POST" });9    if (!res.ok) throw new Error();10  } catch {11    setLiked(prev.liked);                    // roll back12    setCount(prev.count);13    toast("Couldn't save your like. Try again.");14  }15}

1/4Save the old values first. Without this you can't undo.

The heart flips instantly. Only if the request fails do we put the old values back and tell the user.

Save yourself the pain

Common mistakes

Oops

Updating the UI optimistically and never handling the failure.

Do this instead

Always keep a snapshot and roll back, or the screen shows something the server never saved.

Oops

Making a payment button optimistic, showing 'Paid!' before the bank confirms.

Do this instead

For money and other risky actions, wait for the real response and show a loading state.

Your mission

Optimistic to-do list

~30 min

Quick check

What must you save before making an optimistic update?

Go deeper

1Build a 'like' or toggle feature that updates instantly, then reverts on API failure.
2Learn `useMutation`'s `onMutate`/`onError` in React Query for this pattern.
3Consider the UX trade-off: speed vs occasionally showing a brief rollback.