Переходы и отложенные значения

useTransition разбивает одно событие на два обновления: срочное, которое рендерится сразу, и несрочное, которое React может прервать. Ты вызываешь setQuery срочно, чтобы ввод сразу отразил нажатие, затем вызываешь дорогой setResults внутри startTransition. React рендерит срочное обновление первым; рендер перехода происходит в фоне и может быть выброшен, если придёт новое нажатие, поэтому он никогда не блокирует ввод.

const [isPending, startTransition] = useTransition();
const [query, setQuery] = useState("");
const [results, setResults] = useState<Row[]>(allRows);

function onChange(e: React.ChangeEvent<HTMLInputElement>) {
  const next = e.target.value;
  setQuery(next); // urgent: the input must update now
  startTransition(() => {
    setResults(filterRows(allRows, next)); // non-urgent: can lag, can be dropped
  });
}

isPending равен true, пока рендер перехода в полёте — используй его, чтобы притушить устаревший список, но никогда чтобы блокировать печать.

useDeferredValue — та же идея, когда сеттер не твой: ты откладываешь значение, а не обновление. Дочерний компонент получает query пропсом и сам делает дорогую работу; ты не можешь обернуть его внутренний рендер в startTransition. Вместо этого передай ему отложенную копию значения. React держит ввод привязанным к живому query, но даёт отложенной копии отставать во время тяжёлых рендеров.

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);
const isStale = query !== deferredQuery;

return (
  <>
    <input value={query} onChange={(e) => setQuery(e.target.value)} />
    {/* SlowList re-renders against deferredQuery, lagging behind input */}
    <SlowList query={deferredQuery} dim={isStale} />
  </>
);

Правило большого пальца: владеешь сеттером на месте вызова → useTransition. Получаешь значение пропсом, который не можешь перехватить → useDeferredValue. Мемоизируй дорогой дочерний компонент (memo), чтобы отставание реально экономило рендеры.

Под Suspense переход говорит React держать предыдущий контент вместо сброса в фолбэк. Когда отложенное обновление читает данные, которые подвешиваются, обычное обновление размонтировало бы старый UI и показало фолбэк <Suspense> — список мигает в скелетон на каждое нажатие. Оборачивание обновления в переход (или управление им через useDeferredValue) заставляет React удержать последний хороший контент на экране и подменить новые результаты только когда они готовы. Ты получаешь устаревшее-во-время-загрузки бесплатно.

function Search() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <Suspense fallback={<ResultsSkeleton />}>
        {/* first paint shows the skeleton; later keystrokes keep the
            previous results visible instead of re-blinking to skeleton */}
        <Results query={deferredQuery} />
      </Suspense>
    </>
  );
}

Скелетон показывается один раз, при первой загрузке. После этого переходы превращают каждую следующую загрузку в мягкую подмену контента, а не во вспышку.

Режим отказа, определяющий паттерн: никогда не оборачивай срочное обновление в переход и никогда не тянись к любому из API до измерения. Если ты поместишь setQuery внутрь startTransition, само значение ввода станет прерываемым — печать начнёт отставать, ровно тот симптом, который ты пытался вылечить. Срочное обновление (то, чем пользователь манипулирует напрямую) должно оставаться снаружи. Второй отказ — преждевременность: список из 50 строк перерисовывается меньше чем за миллисекунду; добавление useTransition/useDeferredValue там не покупает ничего и добавляет концепцию устаревшего состояния, о которой надо думать. Эти API окупаются только когда дорогой рендер измеримо душит срочный.

// WRONG: the input value is urgent — this makes typing laggy
startTransition(() => {
  setQuery(next);          // urgent update demoted to non-urgent
  setResults(filterRows(allRows, next));
});

// RIGHT: urgent stays urgent, only the expensive part is deferred
setQuery(next);
startTransition(() => setResults(filterRows(allRows, next)));

Тянись к переходам, когда ты видел отставание ввода под тяжёлыми обновлениями, — а не как к обёртке по умолчанию вокруг каждого setState.