ResizeObserver

ResizeObserver fires a callback when an element's size changes — not just when the window resizes. This enables true component-level responsive behaviour.

const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`Element is now ${width}px wide`);

    if (width < 400) {
      entry.target.classList.add('compact');
    } else {
      entry.target.classList.remove('compact');
    }
  });
});

resizeObserver.observe(document.querySelector('.sidebar'));

Why Not window resize?

The window resize event only fires when the browser window changes. An element can resize due to sibling layout changes, flex/grid redistribution, or panel drag-resizing — none of which trigger a window resize event.

// Observe multiple elements
document.querySelectorAll('.card').forEach(card => {
  resizeObserver.observe(card);
});

// Unobserve one
resizeObserver.unobserve(specificCard);

// Stop all
resizeObserver.disconnect();

Always disconnect or unobserve when the component unmounts to avoid memory leaks from stale references.