mediumFrontend

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

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

**Core concept (TL;DR).** useRef returns a mutable object — { current } — that **persists across renders** but does **not** trigger a re-render when you change it. Two main uses: (1) get a handle to a **DOM node**, and (2) store a **mutable value** that should survive renders without being state (timer ids, the previous value, instance-like data). A persistent box that doesn't cause re-renders <text x="135" y="66" fill="#06b6d4" font-size="11" font-weight="700" text-anch

1.1k views

Understand the problem

Explain what useRef does and provide examples of common situations where it is applied.

hooksuserefdom manipulationperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

DOM focus + render-independent counter

import { useRef, useState } from "react";

export default function App() {
  const inputRef = useRef(null);   // DOM handle
  const renders = useRef(0);       // mutable value, no re-render
  const [, force] = useState(0);
  renders.current++;

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <input ref={inputRef} placeholder="type here" />
      <button onClick={() => inputRef.current.focus()}>Focus input</button>
      <p>render count (via ref): {renders.current}</p>
      <button onClick={() => force((n) => n + 1)}>Re-render</button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the purpose of the `deps` array in `useEffect` and `useCallback`?

How does React handle security concerns like XSS?