What is useRef in React?

Direct answer

useRef stores a mutable value that persists between renders without causing a re-render when its current property changes.

Search.jsx

import { useRef } from "react";

function Search() {
  const inputRef = useRef(null);

  function focusSearch() {
    inputRef.current?.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusSearch}>Focus</button>
    </>
  );
}

DOM access: focus, scroll, or measure an element.
Mutable non-visual value: store timer IDs or other values that should survive renders without changing JSX.