What are React 19 ref cleanup functions?

Question

Accepted Answer

**React 19** introduces **cleanup functions** in ref callbacks. When you return a function from a ref callback, React calls it when the component **unmounts** or when the **ref changes** (the element is replaced). **Before React 19 — cleanup required useEffect:** ```tsx function TrackedElement() { const ref = useRef(null); useEffect(() => { const node = ref.current; if (!node) return; // Setup const observer = new ResizeObserver(handleResize); observer.observe(node); // Cleanup return () => observer.disconnect(); }, []); return

Content

; } ``` **After React 19 — cleanup colocated with ref:** ```tsx function TrackedElement() { return (

{ if (node) { // Setup: observe element const observer = new ResizeObserver(handleResize); observer.observe(node); // Cleanup: stop observing (React 19) return () => observer.disconnect(); } }} > Content

); } ``` **When cleanup runs:** 1. **Component unmounts** — the element is removed from the DOM 2. **Ref changes** — the element is replaced (e.g., conditional rendering) 3. **Before the new ref callback** is called — cleanup runs first, then setup **Practical examples:** **ResizeObserver:** ```tsx function ResizableBox() { return (

{ if (node) { const observer = new ResizeObserver(entries => { console.log("Size:", entries[0].contentRect); }); observer.observe(node); return () => observer.disconnect(); } }} > Resize me

); } ``` **IntersectionObserver:** ```tsx function VisibleTracker() { return (

{ if (node) { const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { console.log("Element visible!"); } }); observer.observe(node); return () => observer.disconnect(); } }} > Track me

); } ``` **Benefits:** - **No need for separate useEffect** for cleanup — setup and cleanup are colocated - **Cleaner code** for subscriptions, observers, timers - **Less boilerplate** — no more `useRef` + `useEffect` patterns - **Works with conditional rendering** — cleanup runs when element changes

React: What are React 19 ref cleanup functions?