Describe the `useRef` hook and its typical use cases.

Q: Describe the `useRef` hook and its typical use cases.

**Target Audience:** Engineers preparing for React interviews — assumes state and effects. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The render counts in section 3 were produced by mutating a ref repeatedly on React 19.2.8 and counting component invocations. ## 1. Why This Even Matters — A Story First A kitchen has a whiteboard facing the room and a notepad in a drawer. Change the whiteboard and everyone looks up and reacts. Write in the notepad and nothing happens — which is precisely why the oven timer, the page you left off on, and the delivery you are expecting all live in the notepad. Nobody needs to react to those; you just need them to still be there later. State is the whiteboard. A ref is the notepad. Choosing between them is choosing whether anyone should react. ## 2. The Core Idea 📌 **Interview term: useRef ** — returns a **mutable object** with a sin

The problem

Question presented to candidate: "What does useRef give you, and when would you reach for it rather than state?"

What a strong answer should cover:

It returns a mutable object with a current property that persists for the component's lifetime.
Writing to .current never triggers a re-render. That is the defining property, and it is the feature rather than a limitation.
Two distinct use categories: DOM access (attach via the ref attribute) and instance values (timer ids, previous values, mutation flags, mutable caches).
The deciding question: does the UI need to update when this changes? Yes means state; no means a ref.
Do not read .current during render to decide output — it is not a reactive value, so the render can disagree with reality.
useRef(initial) evaluates the initial value on every render even though it is only used once, so avoid expensive expressions there.
React 19: ref is a plain prop, and ref callbacks can return a cleanup function.
Related: useImperativeHandle for exposing a custom API rather than the raw node; a ref callback for measuring on attach.

Clarifying questions expected:

"Does anything rendered depend on this value?" — that single question decides ref versus state.

Code / implementation expected: Yes — a DOM ref and an instance-value ref, ideally showing the render count not moving.

hooks
useref
dom manipulation
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for React interviews — assumes state and effects. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The render counts in section 3 were produced by mutating a ref repeatedly on React 19.2.8 and counting component invocations.

1. Why This Even Matters — A Story First

A kitchen has a whiteboard facing the room and a notepad in a drawer. Change the whiteboard and everyone looks up and reacts. Write in the notepad and nothing happens — which is precisely why the oven timer, the page you left off on, and the delivery you are expecting all live in the notepad. Nobody needs to react to those; you just need them to still be there later.

State is the whiteboard. A ref is the notepad. Choosing between them is choosing whether anyone should react.

2. The Core Ide

The solution is hidden so you can try first

6 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactA DOM ref and an instance-value ref, with the render count standing still

Open in playground

import { useRef, useState, useEffect } from "react";

// A tiny helper built entirely on the "persists but does not render" property.
function usePrevious(value) {
  const ref = useRef(undefined);
  useEffect(() => { ref.current = value; }, [value]);
  return ref.current;   // the value from the PREVIOUS render
}

export default function App() {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  // 1. A DOM ref — reaching the node imperatively.
  const inputRef = useRef(null);

  // 2. Instance values — remembered, never displayed as they change.
  const clicksNotShown = useRef(0);
  const intervalId = useRef(null);
  const renders = useRef(0);
  renders.current++;

  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    // The id has to persist so cleanup can clear it — but nothing renders it.
    intervalId.current = setInterval(() => setCount((c) => c + 1), 800);
    return () => clearInterval(intervalId.current);
  }, [running]);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 500 }}>
      <h4 style={{ marginTop: 0 }}>DOM ref</h4>
      <input ref={inputRef} placeholder="click the button to focus me" style={{ width: 240 }} />{" "}
      <button onClick={() => inputRef.current?.focus()}>focus</button>

      <h4>Instance value — mutating it renders nothing</h4>
      <p style={{ fontSize: 14 }}>
        component renders: <strong>{renders.current}</strong> · ref counter (read
        only when something else renders): <strong>{clicksNotShown.current}</strong>
      </p>
      <p>
        <button onClick={() => { clicksNotShown.current++; }}>
          bump the ref (nothing happens)
        </button>{" "}
        <button onClick={() => setCount((c) => c + 1)}>
          bump state (re-renders, revealing the ref)
        </button>
      </p>

      <h4>State, and the previous value kept in a ref</h4>
      <p style={{ fontSize: 14 }}>
        count: <strong>{count}</strong> · previous:{" "}
        <strong>{previousCount === undefined ? "—" : previousCount}</strong>
      </p>
      <p>
        <button onClick={() => setRunning((r) => !r)}>
          {running ? "stop" : "start"} the interval
        </button>
      </p>

      <p style={{ color: "#666", fontSize: 13 }}>
        Press the ref button several times — the render count does not move and
        neither does the displayed number. Then press the state button once and
        every hidden increment appears at the same moment.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.