Sobes.tech
Назад к вопросам
Middle+
5

Зачем нужен useRef? Какие у него применения?

Компании, где спрашивали
IT OneIT One

Ответ от нейросети

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.