ResizeObserver

ResizeObserver reports element box size changes without relying on global window resize events. It is useful for canvas, charts, virtualized panels, and components that react to container size. Implementations must avoid feedback loops where the callback writes layout that immediately changes the same observed size.

					const ro = new ResizeObserver((entries) => {
  const { width, height } = entries[0].contentRect;
  chart.resize(width, height);
});
ro.observe(container);
				

Browsers may warn on resize loop errors when measure-and-write happens synchronously in the callback. For pure responsive styling, CSS container queries may be simpler.

On interviews: how ResizeObserver differs from viewport media queries and why callbacks can trigger loop warnings.

Common pitfalls: measuring and writing synchronously in the callback can create loops. CSS container queries may be simpler for pure styling.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Observe the correct box (content vs border).
• Debounce or rAF heavy work in callbacks.
• Disconnect on unmount.
• Prefer CSS when styling alone is enough.