useRef

What you'll learn

What a ref is, how to use it to focus an input or keep a value across renders, and how it differs from state.

Why it matters

Sometimes you need to talk to the real DOM (focus an input, scroll a list, measure an element), or remember a value that should not trigger a re-render, such as a timer id. Refs are the tool for both.

Explanation

useRef(initialValue) returns an object with a single property, .current:

Key facts:

• The object stays the same between renders, so what you store in .current is remembered.
• Changing .current does not cause a re-render. That is the main difference from state.
• Attach it to an element with the ref prop: <input ref={inputRef} />. After mounting, inputRef.current is the real DOM input, so you can call inputRef.current.focus().

When to use which:

• State: data that appears on the screen. Changing it should update the UI.
• Ref: data the screen does not display, or a DOM handle.

Do not read or write ref.current while rendering. Use it in event handlers and effects.

Example

Step-by-step walkthrough

1. inputRef is passed to the input's ref prop, so after the page appears inputRef.current is the real input element.
2. The Focus button calls .focus() on it, which is a DOM action React does not expose through props.
3. Clear resets the text state and then returns focus to the input.
4. renders is a ref used as a counter. We increment it during render purely to demonstrate: every keystroke re-renders (because text is state), and the count grows. Changing the ref itself does not trigger a render.
5. In real code, prefer to update refs in handlers or effects rather than during render.

Try it yourself

Click Focus, type a few characters and watch the render count increase. Then add a button that scrolls or selects the text using inputRef.current.select().

useRefReact

Editable codefunction App() { const inputRef = useRef(null); const renders = useRef(0); const [text, setText] = useState(""); renders.current += 1; return ( <div style={{ fontFamily: "system-ui" }}> <input ref={inputRef} value={text} onChange={(e) => setText(e.target.value)} placeholder="Type here" /> <button onClick={() => inputRef.current.focus()}>Focus</button> <button onClick={() => { setText(""); inputRef.current.focus(); }}>Clear</button> <p>Characters: {text.length}</p> <p>Component rendered {renders.current} times</p> </div> ); }

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using a ref for data that should appear on screen. Changing it will not update the UI.
• Reading ref.current during the first render for a DOM element. It is null until mounted.
• Forgetting .current. The ref is an object; the value is inside it.
• Overusing refs instead of props and state.

Quick quiz

Summary

• useRef gives a stable object with a .current value.
• Changing it does not re-render; use it for DOM access and hidden values.
• Use state for anything the screen should show.

Next: building forms.

const ref = useRef(0);
ref.current = 5;

function App() {
  const inputRef = useRef(null);
  const renders = useRef(0);
  const [text, setText] = useState("");

  renders.current += 1;

  function focusInput() {
    inputRef.current.focus();
  }

  function clear() {
    setText("");
    inputRef.current.focus();
  }

  return (
    <div style={{ fontFamily: "system-ui" }}>
      <input
        ref={inputRef}
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type here"
      />
      <button onClick={focusInput}>Focus</button>
      <button onClick={clear}>Clear</button>
      <p>Characters: {text.length}</p>
      <p>Component rendered {renders.current} times</p>
    </div>
  );
}