Приведи примеры использования useRef.
Хуки
useRef применяется в двух ролях: доступ к DOM и «память» компонента, не вызывающая перерендер. Вот типичные практические примеры.
Фокус и управление DOM-элементом
const LoginForm = () => {
const emailRef = useRef(null);
useEffect(() => {
emailRef.current.focus(); // автофокус при открытии
}, []);
return <input ref={emailRef} type="email" />;
};Сюда же: scrollIntoView(), выделение текста, воспроизведение видео (videoRef.current.play()), измерение размеров через getBoundingClientRect().
Хранение id таймера / интервала
const AutoSave = ({ draft }) => {
const timerRef = useRef(null);
useEffect(() => {
timerRef.current = setTimeout(() => save(draft), 2000);
return () => clearTimeout(timerRef.current);
}, [draft]);
};Инстансы внешних объектов
WebSocket, карта, chart-инстанс — создаются один раз и живут вне рендера:
const chartRef = useRef(null);
useEffect(() => {
chartRef.current = new Chart(canvasRef.current, config);
return () => chartRef.current.destroy();
}, []);Предыдущее значение props/state
const usePrevious = (value) => {
const ref = useRef();
useEffect(() => { ref.current = value; });
return ref.current;
};Защита от гонок и устаревших колбэков
Флаг «актуален ли запрос», хранение последнего колбэка для стабильного обработчика, счётчик рендеров при отладке — всё это данные, которые нужно помнить, но которые не должны перерисовывать компонент.
Коротко для собеседования
Примеры: автофокус и императивная работа с DOM (скролл, измерения, видео), id таймеров с очисткой, инстансы внешних библиотек (WebSocket, Chart), хук usePrevious для прошлого значения, флаги для защиты от гонок. Общий принцип: изменяемые данные без перерендера.