Hooksbeginner
useRef for Mutable Values and DOM Access
Understand how useRef provides a persistent mutable container that doesn't trigger re-renders, and how it's used to access DOM nodes.
useRef(initialValue) returns a plain mutable object with a single property, .current, initialized to the value you pass in. Unlike state, updating ref.current does not cause the component to re-render — the ref simply persists across renders as the same object reference.
A ref is like a whiteboard taped to the back of a filing cabinet that only you can see — you can scribble notes on it and change them anytime without anyone in the office (React's render cycle) noticing or reacting to the change.
Key Concepts
1
The most common use is accessing an underlying DOM node: when you pass a ref object to a JSX element's ref attribute, React sets ref.current to that DOM node after mounting, letting you call imperative APIs like .focus(), .scrollIntoView(), or measure dimensions with getBoundingClientRect().
refref.current.focus().scrollIntoView()getBoundingClientRect()
2
Refs are equally useful for storing any mutable value that shouldn't trigger a re-render when it changes — for example, tracking a previous value, storing a timer ID to clear later, or keeping a mutable flag across renders without the render-triggering overhead of state. This makes refs the escape hatch for imperative, non-rendering-related bookkeeping.
3
Interviewers often ask candidates to contrast useRef with useState: state changes are visible in the UI and drive re-renders, while ref changes are invisible to the render output and exist purely as an imperative side channel.
useRefuseState