What does useRef return, and does changing ref.current cause a re-render?
It returns a mutable object { current } that stays the same across renders. Changing ref.current does not trigger a re-render, so refs suit values React does not need to display, such as timer IDs or DOM nodes.
Explain it simply
A ref is a sticky note on the fridge: you can change what is written on it any time and the kitchen does not get repainted. State, by contrast, is a notice board whose every change makes React redraw the screen.
Use a ref for things you need to remember between renders but do not show: an interval ID, the previous value, a flag.
Example
function Stopwatch() {
const [secs, setSecs] = useState(0);
const timer = useRef(null);
const start = () => { timer.current = setInterval(() => setSecs(s => s + 1), 1000); };
const stop = () => clearInterval(timer.current);
return (
<>
<p>{secs}s</p>
<button onClick={start}>Start</button>
<button onClick={stop}>Stop</button>
</>
);
}What to say in the interview
"useRef returns a stable object with a mutable current property. Updating it does not re-render. I use it for DOM access and for values that must survive renders without driving the UI, like timer IDs. I do not read or write ref.current during render, apart from lazy setup."
Common mistakes
- Showing a ref value in JSX and expecting it to update.