Что такое useTransition

1️⃣ Как кратко ответить

useTransition — это хук в React, который позволяет управлять состоянием перехода между различными состояниями пользовательского интерфейса. Он используется для оптимизации производительности, позволяя отложить обновление менее приоритетных компонентов, чтобы более важные обновления могли быть выполнены без задержек.

2️⃣ Подробное объяснение темы

useTransition — это хук, представленный в React 18, который помогает управлять асинхронными переходами в пользовательском интерфейсе. Он позволяет пометить обновления состояния как "переходные", что дает возможность React выполнять их с более низким приоритетом. Это особенно полезно для улучшения пользовательского опыта в приложениях, где важна плавность интерфейса.

Зачем это нужно

В современных веб-приложениях часто возникают ситуации, когда необходимо обновить интерфейс в ответ на действия пользователя. Однако не все обновления одинаково важны. Например, при вводе текста в поле поиска важно, чтобы текст отображался без задержек, в то время как обновление списка результатов может быть выполнено с небольшой задержкой. useTransition позволяет управлять такими сценариями, обеспечивая более плавный пользовательский опыт.

Как это работает

useTransition возвращает массив из двух элементов: функция startTransition и булево значение isPending.

• startTransition(callback): функция, которая принимает коллбэк. Обновления состояния, выполненные внутри этого коллбэка, будут помечены как переходные.
• isPending: булево значение, указывающее, находится ли переход в процессе выполнения.

Пример использования

Рассмотрим пример, где пользователь вводит текст в поле, и на основе этого текста фильтруется список элементов.

import React, { useState, useTransition } from 'react';
​
function SearchComponent() {
  // Состояние для хранения текста поиска
  const [searchTerm, setSearchTerm] = useState('');
  // Состояние для хранения отфильтрованных элементов
  const [filteredItems, setFilteredItems] = useState([]);
  // Хук useTransition для управления переходами
  const [isPending, startTransition] = useTransition();
​
  // Массив элементов для фильтрации
  const items = ['apple', 'banana', 'grape', 'orange', 'pear'];
​
  // Обработчик изменения текста в поле ввода
  const handleChange = (event) => {
    const value = event.target.value;
    // Обновляем текст поиска немедленно
    setSearchTerm(value);
​
    // Начинаем переход для обновления отфильтрованных элементов
    startTransition(() => {
      // Фильтруем элементы на основе текста поиска
      const filtered = items.filter(item => item.includes(value));
      // Обновляем состояние отфильтрованных элементов
      setFilteredItems(filtered);
    });
  };
​
  return (
    <div>
      {/* Поле ввода для текста поиска */}
      <input type="text" value={searchTerm} onChange={handleChange} />
      {/* Отображаем индикатор загрузки, если переход в процессе */}
      {isPending && <p>Loading...</p>}
      {/* Отображаем отфильтрованные элементы */}
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Объяснение кода

• useState используется для управления состоянием searchTerm и filteredItems.
• useTransition возвращает isPending и startTransition. isPending указывает, выполняется ли переход, а startTransition используется для обертывания обновлений состояния, которые должны быть выполнены с низким приоритетом.
• В handleChange обновление searchTerm происходит немедленно, чтобы пользователь видел изменения без задержек.
• startTransition оборачивает обновление filteredItems, чтобы оно выполнялось с низким приоритетом, позволяя интерфейсу оставаться отзывчивым.
• Если isPending истинно, отображается индикатор загрузки, показывающий, что переход еще не завершен.

Использование useTransition позволяет улучшить производительность и отзывчивость интерфейса, особенно в сложных приложениях с большим количеством данных или сложной логикой рендеринга.