useElementSize With ResizeObserver

Measuring a DOM node's width and height in React without listening to `window.resize`. Uses `ResizeObserver` so it fires for layout-driven changes (sidebar toggling, font load, parent flex) too.

JavaScript

Frontend

3 snippets

react

hooks

performance-optimization

resize-observer

By @lilykelly

April 7, 2026

Updated May 18, 2026

977 views

4.4 (8)

The hook itself, plus a ref-callback shim

Ask AI

// useElementSize: measure any element via ResizeObserver. The ref is a callback
// ref so it works whether the consumer renders the target conditionally or not.
const { useState, useCallback, useRef, useEffect } = (typeof React !== 'undefined' ? React : {
    useState: (init) => {
        let v = typeof init === 'function' ? init() : init;
        return [v, (n) => { v = typeof n === 'function' ? n(v) : n; return v; }];
    },
    useCallback: (f) => f,
    useRef: (init) => ({ current: init }),
    useEffect: () => {},
});

function useElementSize() {
    const [size, setSize] = useState({ width: 0, height: 0 });
    const observerRef = useRef(null);
    const elementRef = useRef(null);

    const setRef = useCallback((node) => {
        if (observerRef.current) {
            observerRef.current.disconnect();
            observerRef.current = null;
        }
        elementRef.current = node;
        if (!node || typeof ResizeObserver === 'undefined') return;
        const obs = new ResizeObserver((entries) => {
            const entry = entries[0];
            if (!entry) return;
            const { width, height } = entry.contentRect;
            setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
        });
        obs.observe(node);
        observerRef.current = obs;
    }, []);

    useEffect(() => () => {
        if (observerRef.current) observerRef.current.disconnect();
    }, []);

    return [setRef, size];
}

// Demo: simulate a node with getBoundingClientRect, drive setRef and a ResizeObserver entry.
const [setRef, size] = useElementSize();
const fakeNode = { tagName: 'DIV' };
setRef(fakeNode);
console.log('initial size:', size);
console.log('setRef returns void:', setRef(null) === undefined);
console.log('hook surface keys:', Object.keys({ setRef, size }));

I always reach for a callback ref over useRef + useEffect for measurement hooks because the timing is cleaner: the callback runs synchronously when React attaches or detaches the node, so I never measure before mount or leak an observer after unmount. The Object.is check inside setSize keeps the state stable when the browser fires noisy ResizeObserver events with the same dimensions, which I have seen happen during scroll-into-view animations. Storing the observer in a ref lets me disconnect cleanly when the consumer swaps elements (a common pattern in conditional rendering).

Throttle to animation-frame so a flex resize does not thrash

// During a parent flex transition, ResizeObserver can fire 60+ times per second.
// Coalescing to an animation frame is the cheapest fix.
const { useState, useCallback, useRef, useEffect } = (typeof React !== 'undefined' ? React : {
    useState: (init) => {
        let v = typeof init === 'function' ? init() : init;
        return [v, (n) => { v = typeof n === 'function' ? n(v) : n; return v; }];
    },
    useCallback: (f) => f,
    useRef: (init) => ({ current: init }),
    useEffect: () => {},
});

const raf = (typeof requestAnimationFrame !== 'undefined') ? requestAnimationFrame : (cb) => setTimeout(cb, 16);
const caf = (typeof cancelAnimationFrame !== 'undefined') ? cancelAnimationFrame : clearTimeout;

function useElementSizeRafThrottled() {
    const [size, setSize] = useState({ width: 0, height: 0 });
    const observerRef = useRef(null);
    const pendingRef = useRef(null);
    const rafIdRef = useRef(null);

    const setRef = useCallback((node) => {
        if (observerRef.current) observerRef.current.disconnect();
        if (rafIdRef.current) caf(rafIdRef.current);
        if (!node || typeof ResizeObserver === 'undefined') return;

        const obs = new ResizeObserver((entries) => {
            const e = entries[0]; if (!e) return;
            pendingRef.current = { width: e.contentRect.width, height: e.contentRect.height };
            if (rafIdRef.current != null) return;
            rafIdRef.current = raf(() => {
                rafIdRef.current = null;
                const next = pendingRef.current;
                if (!next) return;
                setSize((prev) => (prev.width === next.width && prev.height === next.height ? prev : next));
            });
        });
        obs.observe(node);
        observerRef.current = obs;
    }, []);

    useEffect(() => () => {
        if (observerRef.current) observerRef.current.disconnect();
        if (rafIdRef.current) caf(rafIdRef.current);
    }, []);

    return [setRef, size];
}

const [setRef, size] = useElementSizeRafThrottled();
console.log('throttled hook initial size:', size);
console.log('setRef accepts null cleanly:', (setRef(null), 'ok'));

When a sidebar collapses with a 300ms transition, ResizeObserver will fire on every layout pass. Bumping each event into React state means up to twenty re-renders per second on the consumer, often for invisible 0.5px deltas. Coalescing into requestAnimationFrame flips that to one render per frame, which is the rate the browser is going to paint anyway. The pattern is: stash the latest entry in a ref, schedule a single rAF if one is not pending, and clear the rAF on the next event so we always commit the freshest size. The fallback setTimeout(cb, 16) keeps it useful in non-DOM environments like Jest.

Measure responsively: pick layout based on width buckets

Back to Code Snippets