1---
2title: Use ResizeObserver for Measurement
3impact: MEDIUM
4tags: container, resize-observer, performance
5---
6 
7## Use ResizeObserver for Measurement
8 
9Use ResizeObserver to track element dimensions. It fires on resize without causing layout thrashing.
10 
11**Incorrect (measuring on every render):**
12 
13```tsx
14function useMeasure(ref) {
15  const [bounds, setBounds] = useState({ width: 0, height: 0 });
16  useEffect(() => {
17    if (ref.current) {
18      const rect = ref.current.getBoundingClientRect();
19      setBounds({ width: rect.width, height: rect.height });
20    }
21  });
22  return bounds;
23}
24```
25 
26**Correct (ResizeObserver):**
27 
28```tsx
29function useMeasure() {
30  const [element, setElement] = useState(null);
31  const [bounds, setBounds] = useState({ width: 0, height: 0 });
32  const ref = useCallback((node) => setElement(node), []);
33 
34  useEffect(() => {
35    if (!element) return;
36    const observer = new ResizeObserver(([entry]) => {
37      setBounds({
38        width: entry.contentRect.width,
39        height: entry.contentRect.height,
40      });
41    });
42    observer.observe(element);
43    return () => observer.disconnect();
44  }, [element]);
45 
46  return [ref, bounds];
47}
48```
49