useRef

Holds a mutable value or DOM reference that persists across renders.

Since React 16.8 Spec ↗

Syntax

const ref = useRef(initialValue)

Parameters

NameTypeRequiredDescription
initialValue any Yes The initial value of the ref object's current property.

Returns

object — A stable object with a mutable current property.

Examples

function TextInput() {
  const inputRef = useRef(null);
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus
      </button>
    </>
  );
}
const renders = useRef(0);
renders.current += 1;

Notes

Mutating `ref.current` does not trigger a re-render. The ref object identity is stable for the component's lifetime. Use it for DOM nodes, timers, or any mutable value that should not cause renders. Do not read or write `ref.current` during rendering.

See also