Skip to solution
mediumFrontend

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

644 views
01

Understand 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().

observerstrickyreal-world
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 pan

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

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

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 75 of 165 decoded in the JavaScript track. One more won't hurt.

Back to track