What is the useRef Hook in React?
Learn what the useRef hook does in React: accessing DOM elements, persisting values without re-rendering, code examples, and common interview questions.
Expected Interview Answer
useRef is a React hook that returns a mutable object with a .current property that persists across renders without causing a re-render when it changes, commonly used to access DOM elements or store values between renders.
Calling useRef(initialValue) gives you a stable object whose .current you can read and write freely; unlike state, updating it does not trigger a re-render. Its two main uses are getting a direct reference to a DOM node (for focus, scroll, or measuring) and holding any mutable value that should survive re-renders but not drive the UI, such as a timer ID, a previous value, or an instance flag.
- Persists a value across renders without re-rendering
- Gives direct access to DOM elements
- Ideal for storing timer or interval IDs
- Can track a previous prop or state value
- Cheaper than state when the value shouldn't affect the UI
AI Mentor Explanation
useRef is like the scorer's private notepad beside the official scoreboard: they can jot the last ball's speed on it anytime without stopping the match or flashing it to the crowd. It persists ball to ball, but changing it never interrupts play the way updating the big display would.
Step-by-Step Explanation
Step 1
Create the ref
Call useRef(initialValue) to get an object like { current: initialValue } that stays stable across renders.
Step 2
Attach to a DOM node
Pass the ref to an element's ref attribute to capture its DOM node into ref.current.
Step 3
Read or write current
Access ref.current to read the node or stored value, and assign to it to update without re-rendering.
Step 4
Use it in effects/handlers
Interact with ref.current inside effects or event handlers, e.g. inputRef.current.focus().
Step 5
Store non-UI mutable data
Keep timer IDs, previous values, or flags in a ref when they shouldn't trigger renders.
What Interviewer Expects
- Knowing useRef returns a mutable .current object
- Understanding it does not cause re-renders
- The two use cases: DOM access and persistent mutable values
- Difference between useRef and useState
- Awareness that ref.current is null before mount
Common Mistakes
- Expecting a ref change to re-render the component
- Using useRef for values that should update the UI
- Accessing ref.current in render before the element is mounted
- Confusing useRef with createRef in function components
- Mutating ref.current during render instead of in effects or handlers
Best Answer (HR Friendly)
“useRef is a React tool that lets a component remember a value or point to an element on the page without redrawing itself. It's often used to focus an input box or to hold something like a timer that needs to stay put between updates.”
Code Example
function SearchBox() {
const inputRef = useRef(null)
useEffect(() => {
inputRef.current.focus()
}, [])
return <input ref={inputRef} placeholder="Search..." />
}function Timer() {
const countRef = useRef(0)
const intervalRef = useRef(null)
const start = () => {
intervalRef.current = setInterval(() => {
countRef.current += 1
console.log(countRef.current)
}, 1000)
}
return <button onClick={start}>Start</button>
}Follow-up Questions
- What is the difference between useRef and useState?
- Why doesn't updating a ref trigger a re-render?
- How would you store the previous value of a prop using useRef?
- How does useRef differ from createRef?
- Why is ref.current null on the first render?
MCQ Practice
1. What does useRef return?
useRef returns a plain object { current: value } that stays the same across renders and can be mutated freely.
2. What happens when you change ref.current?
Mutating ref.current does not schedule a re-render, unlike calling a state setter.
3. Which is a typical use of useRef?
Accessing and focusing a DOM node via ref.current is a classic use of useRef.
Flash Cards
What does useRef return? — A mutable object shaped like { current: initialValue } that persists across renders.
Does updating a ref re-render? — No — changing ref.current never triggers a re-render, unlike setState.
Two main uses of useRef? — Accessing DOM nodes and storing mutable values that should survive renders without affecting the UI.
When is ref.current populated for a DOM ref? — After the component mounts; it is null during the first render.