How would you use ResizeObserver to react to an element's size changing, without polling getBoundingClientRect() on every frame?

Q: How would you use ResizeObserver to react to an element's size changing, without polling getBoundingClientRect() on every frame?

**Target Audience:** Engineers preparing for JavaScript fundamentals interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every claim below was verified live in a real, current browser via the Claude Browser pane — `ResizeObserver` is confirmed genuinely NOT implemented in jsdom, so this could not be verified with jsdom alone. ## 1. Why This Even Matters — A Story First Checking whether a parcel has arrived by walking out to the mailbox every 5 seconds, all day, genuinely wastes a lot of walking compared to simply waiting for the mail carrier to ring the doorbell the moment something actually arrives. A `requestAnimationFrame`-based polling loop checking `getBoundingClientRect()` 60 times a second is exactly that constant walk to the mailbox; `ResizeObserver` is the doorbell. ## 2. The Core Idea 📌 **Interview term:** `ResizeObserver` lets code `.observe(element)` and receiv

Tricky JavaScript Scenario #98: ResizeObserver sizing alterations tracking

The problem

Question presented to candidate: "You need to re-run a layout calculation whenever a specific div's size changes — maybe from a CSS container query, a font load, or a user dragging a resize handle. Would you poll getBoundingClientRect() in a requestAnimationFrame loop? What would you use instead?"

What a strong answer should cover:

📌 Interview term: ResizeObserver — a real, built-in browser API that lets code .observe(element) and receive a real callback whenever that element's size genuinely changes — no polling loop, no manual requestAnimationFrame-based checking required at all.
📌 Interview term: the real, direct answer to the prompt — verified directly, live in a real browser (ResizeObserver is genuinely NOT implemented in jsdom, confirmed directly — typeof is "undefined" there): ResizeObserver's callback genuinely fires ONCE immediately upon .observe(), reporting the element's real CURRENT size — even before any actual resize occurs — then fires AGAIN whenever the element's real size subsequently changes.
📌 Interview term: entry.contentRect — the real object each callback entry carries, giving the observed element's real, current width and height directly — no need to separately call getBoundingClientRect() inside the callback at all.
📌 Interview term: .disconnect() — verified directly: calling it genuinely stops all future callbacks for every element that observer was watching, confirmed by a subsequent real resize producing no further callback.
A precise answer names the real performance advantage over polling: a requestAnimationFrame-based polling loop runs on EVERY frame (up to 60 times per second) regardless of whether anything actually changed, genuinely wasting real CPU; ResizeObserver's callback fires ONLY when a real, actual size change genuinely occurs.

Clarifying questions expected:

None — this is a definitional/practical question; directly demonstrating the real, verified fire-immediately-then-on-resize behavior is the strong signal.

Code / implementation expected: Yes — a real, live-browser-verified ResizeObserver observing an element through an initial callback, a real resize, and a .disconnect().

observers
tricky
real-world

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript fundamentals interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every claim below was verified live in a real, current browser via the Claude Browser pane — ResizeObserver is confirmed genuinely NOT implemented in jsdom, so this could not be verified with jsdom alone.

1. Why This Even Matters — A Story First

Checking whether a parcel has arrived by walking out to the mailbox every 5 seconds, all day, genuinely wastes a lot of walking compared to simply waiting for the mail carrier to ring the doorbell the moment something actually arrives. A requestAnimationFrame-based polling loop checking getBoundingClientRect() 60 times a second is exactly that constant walk to the mailbox; ResizeObserver is the doorbell.

2. The Core

The solution is hidden so you can try first

5 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal, live-verified proof: ResizeObserver fires immediately on observe() with the current size, again on a genuine resize, and disconnect() stops further callbacks