Unduoable state react hook #react #hook

useUndoState.ts

function useUndoState<T>(initial: T) {
  const [index, setIndex] = useState(0);
  const [history, setHistory] = useState([initial]);
  const state = history[index];
  const setState = useCallback(
    (update: (s: T) => T) => {
      const updated = history.slice(0, index + 1);
      updated.push(update(state));
      setHistory(updated);
      setIndex(index + 1);
    },
    [index, state]
  );
  const undo = useCallback(() => {
    if (index > 0) {
      setIndex(index - 1);
    }
  }, [index]);
  const redo = useCallback(() => {
    if (index < history.length - 2) {
      setIndex(index + 1);
    }
  }, [index, history]);
  return [state, setState, undo, redo] as const;
}