Приведи пример, когда лучше использовать useRef, чем useState

Когда useRef предпочтительнее useState в React

В React useState и useRef — два фундаментальных хука, но они служат разным целям. useState предназначен для управления состоянием компонента, которое влияет на рендеринг и вызывает ререндер при изменении. useRef используется для создания мутируемого объекта, который сохраняет свое значение между рендерами, но не вызывает ререндер при обновлении. Существуют конкретные ситуации, где useRef является более подходящим выбором.

Основная причина: избежание ререндеров

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

---

Конкретный пример: управление фокусом на элементе input

Один из наиболее классических и практических примеров — программное управление фокусом на DOM элементе. Использование useState для этого неэффективно и приводит к лишним ререндерам.

Проблема с useState: Если мы попытаемся управлять фокусом через состояние, нам потребуется:

1. Состояние для отслеживания, должен ли элемент быть в фокусе.
2. Эффект, который устанавливает фокус при изменении этого состояния. Это приводит к минимум одному дополнительному ререндеру.

Решение с useRef: Мы можем создать ссылку на DOM элемент и напрямую вызывать метод .focus() без какого-либо состояния.

Пример кода:

import React, { useRef } from 'react';

function FocusInputComponent() {
  // Создаем ref для хранения ссылки на DOM элемент input
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    // Доступ к DOM элементу через inputRef.current
    // и прямой вызов метода focus() без изменения состояния.
    // Это действие НЕ вызывает ререндер компонента.
    inputRef.current.focus();
  };

  return (
    <div>
      {/* Привязываем ref к элементу input */}
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>
        Установить фокус на input
      </button>
    </div>
  );
}

Почему useRef лучше здесь:

• Нет лишних ререндеров: Клик на кнопку вызывает только вызов .focus(). Компонент не перерисовывается.
• Прямой доступ к DOM: Мы работаем напрямую с реальным DOM элементом, что необходимо для таких нативных действий.
• Синхронность: Действие выполняется мгновенно и синхронно, без ожидания следующего цикла рендеринга React.

---

Другие ситуации, где useRef предпочтительнее

1. Хранение предыдущих значений или "предыдущего состояния"

Когда вам нужно сравнить текущее значение с предыдущим (например, в useEffect), useRef — идеальный инструмент для сохранения этого предыдущего значения.

import React, { useState, useEffect, useRef } from 'react';

function ComponentWithPreviousValue() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    // Сохраняем текущее значение в ref перед тем, как оно изменится
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Сейчас: {count}</p>
      <p>Предыдущее: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Здесь prevCountRef хранит значение между рендерами без триггеров ререндера.

2. Счетчики или флаги внутри эффектов (interval, timeout, listeners)

Если вам нужно хранить идентификатор интервала (setInterval) или таймаута (setTimeout) для его очистки, используйте useRef. Состояние для этого приведет к сложной логике и потенциальным багам.

const timerIdRef = useRef(null);

useEffect(() => {
  timerIdRef.current = setInterval(() => {
    // выполнять действие
  }, 1000);

  return () => {
    clearInterval(timerIdRef.current); // очистка по ref
  };
}, []);

3. Хранение мутируемых данных, не связанных с рендерингом

Любые данные, которые меняются, но их изменения не должны мгновенно отражаться в UI:

• Инстансы сторонних библиотек (например, объект Chart.js).
• Сложные вычисления или кэш (например, мемоизация без useMemo).
• Флаги для предотвращения двойного выполнения логики (например, isMounted).

Ключевые выводы и правила выбора

• Выбирайте useState, когда значение напрямую влияет на то, что рендерит компонент (текст, видимость, стили, список данных). Изменение состояния должно приводить к новому рендеру.
• Выбирайте useRef, когда вам нужно:

    *   **Ссылка на DOM элемент** для прямого управления (фокус, скролл, измерения).
    *   **Хранить мутируемое значение**, которое должно сохраняться между рендерами, но его изменение **не должно триггерить ререндер**.
    *   **Запоминать предыдущие значения** или идентификаторы (таймауты, интервалы, слушатели событий).

Аналог в классовых компонентах: useRef заменяет использование инстанс-полей (this.myField) в классах и создание refs через React.createRef().

Использование useRef в описанных сценариях повышает эффективность компонента (меньше ререндеров) и делает код чище и более прямолинейным, так как вы отделяете логику рендеринга от логики мутации данных.