Function useOnResize

frontend/app/hook/useDimensions.tsx:62–103

(
    ref: React.RefObject<T>,
    callback: (domRect: DOMRectReadOnly) => void,
    debounceMs: number = null
)

}

export function useOnResize<T extends HTMLElement>(
    ref: React.RefObject<T>,
    callback: (domRect: DOMRectReadOnly) => void,
    debounceMs: number = null
) {
    const isFirst = React.useRef(true);
    const rszObjRef = React.useRef<ResizeObserver>(null);
    const oldHtmlElem = React.useRef<T>(null);
    const setDomRectDebounced = React.useCallback(debounceMs == null ? callback : debounce(debounceMs, callback), [
        debounceMs,
        callback,
    ]);
    React.useEffect(() => {
        if (!rszObjRef.current) {
            rszObjRef.current = new ResizeObserver((entries) => {
                for (const entry of entries) {
                    if (isFirst.current) {
                        isFirst.current = false;
                        callback(entry.contentRect);
                    } else {
                        setDomRectDebounced(entry.contentRect);
                    }
                }
            });
        }
        if (ref.current) {
            rszObjRef.current.observe(ref.current);
            oldHtmlElem.current = ref.current;
        }
        return () => {
            if (oldHtmlElem.current) {
                rszObjRef.current?.unobserve(oldHtmlElem.current);
                oldHtmlElem.current = null;
            }
        };
    }, [ref.current, callback]);
    React.useEffect(() => {
        return () => {
            rszObjRef.current?.disconnect();
        };
    }, []);
}

// will not react to ref changes
// pass debounceMs of null to not debounce