What is useRef used for? How is it different from state?

Quick answer

useRef holds a mutable { current } value that persists across renders without causing a re-render. Use it for DOM nodes and values that shouldn't trigger rendering.

In detail

Two main uses: referencing a DOM node (ref={myRef} then myRef.current.focus()), and storing a mutable value across renders (a timer id, a previous value) that the UI doesn't depend on. Unlike state, writing to a ref never re-renders. Use state when the screen must update; use a ref otherwise.

const inputRef = useRef(null);
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>

const renders = useRef(0); renders.current++; // no re-render

Why interviewers ask this: Tests the state-vs-ref distinction that confuses many.

Common follow-up questions

→Why doesn't updating a ref re-render?

This is 1 of 118+ questions in the React Interview Kit

Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.

⚡ Get the React Interview Kit → ₹399

PreviousWhat are the Rules of Hooks and why do they exist?Next useMemo vs useCallback — what's the difference and when do you actually need them?

Full kit

React Interview Kit · ₹399

Get it →