state hook, with history methods (set/undo/redo)

useHistory.js

import { useState } from 'react';

const useHistory = (initialState) => {
  const [history, setHistory] = useState([initialState]);
  const [historyPos, setHistoryPos] = useState(0);

  const canUndo = historyPos;
  const canRedo = historyPos !== history.length - 1;

  const value = history[historyPos];
  const undo = canUndo ? () => setHistoryPos((p) => p - 1) : null;
  const redo = canRedo ? () => setHistoryPos((p) => p + 1) : null;
  const set = (nVal) => {
    const finalValue = typeof nVal === 'function' ? nVal(value) : nVal;
    const newHistory = [...history.slice(0, historyPos + 1), finalValue];

    setHistory(newHistory);
    setHistoryPos(newHistory.length - 1);
  };

  return [value, set, undo, redo];
};

export default useHistory;