Как можно использовать refs?

Refs в React используют для доступа к DOM-элементам (фокус, размеры, интеграция с библиотеками) и для хранения изменяемых значений между рендерами без перерисовки.

Основные способы использования

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

const inputRef = useRef(null);
// ...
<input ref={inputRef} />
inputRef.current.focus();       // фокус
inputRef.current.scrollIntoView();
inputRef.current.getBoundingClientRect(); // размеры

Применение: фокус, прокрутка, измерение, <video>/<canvas>, интеграция с не-React библиотеками (Chart.js, карты).

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

const timerId = useRef(null);
const prevValue = useRef();
const renderCount = useRef(0);

timerId.current = setInterval(...); // не вызывает перерисовку

Применение: id таймеров, предыдущее значение props/state, флаги, мутабельные данные, которые не должны триггерить рендер.

3. Проброс ref в дочерний компонент (до React 19 — forwardRef; с React 19 ref — обычный проп)

const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

4. useImperativeHandle — кастомный API через ref

Открыть родителю методы дочернего компонента (focus(), reset()).

Ref против state

• Изменение state → перерисовка.
• Изменение ref → без перерисовки.

Осторожно

Не читать/менять ref.current во время рендера — только в обработчиках/эффектах.

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

Refs используют для: доступа к DOM (фокус, размеры, сторонние библиотеки), хранения изменяемых значений без ре-рендера (id таймеров, предыдущее значение), проброса через forwardRef и кастомного API через useImperativeHandle. В отличие от state, изменение ref не вызывает перерисовку.