useMeasure and ResizeObserver: When Your UI Needs to Know Its Own Size

import { useState, useRef, useLayoutEffect, useCallback } from 'react';

interface Dimensions {
  width: number;
  height: number;
}

type MeasureRef = (element: HTMLElement | null) => void;

export function useMeasure(): [MeasureRef, Dimensions] {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 });
  const elementRef = useRef<HTMLElement | null>(null);

  // ... observer logic will go here ...

  // We need a stable ref setter to pass to the user
  const setRef = useCallback((node: HTMLElement | null) => {
    elementRef.current = node;
    // Initial measurement might be needed here, or handle in effect
  }, []);

  return [setRef, dimensions];
}

import { useState, useRef, useLayoutEffect, useCallback } from 'react';

interface Dimensions {
  width: number;
  height: number;
}

type MeasureRef = (element: HTMLElement | null) => void;

export function useMeasure(): [MeasureRef, Dimensions] {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 });
  const elementRef = useRef<HTMLElement | null>(null);
  const observerRef = useRef<ResizeObserver | null>(null); // Keep a ref to the observer

  const setRef = useCallback((node: HTMLElement | null) => {
    if (elementRef.current) {
      // Disconnect previous observation if ref changes
      observerRef.current?.disconnect();
    }
    elementRef.current = node;
    if (elementRef.current && observerRef.current) {
      // Start observing the new node
      observerRef.current.observe(elementRef.current);
      // Take an initial measurement
      const { width, height } = elementRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  useLayoutEffect(() => {
    // Create the observer instance
    observerRef.current = new ResizeObserver((entries) => {
      for (let entry of entries) {
        // We only care about the first observed element's dimensions
        const { width, height } = entry.contentRect;
        setDimensions({ width, height });
      }
    });

    // If an element is already set, start observing it
    if (elementRef.current) {
      observerRef.current.observe(elementRef.current);
      // Take an initial measurement here too, in case setRef wasn't called yet
      const { width, height } = elementRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }

    return () => {
      // Clean up the observer when the component unmounts
      observerRef.current?.disconnect();
      observerRef.current = null;
    };
  }, []); // Empty dependency array means this effect runs once on mount/unmount

  return [setRef, dimensions];
}

In this example, the `ResizableBox` component renders a `div` that can be manually resized using the `resize: 'both'` CSS property. As you drag the corner, the `useMeasure` hook detects the size changes, updates the `width` and `height` state, and causes the component to re-render, displaying the new dimensions. This is far more robust than trying to listen to window events or using an `iframe` hack.

### More Complex Use Cases

Beyond just displaying dimensions, `useMeasure` becomes powerful when you need to:

*   **Dynamically adjust chart scales**: A D3 or Canvas chart can redraw itself with new scales or aspect ratios when its container changes.
*   **Implement virtualized lists**: Determine how many items can fit in the viewport of a scrollable container.
*   **Create responsive grid layouts without media queries**: Adjust the number of columns or item sizes based on the container's available width, rather than the global viewport.
*   **Handle text overflow**: Calculate if text has overflowed its container and dynamically add an 'expand' button.

## Trade-offs and Gotchas

While `ResizeObserver` is a fantastic API, there are a couple of things to keep in mind:

*   **Browser Support**: It's widely supported now (all evergreen browsers), but if you need to support very old browsers (e.g., IE11), you'll need a polyfill. For most modern web development, this isn't an issue.
*   **Looping Behaviour**: If your `ResizeObserver` callback directly changes the size of the observed element, it can create an infinite loop. For example, if you read the width and then set `element.style.width = newWidth + 'px'`, that `newWidth` might trigger another resize event. The `ResizeObserver` specification explicitly addresses this by preventing infinite loops and ensuring callbacks are fired efficiently. My `useMeasure` hook only *reads* the dimensions, it doesn't modify the observed element's style, so it's safe from this particular issue.
*   **`contentRect` vs `borderBoxSize` / `devicePixelContentBoxSize`**: `entry.contentRect` gives you the size of the element's content box, excluding padding, border, and margin. Newer `ResizeObserverEntry` properties like `borderBoxSize` and `devicePixelContentBoxSize` offer more granular control over what dimensions are reported, but `contentRect` is usually sufficient for most UI layout needs and has broader browser support for these specific properties.

## Wrapping up

Stop fighting with `window.resize` or trying to guess your component's dimensions. `ResizeObserver` is the declarative, performant, and robust way to get your React components to react to their own size changes. The `useMeasure` hook pattern makes integrating this powerful API into your React applications seamless. Try adding it to a dashboard component or a custom chart in your next project. You'll immediately see the benefit of your UI components truly understanding their own space.