What Is the Resize Observer API and Why Is It Useful?
Learn how the Resize Observer API detects element-level size changes and powers CSS container queries.
Expected Interview Answer
The Resize Observer API lets you asynchronously detect when an element’s content box (or border box) size actually changes, which is essential for responsive, container-based layouts since the window resize event only fires for viewport size changes, not for individual element resizes caused by content, flex, or grid reflow.
The classic window.addEventListener("resize", ...) only fires when the browser viewport itself changes size — it says nothing about an individual element resizing due to its parent container growing, a sidebar collapsing, dynamic content loading, or font changes shifting layout. Resize Observer solves this by letting you observe any element and receive a callback whenever its box size changes, regardless of the cause, which is exactly the primitive that powers modern container queries and component-level responsive design. Because it reports the actual content-box and border-box dimensions directly in the callback, you avoid manually calling getBoundingClientRect() in a resize/scroll listener, which would force synchronous layout reads and risk jank. This makes ResizeObserver the standard tool for responsive charts, resizable panels, and any component that needs to adapt its own layout independent of the viewport.
- Detects individual element resizes, not just viewport resizes
- Enables true container-based responsive design, the basis for CSS container queries
- Delivers precise content-box/border-box dimensions without manual getBoundingClientRect calls
- Runs asynchronously, avoiding forced synchronous layout reads
AI Mentor Explanation
Resize Observer is like a groundskeeper getting an alert whenever any individual pitch strip changes size — say, after re-turfing — rather than only being told when the whole stadium’s footprint expands. A stadium-wide alert alone would miss the pitch shrinking from wear even though the stadium boundary never moved. The per-strip alert catches every local size change regardless of the stadium’s overall size. That element-level, cause-agnostic size-change detection is exactly what Resize Observer adds over the window resize event.
Step-by-Step Explanation
Step 1
Create the observer
Instantiate new ResizeObserver(callback) with a function that receives an array of ResizeObserverEntry objects.
Step 2
Observe target elements
Call observer.observe(element) for each element whose box size you need to track.
Step 3
Browser tracks size changes asynchronously
Any change to content-box or border-box size, from any cause, is queued off the main rendering path.
Step 4
Callback receives precise dimensions
Each entry provides contentBoxSize/borderBoxSize directly, avoiding manual getBoundingClientRect calls.
What Interviewer Expects
- Clear distinction from window resize (viewport-only) vs element-level resize detection
- Understanding of the connection to CSS container queries
- Awareness that it avoids manual getBoundingClientRect polling in scroll/resize handlers
- A realistic use case: responsive charts, resizable panels, or component-level layout logic
Common Mistakes
- Assuming window resize events fire when an individual element (not the viewport) changes size
- Not calling unobserve() or disconnect(), leaking observers on unmounted components
- Confusing ResizeObserver with Intersection Observer, which tracks visibility, not size
- Triggering layout changes inside the callback that cause an infinite resize loop without guarding against it
Best Answer (HR Friendly)
“The Resize Observer API lets your code know whenever a specific element on the page changes size — not just when the browser window itself is resized — which is really useful for components like charts or cards that need to adapt their own layout based on their container. It is the browser feature underneath modern container queries.”
Code Example
const chartContainer = document.querySelector('.chart-container')
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0]
redrawChart(width, height) // re-render at the new container size
}
})
resizeObserver.observe(chartContainer)
// resizeObserver.unobserve(chartContainer) or .disconnect() on cleanupFollow-up Questions
- How does ResizeObserver relate to CSS container queries?
- What is the difference between contentBoxSize and borderBoxSize?
- How would you avoid an infinite loop if the callback itself changes the observed element’s size?
- How does ResizeObserver differ from Intersection Observer in purpose?
MCQ Practice
1. What does window.addEventListener("resize") fail to detect?
Window resize only fires for viewport size changes, not for individual elements resizing due to content or layout shifts.
2. What browser feature is ResizeObserver the underlying primitive for?
Container queries rely on the browser tracking individual element size changes, which ResizeObserver enables.
3. Why is ResizeObserver preferred over calling getBoundingClientRect in a resize handler?
ResizeObserver delivers dimensions asynchronously without the forced synchronous layout reads that manual polling requires.
Flash Cards
What does ResizeObserver detect that window resize cannot? — Size changes of individual elements, from any cause, not just viewport changes.
What CSS feature is built on ResizeObserver? — Container queries.
What does the callback provide directly? — contentBoxSize and borderBoxSize dimensions, avoiding manual getBoundingClientRect calls.
How do you stop observing? — Call unobserve(element) or disconnect() on the observer.