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 where every change makes React redraw the screen.
useRef(initial) returns the same object on every render, shaped like { current: initial }. You may read and write current freely in event handlers and effects. React does not watch it, so nothing re-renders.
Use a ref for things you need to remember between renders but never show on screen: an interval ID, the previous value of a prop, a flag that says a request is in flight. Avoid reading or writing it during render, because that makes the output depend on something React cannot track.
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."
Common mistakes
- Showing a ref value in JSX and expecting it to update.