useResizeObserver-example.js

import { useCallback } from 'react';
import useResizeObserver from 'hooks/useResizeObserver';

export default () => {
  
  const onResize = useCallback((entries = []) => {
    console.log(entries.map(e => e.target));
  }, []);
  
  const [observerRef, setObserverRef] = useResizeObserver({
    children: true,
    debounce: 100
  }, onResize);

  return (
    <>
      <ul ref={observerRef}>
        {[...new Array(20)].map((e, i) => (
          <li key={i}>
            <p>Lorem ipsum dolor sit amet</p>
          </li>
        ))}
      </ul>
    </>
  );
}

useResizeObserver.js

/*
  -- ResizeObserver custom hook --
  
  Most other observer custom hooks suck ass, use this one instead
  
  Benefits:
  1. properly handles ref. Doesn't assume ref will always be set and can actually change
  2. Support for debouncing and throttling
  3. Supports observing children of ref and will update when dom changes

*/

import { useCallback, useEffect, useMemo, useRef } from "react";
import debounceFn from 'lodash.debounce';
import throttleFn from 'lodash.throttle';

export default (
    {
        parent = true,
        children = false,
        debounce = 0,
        throttle = 0,
    },
    /*
        Performance tip:
        Rememeber to memoize the callback! Or else
        every re-render will trigger a cb dependency
        update deleting and reinstantiating the observers
    */
    cb = () => {}
) => {

    const ref = useRef(null);

    const [ handler = fn => fn, delay = 0 ] = useMemo(() => [
        throttle && [throttleFn, throttle],
        debounce && [debounceFn, debounce]
    ].filter(Boolean).flat(), [debounce, throttle]);

    const resizeObserver = useMemo(() => (
        new ResizeObserver(handler(cb, delay))
    ), [cb, handler, delay]);

    const mutationObserver = useMemo(() => (
        new MutationObserver(() => {
            for (const child of ref.current?.children || []) resizeObserver?.observe(child);
        })
    ), [resizeObserver]);
    
    const setRef = useCallback(el => {

        if (ref.current) disconnect();
        initiate(el);

        ref.current = el;
        
    }, []);

    useEffect(() => {

        initiate();
        return disconnect;

    }, [mutationObserver, resizeObserver, children, parent]);

    function initiate (el = ref.current) {

        if (parent && el) resizeObserver.observe(el);
        
        if (children && el) {
            mutationObserver?.observe(el, { childList: true });
            for (const e of el.children) resizeObserver?.observe(e);
        }
    }

    function disconnect () {
        mutationObserver?.disconnect();
        resizeObserver?.disconnect();
    }

    return [ref, setRef];
};