useRef

useRef — это хук в React, который создаёт изменяемый объект с свойством .current. Он используется для:

Хранения значения, которое сохраняется между рендерами, но не вызывает перерендеринг при изменении.
Получения прямого доступа к DOM-элементам или другим объектам.

В отличие от useState, изменение значения .current не приводит к повторному рендерингу компонента.

Что делает useRef?

useRef возвращает объект с единственным свойством .current, которое изначально равно переданному значению (или null, если значение не указано). Вы можете изменять .current в любое время, и это значение будет сохраняться на протяжении всего жизненного цикла компонента.

Когда использовать useRef?

Для работы с DOM: фокус, прокрутка, измерение размеров элементов и т.д.
Для хранения предыдущих значений: например, чтобы сравнить текущее и прошлое состояние.
Для кэширования данных: когда значение нужно сохранить, но оно не влияет на UI.

Пример кода

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // Устанавливаем фокус на input
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Кликни кнопку" />
      <button onClick={focusInput}>Фокус на input</button>
    </div>
  );
}

export default InputFocus;

Важно

Не вызывает рендеринг: Изменение ref.current не приводит к обновлению компонента.
Сохраняется между рендерами: Значение .current не сбрасывается, пока компонент не размонтируется.
Начальное значение: Указывается при вызове useRef(initialValue). После этого начальное значение можно игнорировать — важен только .current.