useRef

Learning objectives#

• Access DOM nodes with ref={myRef}
• Focus, scroll and measure elements
• Store mutable values such as timer ids
• Know when to use a ref instead of state

Explanation#

const inputRef = useRef(null); then <input ref={inputRef} />. After rendering, inputRef.current is the DOM element: inputRef.current.focus().

A ref is a plain object { current: ... } that React keeps for the component’s lifetime. Changing ref.current does NOT re-render.

Use refs for values that matter to your code but not to what is displayed: timer ids, the previous value, whether a request is still current.

If the screen must change when a value changes, use state, not a ref.

Read and write refs in event handlers and effects, not during rendering. In React 19, ref is a normal prop, so your own components can accept ref directly.

Syntax#

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

5const timerId = useRef(null);
6timerId.current = setInterval(tick, 1000);

Code example: A stopwatch and an auto-focusing search#

1import { useEffect, useRef, useState } from 'react';
2

3export default function Stopwatch() {
4  const [elapsed, setElapsed] = useState(0);          // shown on screen → state
5  const timerId = useRef(null);                       // not shown → ref
6  const searchRef = useRef(null);
7  const renders = useRef(0);
8  renders.current += 1;                               // counting renders does not cause one
9

10  useEffect(() => {
11    searchRef.current.focus();                        // DOM access after mount
12    return () => clearInterval(timerId.current);      // clean up on unmount
13  }, []);
14

15  function start() {
16    if (timerId.current) return;                      // already running
17    timerId.current = setInterval(() => setElapsed(s => s + 1), 1000);
18  }
19

20  function stop() {
21    clearInterval(timerId.current);
22    timerId.current = null;
23  }
24

25  return (
26    <>
27      <input ref={searchRef} placeholder="I am focused on load" aria-label="Search" />
28      <p>{elapsed} s</p>
29      <button onClick={start}>Start</button>
30      <button onClick={stop}>Stop</button>
31      <button onClick={() => { stop(); setElapsed(0); }}>Reset</button>
32      <small> (rendered {renders.current} times)</small>
33    </>
34  );
35}

The search box is focused as soon as the component appears. Start counts seconds; Stop pauses; Reset sets 0 s. Clicking Start twice does not create two timers, because the running timer’s id is kept in a ref.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. elapsed is state because it is displayed.
2. timerId is a ref: the id is needed by stop() but changing it should not re-render.
3. searchRef.current is the input element, focused in an effect after mount.
4. The effect’s cleanup clears the interval if the component disappears.

Real-world use case#

Common mistakes#

Best practices#

• State for what users see, refs for what code needs
• Access DOM refs in effects or handlers
• Clean up timers stored in refs
• Prefer declarative props over imperative DOM calls when possible

Remember this#

Practice exercise#

1import { useRef, useState } from 'react';
2

3export default function CouponCopy() {
4  const inputRef = useRef(null);
5  const [copied, setCopied] = useState(false);
6

7  function copy() {
8    inputRef.current.select();
9    navigator.clipboard?.writeText(inputRef.current.value);
10    setCopied(true);
11  }
12

13  return (
14    <>
15      <input ref={inputRef} readOnly value="SAVE10" aria-label="Coupon code" />
16      <button onClick={copy}>Copy</button>
17      {copied && <span> Copied!</span>}
18    </>
19  );
20}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.