Memento Design Pattern Explained

The Memento pattern captures an object's internal state in a snapshot so it can be restored later, without exposing its internals. It powers undo and checkpoints.

The concept

The originator creates a memento of its state; a caretaker stores mementos but cannot read them. Restoring hands the memento back to the originator.

Used in editors (undo), games (save points) and form drafts.

Snapshot and restore

Practical examples

Editor with undo

class Editor {
  text = ''
  save() { return { text: this.text } }
  restore(m) { this.text = m.text }
}
const ed = new Editor(), history = []
ed.text = 'a'; history.push(ed.save())
ed.text = 'ab'; history.push(ed.save())
ed.restore(history[0])

Limit memory

if (history.length > 50) history.shift()

Immutable state alternative

const states = [initial]; states.push({ ...states.at(-1), text: 'ab' })

Common mistakes

• Unbounded history eating memory.
• Letting the caretaker modify snapshots.
• Storing huge snapshots instead of diffs.

Key takeaways

• Snapshot state for undo.
• Caretaker stores, originator restores.
• Cap history size.

FAQ

Memento vs Command undo?

Memento stores state; Command stores the inverse operation.

Is Redux time-travel a memento?

Yes, it keeps previous state snapshots.