useRef() - это хук в React, предназначенный для создания изменяемого значения, которое сохраняется между рендерами компонента. В отличие от useState, изменение значения useRef не вызывает повторного рендеринга компонента.
Основные характеристики useRef:
- Сохранение значения между рендерами: Значение, хранящееся в
useRef, сохраняется между рендерами компонента. Это полезно, когда вам нужно хранить какое-то значение, которое не должно вызывать повторный рендеринг. - Доступ к DOM-элементам: Одним из наиболее распространенных применений
useRefявляется доступ к DOM-элементам. Вы можете связатьrefс элементом в JSX и затем использовать его для прямого манипулирования этим элементом. - Изменяемость: Вы можете изменять значение
useRefнапрямую, не вызывая повторного рендеринга. Это делается через свойствоcurrent.
import React, { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
}