How to Access and Measure DOM Elements in React

React renders elements from data, but it cannot tell you their size. Layout is a browser concern that only exists after React commits the DOM, so measuring a box, a list item, or a tooltip position requires stepping outside render with a ref. This article covers reading a node once, staying in sync as it resizes, and cleaning up.

Get a reference to the node

Declare a ref and attach it to the element you want to measure. React fills the ref during the commit phase, so read it later from an Effect or an event handler.

App.jsx

import { useRef } from "react";
 
function Card() {
  const cardRef = useRef(null);
 
  return <div ref={cardRef}>A card</div>;
}

On the first render the node does not exist yet, so cardRef.current is null. After React creates the div and puts it on the screen, cardRef.current points to that DOM node.

Measure once after mount

To capture the size as soon as the element appears, read getBoundingClientRect inside an Effect. The Effect runs after commit, when the node exists and has layout.

App.jsx

import { useRef, useEffect, useState } from "react";
 
function SizedCard() {
  const cardRef = useRef(null);
  const [size, setSize] = useState(null);
 
  useEffect(() => {
    const rect = cardRef.current.getBoundingClientRect();
    setSize({ width: rect.width, height: rect.height });
  }, []);

The Effect reads the rectangle after the DOM commits and stores the width and height in state. This single snapshot is all you need when the element size never changes.

App.jsx

  return (
    <>
      <div ref={cardRef} style={{ width: "16rem" }}>A card</div>
      {size && <p>{Math.round(size.width)} by {Math.round(size.height)} pixels</p>}
    </>
  );
}

The page shows the measured size below the card. The empty dependency array runs the Effect once, which is correct for a single snapshot.

Stay in sync with ResizeObserver

A one-time measurement goes stale when the browser window changes size. ResizeObserver watches the node and reports every size change.

App.jsx

import { useRef, useEffect, useState } from "react";
 
function ResponsiveCard() {
  const cardRef = useRef(null);
  const [width, setWidth] = useState(0);
 
  useEffect(() => {
    const node = cardRef.current;
    const observer = new ResizeObserver((entries) => {
      setWidth(entries[0].contentRect.width);
    });
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

The observer starts watching the card and reports each new content width as layout changes. The returned cleanup disconnects it when the component unmounts.

App.jsx

  return (
    <>
      <div ref={cardRef} style={{ width: "60%" }}>A responsive card</div>
      <p>Current width: {Math.round(width)} pixels</p>
    </>
  );
}

The width label updates as you resize the window. The cleanup calls disconnect, so the observer stops watching after the component unmounts. Without that cleanup, the observer would keep a reference to a removed node.

Measure in an event handler

Some measurements only matter in response to an interaction, and those can run directly in the handler.

App.jsx

import { useRef } from "react";
 
function Tooltip() {
  const targetRef = useRef(null);
 
  function handleClick() {
    const rect = targetRef.current.getBoundingClientRect();
    console.log(rect.left, rect.top);
  }
 
  return <button ref={targetRef} onClick={handleClick}>Show position</button>;
}

Clicking the button reads its current position from the committed DOM. No Effect is involved because the measurement is caused by a specific user action.

Use useLayoutEffect when it must run before paint

Measurements read after paint can cause a visible flicker when you immediately use them to position something. useLayoutEffect runs after the DOM is mutated but before the browser paints, so it is the right tool for that case. See useEffect vs useLayoutEffect for when to pick each one.

What to learn next

Measurements and observers pair with a broad ref toolkit. Continue with useRef vs useState to know when a value belongs in a ref instead of state.