useDomSize.ts

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

function debounce(callback: Function, delay = 300) {
  let handle: number;

  return function () {
    if (handle) clearTimeout(handle);
    handle = setTimeout(callback, delay);
  };
}

interface Size {
  width: number;
  height: number;
}

function useDomSize(onResize: (width: number, height: number) => void) {
  const ref = useRef<HTMLDivElement>(null);
  const size = useRef<Size | undefined>(undefined);

  const update = useCallback(() => {
    const target = ref.current;
    if (!target || !size.current) {
      return;
    }

    const { width, height } = size.current;
    if (width === target.clientWidth && height === target.clientHeight) {
      return;
    }

    size.current = {
      width: target.clientWidth,
      height: target.clientHeight,
    };
    onResize(target.clientWidth, target.clientHeight);
  }, [onResize]);

  useEffect(() => {
    update();
    const handler = debounce(update);

    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [update]);

  return ref;
}

export default useDomSize;