Reusable hook to observe a node and run a throttled callback when its dimensions change

useThrottledResizeObserver.tsx

import throttle from 'lodash.throttle';
import React, { useEffect } from 'react';

/**
 * Reusable hook to observe a node and run a throttled callback when its dimensions change
 * Example usage can be to change the text within a flex grow container between
 *  a short and a long version depending on available space
 */
export default function useThrottledResizeObserver<T extends HTMLElement>(
  ref: React.MutableRefObject<T>,
  callback: (entries: ResizeObserverEntry[]) => void,
  wait: number,
): void {
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    const throttledCallback = throttle(entries => {
      callback(entries);
    }, wait);

    const observer = new ResizeObserver(throttledCallback);
    observer.observe(ref.current);

    return function cleanUp() {
      throttledCallback.cancel();
      observer.disconnect();
    };
  }, [ref, wait]); // eslint-disable-line react-hooks/exhaustive-deps
}