Как работает useTransition и useDeferredValue в React?

useTransition и useDeferredValue в React

Оба хука появились в React 18 как часть модели Concurrent Rendering. Они позволяют React прерывать «тяжёлые» рендеры в пользу срочных обновлений (например, ввод пользователя), делая интерфейс отзывчивым.

useTransition

useTransition возвращает кортеж [isPending, startTransition]. Любое обновление состояния, обёрнутое в startTransition, React считает некритичным и может отложить или прервать, если появится более приоритетное обновление.

import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // Срочное обновление — поле ввода реагирует мгновенно
    setQuery(e.target.value);

    // Некритичное обновление — список результатов можно отложить
    startTransition(() => {
      setResults(heavyFilter(e.target.value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <span>Загрузка...</span> : <ResultList items={results} />}
    </>
  );
}

isPending — флаг, который true пока отложенный рендер ещё не завершился. Это позволяет показывать индикатор загрузки без блокировки ввода.

useDeferredValue

useDeferredValue принимает значение и возвращает его «отложенную» копию. React рендерит компонент сначала со старым значением (мгновенно), а потом фоново пересчитывает с новым.

import { useState, useDeferredValue, memo } from 'react';

const HeavyList = memo(function HeavyList({ query }: { query: string }) {
  // Дорогой рендер — тысячи элементов
  const items = heavyFilter(query);
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
});

function SearchPage() {
  const [query, setQuery] = useState('');
  // deferredQuery обновляется позже, чем query
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {/* Компонент получит старое значение, пока фон не пересчитает */}
      <HeavyList query={deferredQuery} />
    </>
  );
}

Ключевые различия

Важные нюансы

• Оба хука работают только в Concurrent Mode (React 18+, без ReactDOM.render).
• startTransition не откладывает сетевые запросы — только рендер. Для серверных данных нужен use + Suspense или специальные хуки.
• useDeferredValue эффективен только вместе с memo — иначе отложенный рендер всё равно пересчитывается синхронно.
• Если машина пользователя мощная, разницы может не быть заметно — React адаптируется к скорости устройства.
• Нельзя читать isPending внутри startTransition — он становится true асинхронно после вызова.