useDelayedRendering.tsx

function useDelayedRendering<T>({
  element,
  delay = 200,
}: {
  element: T;
  delay: number;
}) {
  const [renderedEl, setRenderedEl] = useState(element);
  const lastRenderedAt = useRef(Date.now());

  useEffect(
    function delayRendering() {
      const nextRenderAt = delay - (Date.now() - lastRenderedAt.current);
      function updateElement() {
        setRenderedEl(element);
        lastRenderedAt.current = Date.now();
      }
      if (renderedEl !== element && nextRenderAt <= 0) {
        updateElement();
      } else {
        // postpone rendering
        const timeout = setTimeout(updateElement, nextRenderAt);

        return () => clearTimeout(timeout);
      }
    },
    [delay, element, renderedEl]
  );

  return renderedEl;
}