History React Hook

useHistory.ts

import React, {useCallback} from "react";

export function useHistory<T>(state: T): [
  pushState: (state: T) => void,
  undo: () => T | null,
  redo: () => T | null,
] {

  const [history] = React.useState<{ data: Array<T>, index: number }>({data: [state], index: 1});

  const pushState = useCallback((state: T) => {

    if (history.index < history.data.length) {
      history.data = history.data.slice(0, history.index);
    }

    history.data.push(state);
    history.index++;

  }, [history]);

  const undo = useCallback(() => {

    if (history.index <= 1) return null;

    history.index--;

    return history.data[history.index - 1];

  }, [history]);

  const redo = useCallback(() => {

    if (history.index > (history.data.length - 1)) return null;

    history.index++;

    return history.data[history.index - 1];

  }, [history]);

  return [pushState, undo, redo];
}