How do you use refs to interact with DOM nodes?

A ref gives you an escape hatch to the underlying DOM node. During the first render the ref is null; React assigns the node after it creates and commits it. That is why DOM reads and writes belong in effects or event handlers, not in the render body.

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

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <form>
      <label htmlFor="search">Search</label>
      <input id="search" ref={inputRef} type="search" />
    </form>
  );
}

Reasonable DOM ref uses

• Moving focus after navigation or opening a dialog
• Measuring an element before positioning a tooltip
• Scrolling an element into view
• Passing a node to a chart, map or video library

Prefer declarative React for anything React can render. Do not use a ref to set text, toggle classes or attach event listeners that JSX could handle. Direct DOM mutation bypasses React's model and can be overwritten on the next render.

function VideoPlayer({ src }) {
  const videoRef = useRef(null);

  function play() {
    videoRef.current?.play();
  }

  return (
    <div>
      <video ref={videoRef} src={src} controls />
      <button onClick={play}>Play</button>
    </div>
  );
}