An escape hatch to reach a DOM node or persist a value without triggering a re-render.
useRef returns an object with a mutable .current property that persists across renders without causing a re-render when it changes. It serves two genuinely different purposes: attaching to a DOM element to interact with it imperatively (focusing an input, measuring an element, scrolling into view), and holding any value you want to survive across renders without it being part of what gets rendered — a timer ID, a previous value for comparison, a flag.
Because refs aren't passed down like normal props, a parent can't simply pass ref={someRef} to a custom component and expect it to reach that component's underlying DOM node — forwardRef exists specifically to let a component explicitly accept and forward a ref to whatever it wants. useImperativeHandle goes a step further, letting a component customize exactly what a parent-attached ref exposes, instead of handing over the raw DOM node.
What you'll walk away knowing