Referencing values with refs

So far everything in your components has been driven by state: change state, React re-renders, the screen updates. But sometimes you need to remember something that has nothing to do with what is on screen, such as a timer ID. And sometimes you need to reach the real browser element, for example to put the cursor in a text box.

For both jobs React gives you an escape hatch: a ref. Escape hatches let you step outside React's normal data flow. Use them sparingly, but know they are there.

A value that doesn't trigger a renderCopy Anchor Link

Call useRef with an initial value. It returns an object with a single property, current:

import { useRef } from 'react';

const ref = useRef(0); // ref is { current: 0 }

You can read and change ref.current whenever you like. React keeps the same object between renders, but changing it does not re-render your component.

The count goes up every click, yet the component never re-renders. That makes refs a poor fit for anything you display. If you want the number shown on the button, that is state.

A real use: a stopwatchCopy Anchor Link

A stopwatch needs setInterval, which returns an ID. To stop it later you call clearInterval(id), so you must remember the ID. It is never shown on screen, so it belongs in a ref. The elapsed time is shown, so it belongs in state.

Refs to DOM elementsCopy Anchor Link

The most common use of refs is to reach a real DOM node. Pass your ref object to the ref attribute of a JSX tag. After React puts that element on the page, it sets ref.current to the DOM node, so you can call browser methods like focus() or scrollIntoView().

Here is the order of events. On the first render inputRef.current is null, because the input doesn't exist yet. Then React creates the <input> and sets inputRef.current to it. By the time the user clicks the button, the ref points at the input.

Passing a ref to your own componentCopy Anchor Link

What if the <input> lives inside a component you wrote, like <SearchInput />? In React 19 you pass ref like any other prop, and the child forwards it to the element it renders.

import { useRef, useState } from 'react';

export default function AddBookForm() {
  const [title, setTitle] = useState('');
  const [titles, setTitles] = useState([]);
  const inputRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    setTitles([...titles, title]);
    setTitle('');
    inputRef.current.focus();
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          ref={inputRef}
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />{' '}
        <button type="button" onClick={handleSubmit} disabled={!title}>
          Add
        </button>
      </form>
      <ul>
        {titles.map((t, i) => (
          <li key={i}>{t}</li>
        ))}
      </ul>
    </>
  );
}