ResizeObserver API
debt(d7/e3/b3/t5)
Closest to 'only careful code review or runtime testing' (d7). The detection_hints indicate no automated tooling catches ResizeObserver misuse. Memory leaks from failing to call disconnect() and layout thrashing from reading inside callbacks require runtime observation or manual code review; linters cannot detect these patterns automatically.
Closest to 'simple parameterised fix' (e3). The quick_fix states 'Replace window resize + getBoundingClientRect polling with ResizeObserver. Always call disconnect() on cleanup.' This is a localized refactor within a single component—swap the old pattern for the new API and add disconnect() in cleanup. No cross-cutting changes required.
Closest to 'localised tax' (b3). ResizeObserver applies only to web contexts and is typically used in individual components that need size-responsive behaviour. Its adoption doesn't shape the entire system's architecture or slow down unrelated work streams; the burden is isolated to the components using it.
Closest to 'notable trap' (t5). The misconception field explicitly states developers expect ResizeObserver to behave like window resize, when it actually observes any element and fires immediately on observe(). The common_mistakes highlight three documented gotchas: forgetting disconnect(), reading layout in callbacks, and the immediate callback. These are surprises most developers learn the hard way through testing.
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();