Callback Refs vs Object Refs in React

A ref can be either an object with a current property or a function. Object refs are the common choice, while callback refs run your code whenever a node attaches or detaches. The difference is when and how often your code executes.

The two kinds of ref at a glance

Both are escape hatches, and neither triggers a re-render on its own.

An object ref

Call useRef and attach the result to an element. React stores the DOM node in current.

App.jsx

import { useRef } from "react";
 
function SearchBox() {
  const inputRef = useRef(null);
 
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}

Clicking the button focuses the input. The object ref is the simplest way to keep one node around, and it is enough for most focus, scroll, and measure cases.

A callback ref

Pass a function instead. React calls it with the node after the element attaches, and with null when the element detaches.

App.jsx

import { useState } from "react";
 
function Box() {
  const [width, setWidth] = useState(0);
 
  return (
    <div ref={(node) => node && setWidth(node.offsetWidth)} style={{ width: "50%" }}>
      Width: {width}px
    </div>
  );
}

When the div attaches, the callback records its width in state, and the box shows that width. The callback runs after commit, so the node exists and has layout.

Clean up in a callback ref

A callback ref can return a cleanup function. React calls it when the node detaches.

App.jsx

<li
  ref={(node) => {
    if (!node) return;
    map.set(node.id, node);
    return () => map.delete(node.id);
  }}
/>

Here map is a Map stored in a parent ref. Each item adds itself on attach and removes itself on detach, which keeps the map accurate for a changing list.

Strict Mode runs callbacks twice

In development, Strict Mode runs a callback ref once with the node, then once with null, then once with the node again. The cleanup must handle that repeated cycle without error. This is a stress test, not a production double render.

Which should you use?

Use an object ref when you need one stable node and plan to read it later. Use a callback ref when you must run logic the moment a node attaches or detaches, or when you need a ref for every item in a dynamic list. Both kinds still need a custom component to forward them, as covered in how to pass refs between components.

What to learn next

Passing refs down through custom components pairs with both kinds. Continue with how to integrate third-party DOM libraries.