ResizeObserver API

TL;DR

Explanation

ResizeObserver notifies when an element's content or border box dimensions change. Unlike the window resize event, it fires for any element and includes the new size dimensions via ResizeObserverEntry.contentRect. Each entry has contentBoxSize, borderBoxSize, and devicePixelContentBoxSize. Use cases: responsive components that adapt to container size (container queries alternative), chart redraws, virtual scrolling recalculation, dynamic layout adjustments. Disconnect when component unmounts. Unlike Intersection Observer, it fires immediately on observation with current size.

Common Misconception

Why It Matters

Common Mistakes

• Not disconnecting observer on component unmount — memory leak.
• Reading layout inside callback causing layout thrashing — read, don't write.
• Not handling the initial callback that fires immediately on observe().

Code Examples

window.addEventListener('resize', () => recalculateLayout(element));

const observer = new ResizeObserver(entries => {
    for (const entry of entries) {
        const { width, height } = entry.contentRect;
        updateComponent(width, height);
    }
});
observer.observe(element);
// Cleanup:
observer.disconnect();

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Tags

Related Terms