Что такое Ref?

`ref` в React — это способ получить прямой доступ к DOM-элементу или сохранить изменяемое значение между рендерами без вызова повторного рендера.

Два применения

1. Доступ к DOM-узлу

function Input() {
  const inputRef = useRef(null);
  const focus = () => inputRef.current.focus();
  return (
    <>
      <input ref={inputRef} />
      <button onClick={focus}>Фокус</button>
    </>
  );
}

Применение: фокус, измерение размеров, интеграция с не-React библиотеками, медиа.

2. Хранение изменяемого значения

useRef хранит .current, который сохраняется между рендерами и не вызывает перерисовку при изменении:

const timerId = useRef(null);
timerId.current = setInterval(...);

Применение: id таймеров, предыдущее значение, флаги.

Отличие от state

• Изменение state → перерисовка.
• Изменение ref → без перерисовки, значение просто сохраняется.

forwardRef

Позволяет прокинуть ref в дочерний компонент до его DOM-узла. С React 19 ref передаётся как обычный проп, и forwardRef больше не нужен.

Коротко для собеседования

ref (useRef) даёт прямой доступ к DOM-узлу (фокус, размеры, сторонние библиотеки) или хранит изменяемое значение между рендерами без перерисовки. В отличие от state, изменение .current не вызывает ре-рендер.