Get dimensions of a HTML Element in React

useRefDimensions.ts

import { useState, useCallback, useLayoutEffect, RefObject, useMemo } from 'react';
import debounce from 'debounce';

export type Dimensions = [number, number];

export default function useRefDimensions(ref: RefObject<HTMLElement>): Dimensions {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const computeDimensions = useCallback((elem: Element) => {
    const rect = elem.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;

    setWidth(width);
    setHeight(height);
  }, [])

  // Observe is Element is resized
  useLayoutEffect(() => {
    const currentElem = ref.current;
    if (currentElem == null) return;
    const frameIDs: Array<number> = [];
    const resizeObserver = new ResizeObserver(debounce((entries) => {
      const entry = entries.pop();
      const target = entry?.target;
      if (target != null) {
        const frameID = window.requestAnimationFrame(() => {
          computeDimensions(target);
        })
        frameIDs.push(frameID);
      }
    }, 50));
    resizeObserver.observe(currentElem);

    // Clean up
    return () => {
      resizeObserver.disconnect()
      frameIDs.forEach((frame) => {
        window.cancelAnimationFrame(frame);
      })
    };
  }, [computeDimensions, ref])

  // Memo to prevent React from thinking this Array is
  // a new reference every render causing an infinite loop.
  return useMemo(() => [width, height], [height, width]);
}