Как работает useRef в React?

useRef — это хук в React, который позволяет сохранять ссылки на DOM-элементы или значения, которые не вызывают перерисовки компонента при изменении. Это может быть полезно для получения доступа к элементам в DOM или хранения значений между рендерами.

Как работает useRef?

• Ссылки на DOM элементы. useRef может использоваться для получения прямого доступа к DOM-элементам, например, для фокусировки на поле ввода или измерения размеров элемента.

• Хранение значений между рендерами. useRef сохраняет значение, которое не вызывает повторный рендер компонента при его изменении. Это полезно, когда нужно хранить данные, которые не должны быть частью состояния компонента, но должны сохраняться между рендерами.

const myRef = useRef(initialValue);

• initialValue — это начальное значение ссылки. Оно может быть null или любым другим значением, которое вам нужно сохранить.

• myRef.current — это объект, который хранит текущее значение. Для ссылок на DOM-элементы, myRef.current будет ссылаться на сам элемент.

Пример использования useRef для работы с DOM

import { useRef } from "react";

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

  const focusInput = () => {
    inputRef.current.focus(); // Фокусируемся на поле ввода
  };

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

В этом примере:

• inputRef создается с помощью useRef и передается в атрибут ref поля ввода.
• Когда пользователь нажимает на кнопку, вызывается функция focusInput, которая фокусирует на поле ввода, используя inputRef.current.focus().

Пример использования useRef для хранения значений

import { useRef } from "react";

function Timer() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(countRef.current); // Печатает количество обновлений
  };

  return (
    <div>
      <button onClick={increment}>Увеличить</button>
    </div>
  );
}

В этом примере:

• countRef используется для хранения значения счетчика между рендерами.
• Значение countRef.current можно изменять напрямую, и это не приведет к повторному рендеру компонента.

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

• Доступ к DOM-элементам. Если нужно работать с DOM (например, фокусировка, измерения или анимации), используйте useRef для получения ссылок на элементы.
• Хранение данных между рендерами. Если вам нужно сохранить данные, которые не должны вызывать ререндер, используйте useRef. Например, для хранения текущего состояния таймера или отслеживания предыдущих значений.