Interview questions
useState vs useRef — when to use which?
The re-render distinction and mutable-ref use cases.
What is tested: understanding that the difference is re-rendering. useState triggers a re-render on change — use it for anything visible. useRef holds a mutable value that persists without re-rendering — timer ids, the previous value, a DOM node, or an "is mounted" flag.
State is spoken aloud so everyone reacts; a ref is a note in your pocket you can rewrite without anyone noticing.
Key concepts
1
A ref is also how you access DOM nodes imperatively (focus, measure, integrate a chart library).
2
Common wrong answer: "use a ref to avoid re-renders for UI values" — but changing a ref will not update the screen. Follow-ups: "why not store derived UI data in a ref?" (it won’t re-render) and "how do you read the previous prop value?" (a ref updated in an effect).
Common wrong answer:Follow-ups:
jsx
function usePrevious(value) {
const ref = useRef();
useEffect(() => { ref.current = value; }, [value]);
return ref.current; // previous value, no re-render
}