React 19 supports cleanup functions in ref callbacks.
Code:
1function TrackedElement() {2 return (3 <div4 ref={(node) => {5 if (node) {6 // Setup: observe element7 const observer = new ResizeObserver(handleResize);8 observer.observe(node);910 // Cleanup: stop observing11 return () => observer.disconnect();12 }13 }}14 >15 Content16 </div>17 );18}
When cleanup runs:
vs useEffect:
Example — subscription:
1function DataComponent({ url }) {2 return (3 <div4 ref={(node) => {5 if (node) {6 const unsubscribe = subscribe(url, (data) => {7 node.textContent = data;8 });9 return unsubscribe;10 }11 }}12 />13 );14}
Benefits: