Undo/Redo Manage implementation using React Hooks: https://twitter.com/azu_re/status/1443105296994340867

useHistoryState.ts

type HistoryState = unknown; /* state object */
const useHistoryState = (defaultState: HistoryState) => {
  const STACK_SIZE_LIMIT = 20;
  const [currentState, setCurrentState] = useState<HistoryState>(defaultState);
  const [undoStack, setUndoStack] = useState<HistoryState[]>([]);
  const [redoStack, setRedoStack] = useState<HistoryState[]>([]);
  const canUndo = useMemo(() => undoStack.length > 0, [undoStack.length]);
  const canRedo = useMemo(() => redoStack.length > 0, [redoStack.length]);
  const pushState = useCallback((item: HistoryState) => {
    setCurrentState(item);
    setUndoStack(prevState => prevState.concat(item).slice(-STACK_SIZE_LIMIT));
    setRedoStack([]);
  }, []);
  const undo = useCallback(() => {
    const popItem = undoStack.pop();
    if (popItem) {
      setCurrentState(popItem);
      setRedoStack(prevState => prevState.concat(popItem));
    }
  }, [undoStack]);
  const redo = useCallback(() => {
    const popItem = redoStack.pop();
    if (popItem) {
      setCurrentState(popItem);
    }
  }, [redoStack]);
  return [
    { currentState, canUndo, canRedo },
    { undo, redo, pushState },
  ] as const;
};