Refs and the DOM

useRef returns a mutable object whose .current persists across renders without causing re-renders. Use refs for DOM access (focus, measure, scroll), timers and other values not needed for rendering. Attach to elements with the ref attribute; in React 19, function components accept ref as a regular prop, and ref callbacks can return a cleanup function.

import { useRef } from "react";

export function SearchField({ ref, ...props }: React.ComponentProps<"input">) {
  return <input type="search" ref={ref} {...props} />;
}

export function SearchBar() {
  const inputRef = useRef<HTMLInputElement>(null);
  const timer = useRef<number | undefined>(undefined);

  function onChange(value: string) {
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => search(value), 300);   // debounce
  }

  return (
    <>
      <SearchField ref={inputRef} onChange={(e) => onChange(e.target.value)} />
      <button onClick={() => inputRef.current?.focus()}>Focus search</button>
    </>
  );
}

Common pitfalls

• Reading or writing ref.current during render (except lazy initialization).
• Using refs to store data that should trigger UI updates.
• Manipulating DOM managed by React (removing nodes React renders).

Key points

• Refs persist without re-rendering
• Use for DOM access and timers
• ref is a prop in React 19

Further reading: react.dev: Referencing values with refs