You crop a photo, rotate it a little, adjust contrast, and add a black-and-white filter. Then the user presses Undo.
The tempting fix is to keep an undo stack that reaches into the photo editor, reads every field, and puts the old values back. That works for about five minutes. Then the editor changes shape, the undo code knows too much, and a small refactor turns into a history bug.
The Memento pattern keeps that boundary cleaner. The photo editor creates snapshots of its edit settings. The undo stack stores those snapshots. It does not know what is inside.
The usual approach
Without a pattern, undo history often starts as an array of plain objects:
history.push({
crop: editor.crop,
rotation: editor.rotation,
adjustments: editor.adjustments,
filter: editor.filter,
annotations: editor.annotations,
});This works only while the photo editor stays simple. The problem is that the undo code now depends on the editor's internal details. It must know that crop is stored in editor.crop, rotation in editor.rotation, filters in editor.filter, and annotations in editor.annotations.
That means two parts of the app now need to change whenever the editor changes: the editor itself, and the undo code. If annotations later move into a layer system, or filters become a list of operations, undo can break even though the user-facing feature is the same.
There is another trap: saving too much. A photo editor could save a full copy of the image after every edit, but that gets expensive quickly. Most undo steps only need the edit settings: crop, rotation, brightness, filter, and annotations.
The pain point is ownership. The editor should decide what needs to be saved. The undo system should only store and return those saved snapshots.
The pattern in one minute
Memento usually gets explained with three names:
- Originator: the object that owns the state. Here, that is a photo editor.
- Memento: a snapshot of that state.
- Caretaker: the thing that stores snapshots and asks for undo or redo.
Refactoring.Guru describes Memento as a behavioral pattern that saves and restores an object's previous state without exposing implementation details: Memento pattern.
That privacy boundary is the useful part. Undo history should not care whether the editor stores crop data, filters, and annotations as objects, maps, command lists, or something we have not invented yet.
