useResizeObserverCallback.ts

useResizeObserverCallback.ts

function useResizeObserverCallback(callback: ResizeObserverCallback) {
  const observerRef = React.useRef<ResizeObserver>();

  const callbackStable = React.useRef(callback);
  callbackStable.current = callback;

  // return ref callback to setup/teardown the effect
  return function refCallback(el: Element | null) {
    let observer = observerRef.current;

    // teardown
    if (!el) {
      if (observer) {
        observer.disconnect();
      }
      observerRef.current = undefined;
      return;
    }

    // setup
    if (observer) {
      observer.disconnect();
    }
    observer = new ResizeObserver((...args) => {
      callbackStable.current(...args);
    });
    observer.observe(el);
    observerRef.current = observer;
  };
}