What is ResizeObserver?

The short answer

ResizeObserver lets you react to size changes of a specific element, not just the window. It fires a callback whenever an observed element's box changes size, which makes it the right tool for components that adapt to their container rather than to the viewport. Before it existed, the only signal was the window resize event, which misses most of the ways an element can change size.

How it works

Copy
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Size is now ${width} x ${height}`);
  }
});
observer.observe(document.querySelector('.panel'));

Each entry describes one observed element. entry.contentRect gives the new content box dimensions, and entry.target is the element itself. You can observe many elements with a single observer.

Why not just use the window resize event

The window resize event only fires when the viewport changes. An element can change size for reasons that never touch the viewport:

• a sibling above it grows or shrinks
• a flex or grid track reflows
• a parent container is resized by a drag handle
• content inside the element wraps to a new line

ResizeObserver catches all of these because it watches the element directly.

Container based styling

You can switch behavior based on an element's own width, which is the idea behind container queries:

Copy
const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;
  entry.target.classList.toggle('is-narrow', width < 400);
});
observer.observe(card);

Now .card.is-narrow can stack its layout when the card itself is small, regardless of the screen size.

In React

A reusable hook that reports an element's current width:

Copy
function useElementWidth() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const observer = new ResizeObserver(([entry]) => {
      setWidth(entry.contentRect.width);
    });
    observer.observe(node);
    return () => observer.disconnect();
  }, []);
  return [ref, width];
}

A chart or canvas can read width and redraw itself whenever the container changes, without listening to the window at all.

Why interviewers ask this

ResizeObserver shows up in questions about responsive components, charts and canvas rendering, and building container query behavior before relying on CSS support. Interviewers want to see that you understand the difference between viewport sized and element sized layout, and that you clean up the observer so it does not leak. It signals that you can build components that are reusable in any layout context.