React 19 supports cleanup functions in ref callbacks.
Code:
1function TrackedElement() {2 return (3 <div4 ref={(node) => {5 if (node) {6 // Setup7 const observer = new ResizeObserver(handleResize);8 observer.observe(node);910 // Cleanup11 return () => observer.disconnect();12 }13 }}14 >15 Content16 </div>17 );18}
When cleanup runs:
vs useEffect:
Benefits: