Act on input, not on responseAct on input, not on response

1 · Archive now, sync later

Archive a few emails in each inbox.

const [emails, removeOptimistic] = useOptimistic(
  serverEmails,
  (list, id) => list.filter((e) => e.id !== id),
);

const archive = (id) =>
  startTransition(async () => {
    removeOptimistic(id);               // the row leaves now
    const res = await archiveEmail(id); // server action, runs behind
    if (!res.ok) toast.error("Couldn't archive", { action: retry(id) });
  }); // on failure serverEmails still has it: the row comes back

2 · Roll back when it fails

Keep “Server fails” on and archive an email in each pane.

async function archive(email) {
  const index = list.indexOf(email);
  list.remove(email);                         // optimistic
  try {
    await api.archive(email.id);
    toast("Archived", { action: { label: "Undo", onClick: () => list.insert(index, email) } });
  } catch {
    list.insert(index, email);                // roll back to the truth
    toast.error("Couldn't archive", { action: { label: "Retry", onClick: () => archive(email) } });
  }
}

3 · The optimistic like

Like each post, then tap it again quickly.

Why it matters, pros and cons