Callback Refs vs. Object Refs

The plain-language idea

useRef is the ref API most people learn first: it hands back a stable { current: null } object, React fills in current once the DOM node mounts, and you read .current — usually inside a useEffect — whenever you need it. That's the object-ref style.

A callback ref skips the object entirely. Instead of ref={myRef}, you pass ref={(node) => { ... }} — a function. React calls that function with the DOM node the instant it's attached, and calls it again with null the instant it's detached. There's no intermediate object to read .current off of later; the node arrives as an argument, exactly when it exists.

See it in a real thing: measuring on mount without an effect

function AutoSizingPanel() {
  const [height, setHeight] = useState(0);

  const measureRef = useCallback((node) => {
    if (node) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div ref={measureRef} className="panel">
      Panel is {height}px tall
    </div>
  );
}

With useRef, measuring on mount means: attach the ref, then reach for a useEffect with an empty dependency array to read .current after the render commits — because during render, .current is still null. The callback ref collapses that two-step dance into one: React invokes it the moment the node is attached, so node is guaranteed non-null and already in the DOM, no effect needed at all. This matters most when the element you're measuring can mount and unmount repeatedly (a conditionally-rendered node, an item re-entering a list) — a callback ref reacts to that specific node's attach/detach, where an effect keyed on a ref object wouldn't re-run just because the underlying DOM node changed.

React 19 adds a real quality-of-life feature here: a callback ref can now return a cleanup function, exactly like useEffect does.

const measureRef = useCallback((node) => {
  if (!node) return;
  const observer = new ResizeObserver(() => {
    setHeight(node.getBoundingClientRect().height);
  });
  observer.observe(node);
  return () => observer.disconnect(); // React 19: called automatically on detach
}, []);

Before React 19, you had to manually handle the null case yourself (if (node === null) { cleanup(); return; } inside the same callback) to tear down anything you set up on attach. Now React calls the returned function for you when the node unmounts, the same lifecycle shape effects already have.

What people usually miss

Watch out

• An inline arrow function as a callback ref gets called twice on every render — once with null, once with the new node — because React sees a new function reference each time and treats it as "the old ref detached, a new one attached." Wrapping it in useCallback (or defining it outside the component) is usually what you actually want.
• useRef's .current doesn't trigger a re-render when it changes, and neither does a callback ref firing — in the example above, setHeight is what causes the re-render, not the ref itself. Refs of both kinds are fundamentally about escaping React's render cycle, not participating in it.
• The React 19 cleanup-function return is opt-in by shape, not a new API to import. Any callback ref that returns a function now gets that function called on detach — there's no new hook or prop, just a change in what React does with an existing return value.

The genealogy: refs are the escape hatch from declarative rendering

Both ref styles exist to answer the same need: sometimes you need an actual, imperative handle on something React normally manages for you — this is the same motivation behind forwardRef and useImperativeHandle in this track's ref-exposure lesson, just applied to a DOM node directly instead of a custom component's internals.