Что такое useTransition и для чего он используется?

Что такое useTransition?

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

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

Когда вы вызываете startTransition, React помечает все обновления состояния внутри него как переходные. React может прервать эти обновления, если появляется более приоритетная задача (например, обновление от ввода). Это предотвращает зависание интерфейса.

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

import { useState, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value); // срочное обновление
    startTransition(() => {
      // низкоприоритетное обновление
      setResults(filterData(e.target.value));
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Загрузка...</span>}
      <ul>{results.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}

Где применять?

• Поиск с фильтрацией больших данных
• Переключение вкладок с тяжелым контентом
• Анимации и переходы между страницами

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