use-delay.ts

import { useState, useRef, useEffect } from 'react';

export function useDelay(current, delay) {
  const [toRender, setToRender] = useState(current);
  const queuedTimer = useRef(null);
  const latest = useRef(current);

  useEffect(() => {
    if (latest.current !== current) {
      if (!queuedTimer.current) {
        queuedTimer.current = setTimeout(() => {
          queuedTimer.current = null;
          setToRender(latest.current);
        }, delay);
      }
      latest.current = current;
    }
  });

  useEffect(() => {
    return () => {
      if (queuedTimer.current) clearInterval(queuedTimer.current);
    };
  }, []);

  return { toRender, old: toRender !== current };
}