React useUndoState - a hook for using state with history

useUndoState.jsx

import React, { useRef, useState } from "react";

function update(past, future, setState, setCanRedo, setCanUndo) {
  setState(past.current[past.current.length - 1]);
  setCanRedo(future.current.length > 0);
  setCanUndo(past.current.length > 1);
}

export default function useUndoState(initialValue) {
  const past = useRef([initialValue]);
  const future = useRef([]);
  const [state, setState] = useState(initialValue);
  const [canUndo, setCanUndo] = useState(false);
  const [canRedo, setCanRedo] = useState(false);

  function undo() {
    if (past.current.length === 1) {
      return;
    }
    future.current.unshift(past.current.pop());
    update(past, future, setState, setCanRedo, setCanUndo);
  }

  function redo() {
    if (future.current.length === 0) {
      return;
    }
    past.current.push(future.current.shift());
    update(past, future, setState, setCanRedo, setCanUndo);
  }

  function addState(next) {
    if (typeof next === "function") {
      next = next(state);
    }
    future.current = [];
    past.current.push(next);
    update(past, future, setState, setCanRedo, setCanUndo);
  }

  const undoContext = {
    undo,
    redo,
    canUndo,
    canRedo
  };
  return [state, addState, undoContext];
}