Ref Callbacks and Cleanup in React 19

🔍 What Are Ref Callbacks?

In React, a ref callback is an alternative to the useRef hook that lets you imperatively assign and clean up references to DOM elements. Instead of creating a ref with useRef, you pass a function to the ref attribute, which React will call with the DOM element when it's mounted or null when unmounted. 🔄

// Basic Ref Callback
function MyComponent() {
  const handleRef = (element) => {
    if (element) {
      console.log("Mounted:", element);
    } else {
      console.log("Unmounted");
    }
  };

  return <div ref={handleRef}>Hello Ref Callback</div>;
}

⚙️ What's New in React 19?

In React 19, ref callbacks receive **automatic cleanup**. This means:

• 📤 When a component unmounts or the element is replaced, React calls the callback with null
• 🧼 You can perform cleanup directly inside the callback

📦 Why Use Ref Callbacks Instead of useRef?

While useRef is great for stable references, ref callbacks give you:

• 🔥 More flexibility to perform side effects on mount/unmount
• ⛓️ Automatic cleanup via null
• 💡 Access to the DOM as soon as it’s attached

🛠️ Example: Measuring an Element’s Size

function Box() {
  const refCallback = (node) => {
    if (node) {
      const { width, height } = node.getBoundingClientRect();
      console.log(`Box size: ${width}x${height}`);
    }
  };

  return <div ref={refCallback} style={{ width: 200, height: 100 }}>Box</div>;
}

🚀 The size is measured only when the DOM is mounted — without needing useEffect.

🧼 Example: Clean Up Scroll Listener Automatically

function ScrollTracker() {
  const refCallback = (node) => {
    if (!node) return; // cleanup phase

    const handleScroll = () => {
      console.log("Scrolling...");
    };

    node.addEventListener("scroll", handleScroll);

    // Cleanup automatically on unmount or reassign
    return () => {
      node.removeEventListener("scroll", handleScroll);
      console.log("Removed scroll listener");
    };
  };

  return (
    <div
      ref={refCallback}
      style={{ overflow: 'scroll', height: '100px' }}
    >
      <div style={{ height: '300px' }}>Scroll Me</div>
    </div>
  );
}

💡 In React 19, if a ref callback returns a function, React will automatically call it for cleanup when the element is removed or changed.

🔄 When to Use Ref Callbacks

Use ref callbacks when:

• 🔗 You need to interact with the DOM immediately after mounting
• 🧹 You want to set up and clean up event listeners
• 📏 You need to measure elements without triggering extra renders

🚫 Avoid Common Mistakes

• ❌ Don’t use unstable callback references (create function inline every render)
• ✅ Use useCallback to memoize the ref function

// ✅ Good practice
const refCallback = useCallback((node) => {
  if (node) {
    // setup
  }
  return () => {
    // cleanup
  };
}, []);

📌 Summary of Ref Callback vs useRef

🚀 Final Thoughts

Ref callbacks have always existed, but in React 19 they become a powerful, first-class way to interact with the DOM safely and cleanly. By supporting automatic cleanup, they simplify component logic and reduce bugs. Use them when you need direct control over DOM behavior — and let React handle the cleanup for you. ⚡🧼