javascript 51 lines · 7 steps

Building an undo/redo history stack

A three-bucket past/present/future model gives any app clean undo, redo, and debounced state capture.

Explained by highlit

Intermediate undo-redo state-management debouncing data-structures

1class HistoryStack {
constructor(initial = '', limit = 100) {
  this.past = [];
  this.present = initial;
  this.future = [];
  this.limit = limit;
  this.pending = null;
}
9 
push(next) {
  if (next === this.present) return;
  this.past.push(this.present);
  if (this.past.length > this.limit) this.past.shift();
  this.present = next;
  this.future = [];
}
17 
pushDebounced(next, delay = 400) {
  clearTimeout(this.pending);
  this.pending = setTimeout(() => this.push(next), delay);
}
22 
undo() {
  if (!this.canUndo) return this.present;
  clearTimeout(this.pending);
  this.future.unshift(this.present);
  this.present = this.past.pop();
  return this.present;
}
30 
redo() {
  if (!this.canRedo) return this.present;
  this.past.push(this.present);
  this.present = this.future.shift();
  return this.present;
}
37 
get canUndo() {
  return this.past.length > 0;
}
41 
get canRedo() {
  return this.future.length > 0;
}
45 
clear() {
  clearTimeout(this.pending);
  this.past = [];
  this.future = [];
}
51}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Splitting history into past, present, and future arrays makes undo and redo just push/pop between three buckets.
2Any new edit must invalidate the redo future, since branching forward from an old state is meaningless.
3Capping the past array bounds memory so long editing sessions never grow the history without limit.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

python

from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector
from django.core.cache import cache
from django.db.models import F
from django.http import JsonResponse

Ranked full-text search in Django

full-text-search debouncing caching

Advanced 9 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);