Назад к вопросам
IT One
Middle+
5
Зачем нужен useRef? Какие у него применения?
Компании, где спрашивали
Ответ от нейросети
sobes.tech AI
useRef в React — это хук, который позволяет создавать мутируемый объект с полем .current, сохраняющийся между рендерами компонента. Основные применения:
- Хранение DOM-элементов: можно получить ссылку на элемент, чтобы управлять фокусом, измерять размеры или вызывать методы напрямую.
- Хранение мутабельных значений: сохранять значения, которые не влияют на ререндер, например, таймеры, идентификаторы, предыдущие значения пропсов или состояния.
- Имитация экземплярных переменных: в функциональных компонентах
useRefзаменяет свойства класса для хранения данных между рендерами.
Пример использования для доступа к DOM:
import React, { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const focusInput = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Фокус на инпут</button>
</>
);
}
Таким образом, useRef — удобный инструмент для хранения данных, не вызывающих повторный рендер, и для работы с DOM.