Refs и работа с DOM

useRef хранит изменяемое значение, изменение которого не вызывает перерисовку. Два применения: ссылка на DOM-элемент и «переменная экземпляра» (идентификатор таймера, предыдущее значение).

function SearchBox() {
  const input = useRef(null);
  useEffect(() => input.current.focus(), []);
  return <input ref={input} />;
}

Что важно знать

• Не читать и не менять ref.current во время рендера — только в эффектах и обработчиках.
• В React 19 ref передаётся компоненту как обычный prop; forwardRef нужен только в старых версиях.
• useImperativeHandle — открыть родителю ограниченный набор методов (focus, scrollTo).
• Refs — «аварийный выход»: для того, что нельзя выразить состоянием (фокус, размеры, сторонние виджеты вроде карт и графиков).