Learn the concept
Hooks
useRef creates a mutable reference that persists across renders without causing re-renders when changed. Use it for accessing DOM elements, storing mutable values that don't need to trigger updates, and keeping references to timers or previous values.
What useRef Does:
.current property.current doesn't trigger re-renderUse Cases:
ref can be passed as a regular prop to function components — forwardRef is no longer neededuseRef vs useState:
useRef vs createRef:
React 19 Changes:
ref is now a regular prop for function components (no more forwardRef)function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
const selectAll = () => {
inputRef.current.select();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus</button>
<button onClick={selectAll}>Select All</button>
</div>
);
}
// Scrolling to element
function ScrollToTop() {
const topRef = useRef(null);
const scrollToTop = () => {
topRef.current.scrollIntoView({ behavior: 'smooth' });
};
return (
<div>
<div ref={topRef} />
{/* ... lots of content ... */}
<button onClick={scrollToTop}>Back to Top</button>
</div>
);
}Using refs to imperatively control HTML5 video elements (play, pause, seek, volume)
Accessing canvas elements via refs for 2D/3D rendering with requestAnimationFrame
Initializing non-React libraries (D3, Chart.js, map SDKs) on DOM elements
Build a multi-step form with automatic focus management using refs
Create a useIntersectionObserver hook using refs for lazy loading and infinite scroll