undo redo react hook which don't cause re-render

useUndoRedo.ts

import { useRef, useCallback } from 'react';

export const useUndoRedo = <T>() => {
  const undoStack = useRef<T[]>([]);
  const undoPointer = useRef(-1);

  const add = useCallback((item: T) => {
    const pointer = ++undoPointer.current;
    undoStack.current.length = pointer;
    undoStack.current[pointer] = item;
  }, []);

  const reset = useCallback(() => {
    undoStack.current = [];
    undoPointer.current = 0;
  }, []);

  const undo = useCallback(() => undoStack.current[undoPointer.current--], []);
  const redo = useCallback(() => undoStack.current[++undoPointer.current], []);

  const canUndo = undoPointer.current > 0;
  const canRedo = undoPointer.current !== undoStack.current.length - 1;

  return { undo, redo, add, reset, canUndo, canRedo };
};