What is useRef in React?
Learn what useRef does in React, how it differs from useState, how to access DOM nodes directly, and common use cases like timers and previous values.
Expected Interview Answer
useRef is a React hook that returns a mutable object with a single .current property, letting you hold a value that persists across renders without causing a re-render when it changes.
Unlike useState, updating a ref's .current value does not trigger a re-render, making refs ideal for storing values you need to track but don't want tied to the render cycle, such as timer IDs, previous values, or render counts. Refs are also the standard way to get a direct reference to a DOM node, by passing the ref object to an element's ref attribute, which React populates with the actual DOM node after mounting. Because ref updates don't cause re-renders, reading ref.current during render can show a stale or unexpected value if it changed outside of React's normal flow, so refs work best for imperative escape hatches rather than data that drives what's displayed. Typical uses include focusing an input, measuring an element's size, or integrating with non-React libraries that need direct DOM access.
- Persists a mutable value across renders without re-rendering
- Provides direct access to DOM nodes
- Useful for timers, previous values, and instance-like variables
- Avoids unnecessary re-renders for non-visual data
- Enables integration with imperative, non-React APIs
AI Mentor Explanation
useRef is like a fielder's private notebook where they jot down the bowler's last three deliveries for their own reference, never announcing it over the loudspeaker to the crowd. They can flip back and check it anytime without interrupting play or triggering any public scoreboard update.
Step-by-Step Explanation
Step 1
Import useRef
Import useRef from 'react' in the component file.
Step 2
Create the ref
Call useRef(initialValue) to get an object with a mutable .current property.
Step 3
Attach to a DOM element (optional)
Pass the ref object to an element's ref attribute to get direct access to that DOM node after mounting.
Step 4
Read or update .current
Access or mutate ref.current directly; this does not trigger a re-render.
Step 5
Use for imperative logic
Use the ref to focus inputs, measure elements, store timer IDs, or track previous values.
What Interviewer Expects
- Explains useRef returns a mutable object persisting across renders
- Knows updating .current does not cause a re-render
- Describes using refs for direct DOM access
- Contrasts refs with state for non-visual, imperative data
- Names practical use cases like timers or previous-value tracking
Common Mistakes
- Using a ref for data that should actually drive rendering, like state
- Expecting the UI to update automatically when ref.current changes
- Reading ref.current during render and expecting it to be reactive
- Forgetting refs persist across renders but are reset only on unmount
- Confusing useRef with createRef, which recreates the ref on every render in class components
Best Answer (HR Friendly)
“useRef lets a component remember a value or hold onto a reference, like a specific input field, without causing the screen to refresh every time that value changes. It's often used to directly interact with page elements, such as focusing a text box.”
Code Example
import { useRef, useEffect, useState } from 'react';
function SearchBox() {
const inputRef = useRef(null);
const renderCount = useRef(0);
const [query, setQuery] = useState('');
useEffect(() => {
inputRef.current.focus(); // direct DOM access, no re-render caused
}, []);
renderCount.current += 1; // updates silently, doesn't trigger re-render
return (
<input
ref={inputRef}
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
);
}Follow-up Questions
- How does useRef differ from useState in terms of re-rendering?
- How do you access a DOM node using useRef?
- What are typical use cases for useRef beyond DOM access?
- Does mutating ref.current during render cause any warning or issue?
- What is the difference between useRef and createRef?
MCQ Practice
1. What does updating a ref's .current value do to the component?
Mutating ref.current is intentionally non-reactive; it persists the value without causing React to re-render the component.
2. What is a common use of useRef?
A very common use of useRef is attaching it to an element's ref attribute to directly access the underlying DOM node.
3. What does useRef return?
useRef returns a plain object with a single mutable .current property that persists across renders.
Flash Cards
What does useRef return? — A mutable object with a single .current property that persists across renders.
Does changing ref.current cause a re-render? — No, updating a ref's current value never triggers a re-render on its own.
What is a common use case for useRef? — Getting direct access to a DOM node, such as to focus an input imperatively.
When should you prefer state over a ref? — When the value should visually drive what's rendered on screen.