Undo looks like a stack…

…until one click starts several state changes, waits on the network, overlaps another click, and touches data too large to snapshot repeatedly.

Then undo stops being a data structure — and becomes a product decision.

Five ways undo dies

Pick the unit your user hears

Full snapshots — the Memento

function commit(next) {
  past.push(current);            // whole tree, every time
  future = [];
  current = next;
}
function undo() {
  future.push(current);
  current = past.pop();          // restore a full copy
}

Snapshots die at scale

The ecosystem knows: zundo ships partialize (choose tracked fields) and limit (cap depth) as first-class flags. Band-aids on a pattern — a hint we need a different unit.

Immer patches — store the delta

const [next, patches, inversePatches] = produceWithPatches(
  state, draft => { draft.cards[3].column = "done"; }
);
// patches        = [{op:"replace", path:["cards",3,"column"], value:"done"}]
// inversePatches = [{op:"replace", path:["cards",3,"column"], value:"todo"}]
//                        └─ the undo op, generated, minimal, serializable

undo() → state = applyPatches(state, history.pop().inverse)
redo() → state = applyPatches(state, future.pop().patches)

Deltas aren't semantics

Verdict: the right storage format for deltas. The wrong history for intents.

Commands + inverse — the Command pattern

class MoveCard {
  do()   { cards[this.id].column = this.to; }
  undo() { cards[this.id].column = this.from; }   // explicit inverse
}
history.push(new MoveCard(id, from, to));
undo() → history.pop().undo()

// the temptation:
history.push({ do: () => moveCard(id, to), undo: () => moveCard(id, from) })
//                    ↑ closure over component scope — failure 03

Closures hold history hostage

The ProseMirror fix: steps are plain data + an interpreter registry. The inverse is derived: step.invert(doc). Data survives; closures don't.

Stop storing states.
Store intents.

Append-only log of semantic events → state is a projection of the log.

Undo = re-project to N−1  ·  Redo = re-project to N+1  ·  one function, no inverses

The replay engine

type Event = { txId: string; type: "card.moved"|...; payload: Json; ts: number }

const log: Event[] = [];                    // append-only
let cursor = -1;                            // projection position
let checkpoint = { index: -1, state: init } // rolling, every K events

commit(e) { log.push(e); cursor = log.length-1;
            if (log.length % K === 0) checkpoint = {index:cursor, state} }

project(to) {                               // undo AND redo
  const from = checkpoint.index > to ? -1 : checkpoint.index
  let s = from === -1 ? init : checkpoint.state
  for (const e of log.slice(from+1, to+1)) s = apply(s, e)   // forward only
  state = s; cursor = to
}

Five mechanisms, five fixes

Pollution (02) dies automatically: ephemeral updates are never events — they don't reach the log.

When the network lands late

React 19 made async first-class — undo must catch up

Choosing your unit

Snapshots store states · patches store deltas · commands store inverses · replay stores intents.
Memory shrinks left → right. Semantic fidelity grows left → right.

The lab: make failures visible

Full interactive lab + course: ../course/index.html#lab

Four designs, one axis

1 · Choose the unit first.
2 · Undo is do, shorter.
3 · Make failures visible.

Undo isn't a data structure. It's a contract with your user about what ⌘Z means — and the architecture that honors it.