Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

Веб-приложения сегодня требуют всё большей интерактивности, отзывчивости и быстродействия. В ответ на это команда React постоянно совершенствует инструментарий, позволяющий нам тонко управлять рендерингом и пользовательским опытом. Если вы работали только с классическими методами оптимизации вроде useMemo, useCallback, мемоизации компонент через React.memo и другими известными приёмами, то вас могут заинтересовать следующие хуки:

1. useTransition — устанавливает приоритеты рендеринга, разделяя обновления на критические и фоновые.

2. useDeferredValue — откладывает обновление тяжёлых значений, чтобы интерфейс не фризился при вводе данных.

3. useOptimistic — помогает реализовать оптимистичные обновления «из коробки».

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

useTransition: приоритеты рендеринга и плавность UI

Общая идея

Когда пользователь совершает действие (например, вводит текст, переключает вкладки, жмёт кнопку), нам может понадобиться выполнить довольно тяжелое обновление состояния: фильтрация большой коллекции, пересчёт сложных данных, перестройка таблицы и т.д. Если всё это произойдёт сразу (с высоким приоритетом), то UI может подвиснуть на секунду — пользователь увидит задержку при нажатии или вводе текста.

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

Как пользоваться: базовый пример

В этом примере, при вводе текста, поле ввода обновляется мгновенно, чтобы быть отзывчивым, но фильтрация большого списка (filteredItems) оборачивается в startTransition, что позволяет React «приостанавливать» вычисления, если пользователь вводит много символов подряд. Это помогает избежать задержек в интерфейсе. Индикатор загрузки отображается, пока процесс фильтрации не завершится.

import React, { useState, useTransition } from 'react';  function BigList({ items }) {   return (     <ul>       {items.map((item) => (         <li key={item.id}>{item.text}</li>       ))}     </ul>   ); }  export default function App() {   const [text, setText] = useState('');   const [filteredItems, setFilteredItems] = useState([]);   const [isPending, startTransition] = useTransition(); // Хук useTransition    // Допустим, у нас есть большая коллекция   const allItems = Array.from({ length: 10000 }, (_, i) => ({     id: i,     text: `Item ${i}`   }));    const handleInputChange = (e) => {     const value = e.target.value;     setText(value);      // Некритичное обновление вынесем в startTransition     startTransition(() => {       const filtered = allItems.filter((item) =>         item.text.toLowerCase().includes(value.toLowerCase())       );       setFilteredItems(filtered);     });   };    return (     <div>       <h1>Список: {filteredItems.length} элементов</h1>       <input         value={text}         onChange={handleInputChange}         placeholder="Поиск по списку..."       />       {/* Показываем индикатор, если useTransition ещё "в процессе" */}       {isPending && <p>Loading...</p>}        <BigList items={filteredItems} />     </div>   ); }

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

• При каждом вводе символа мы сразу обновляем text (чтобы поле ввода было отзывчивым).

• Но пересчёт большого списка (filteredItems) оборачиваем в startTransition(...).

• Если пользователь вводит много символов подряд быстро, React может приостанавливать вычисления и обновлять список, только когда пользователь притормозит с вводом — чтобы UI оставался плавным.

• isPending говорит, что «переход» ещё идёт, и можно показывать индикатор загрузки.

Какие задачи решает useTransition?

• Фильтрация/сортировка больших списков.

• Перерисовка сложных компонент (например, карт с множеством объектов).

• Плавные анимации при переходе между экранами или вкладками.

Подводные камни и замечания

• useTransition не отменяет само вычисление; оно просто даёт React возможность оптимальнее распределять приоритеты.

• Если у вас очень тяжёлая логика, может потребоваться дополнительная оптимизация (например, мемоизация или вынесение вычислений на Web Worker).

• Не злоупотребляйте useTransition: если все обновления помечать как «некритичные», то пользователи будут видеть задержки.

useDeferredValue: ленивое обновление больших данных

В чём суть?

useDeferredValue — ещё один хук, представленный в React 18, решает похожую задачу оптимизации. Но здесь мы имеем дело не с разметкой обновления (как в useTransition), а с «двойным» состоянием:

• Основное состояние, которое обновляется сразу.

• Отложенное состояние, которое может обновляться чуть позже, с меньшим приоритетом.

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

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

Здесь при вводе текста поле обновляется сразу, но для компонента SearchResults передается отложенное значение с помощью useDeferredValue. Это позволяет React обновлять список с меньшим приоритетом, предотвращая лишние рендеры при каждом вводе и улучшая производительность, особенно при работе с большими данными.

import React, { useState, useDeferredValue, memo } from 'react';  const SearchResults = memo(function SearchResults({ searchTerm }) {   // Допустим, searchTerm - это уже отложенное значение   const allItems = Array.from({ length: 5000 }, (_, i) => `Item ${i}`);    // Моделируем какую-то тяжёлую фильтрацию   const filteredItems = allItems.filter((item) =>     item.toLowerCase().includes(searchTerm.toLowerCase())   );    return (     <ul>       {filteredItems.map((item, idx) => (         <li key={idx}>{item}</li>       ))}     </ul>   ); });  export default function App() {   const [inputValue, setInputValue] = useState('');   // "Отложенное" значение на основе текущего inputValue   const deferredValue = useDeferredValue(inputValue);    const handleChange = (e) => {     setInputValue(e.target.value);   };    return (     <div>       <input value={inputValue} onChange={handleChange} placeholder="Поиск..." />       {/*          В компонент SearchResults передаем НЕ inputValue напрямую,         а именно deferredValue, чтобы он мог обновиться с меньшим приоритетом        */}       <SearchResults searchTerm={deferredValue} />     </div>   ); }

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

• inputValue меняется мгновенно, и пользователь сразу видит, что поле ввода отражает его действия (без задержки).

• Но SearchResults получает не inputValue, а deferredValue. Это значит, что React может подождать подходящий момент для рендера.

• Так мы избегаем моментальных ререндеров тяжёлых списков при каждом набранном символе.

Отличие от useTransition

• useTransition: мы явно оборачиваем какую-то логику (обновление стейта) в startTransition.

• useDeferredValue: мы имеем два состояния — основное и отложенное. Просто используем deferredValue там, где рендеры могут быть отложены.

Иногда эти хуки можно комбинировать — всё зависит от конкретной задачи.

Зачем нужен useDeferredValue, если есть useDebounce?

Оба хука решают задачи, связанные с производительностью, но делают это разными способами. useDebounce полезен для задержки вызовов функций на основе времени, чтобы предотвратить частые обновления данных, тогда как useDeferredValue предназначен для управления приоритетом обновлений интерфейса. Если задача заключается в том, чтобы не блокировать интерфейс при рендеринге большого количества элементов, но при этом не задерживать обновление самого значения (например, в поле ввода), то useDeferredValue — лучший выбор.

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

useOptimistic: оптимистичные обновления без боли

Что такое оптимистичные обновления?

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

1. Отправляем запрос на сервер.

2. Ждём ответа (200 OK).

3. Только тогда обновляем UI, показывая новый комментарий в списке.

Но если задержка большая, пользователь видит зависание: форма не обновляется, хотя он уже нажал Отправить. Чтобы интерфейс казался шустрее, мы делаем оптимистичное обновление — сразу добавляем комментарий в список как будто запрос сработал, а если что-то пошло не так (сервер вернул ошибку), то откатываем.

Ранее это приходилось вручную реализовывать: хранить временные айдишники, отменять изменения в случае ошибки и т. д. Но в React 19 есть хук useOptimistic, призванный упростить всю эту схему.

Как это выглядит в коде?

В этом примере при отправке нового комментария он сразу добавляется в список, создавая видимость успешной отправки. Если запрос на сервер не удаётся, временный комментарий удаляется, и интерфейс возвращается к исходному состоянию. Это делает интерфейс более отзывчивым, поскольку не нужно ждать ответа от сервера для обновления UI.

import { useOptimistic, useState, useRef } from "react";  async function makeOrder(orderName) {   // мок запроса на сервер   await new Promise((res) => setTimeout(res, 1500));   return orderName; }  function Kitchen({ orders, onMakeOrder }) {   const formRef = useRef();    async function formAction(formData) {     const orderName = formData.get("orderName");     addOptimisticOrder(orderName);     formRef.current.reset();     await onMakeOrder(orderName);   }    const [optimisticOrders, addOptimisticOrder] = useOptimistic(     orders,     (state, newOrder) => [...state, { orderName: newOrder, preparing: true }]   );    return (     <div>       <form action={formAction} ref={formRef}>         <input type="text" name="orderName" placeholder="Введите заказ!" />         <button type="submit">Заказать</button>       </form>        {optimisticOrders.map((order, index) => (         <div key={index}>           {order.orderName}           {order.preparing ? (             <span> (Готовиться...)</span>           ) : (             <span> (Готов!)</span>           )}         </div>       ))}     </div>   ); }  export default function App() {   const [orders, setOrders] = useState([]);    async function onMakeOrder(orderName) {     const sentOrder = await makeOrder(orderName);     setOrders((orders) => [...orders, { orderName: sentOrder }]);   }    return <Kitchen orders={orders} onMakeOrder={onMakeOrder} />; } 

Чем это удобно?

• useOptimistic упрощает хранение реального и оптимистичного состояния.

• Нам не нужно вручную делать многоуровневый микс стейта: хук из коробки содержит средства для отката и объединения изменений.

• При ошибке запроса мы можем просто откатить оптимистичное действие.

Реальные кейсы, где эти хуки упрощают жизнь

• Поиск и автодополнение:

  • useDeferredValue помогает избежать подвисаний при каждом введённом символе.

  • useTransition — если нужно одновременно показывать живое автодополнение и при этом перерисовывать сложные компоненты.

• Онлайн-редакторы (текст, графика и пр.):

  • При масштабировании полотна или при изменениях в большом документе, мы можем использовать переходы, чтобы UI оставался отзывчивым.

• Мессенджеры и социальные сети:

  • useOptimistic идеально подходит для отправки сообщений, комментариев, лайков — чтобы пользователь видел быстрый отклик (Сообщение отправлено), а при ошибке мы могли откатить и показать уведомление.

• Электронная коммерция (корзины, заказы):

  • Оптимистичное добавление товаров в корзину или оформление заказа с мгновенной реакцией UI.

• Фильтрация и сортировка больших таблиц, списков:

  • useDeferredValue и useTransition позволяют не блокировать интерфейс при каждом изменении фильтра.

Когда (и как) не стоит применять эти хуки

• Там, где нет больших данных. Если список маленький (двадцать записей) и всё и так работает мгновенно, избыточно добавлять новую логику приоритизации.

• Для простых синхронных обновлений. Если задача — просто добавить элемент в массив, и время обновления мизерное, useTransition может быть лишним.

• useOptimistic: подходит для использования в продакшн-проектах, но в сложных случаях с специфичной логикой обработки ошибок можно рассмотреть альтернативы, такие как React Query или RTK Query, которые также поддерживают оптимистичные обновления.

Итоги

• useTransition: Оборачиваем некритические обновления стейта, чтобы рендеры пониженного приоритета не блокировали интерфейс.

• useDeferredValue: Даём React возможность отложенно обновлять тяжёлое состояние — удобно в связке с формами, поиском и большими списками.

• useOptimistic: Упрощает реализацию оптимистичных обновлений, когда нужно мгновенно показывать результат действий пользователя, а при сбое — отменять.

В ближайших публикациях я рассмотрю каждый из хуков подробнее:

• useTransition: продвинутые паттерны

  • Как отменять/перезапускать переходы, несколько параллельных переходов, кейсы с анимациями.

• useDeferredValue: от теории к практике

  • Разбор edge-case’ов, замеры производительности, тонкости в сочетании с useMemo и useCallback.

• useOptimistic: реализация сложных сценариев

  • Несколько параллельных оптимистичных обновлений, откаты, интеграция с Redux/RTK Query и т.д.

Надеюсь, эта статья поможет вам улучшить производительность интерфейсов. Даже если в вашем проекте нет потребности в сложной оптимизации, знание хуков useTransition, useDeferredValue и useOptimistic поможет вам быстро улучшить отзывчивость UI в нужный момент.

Дополнительно, если вам интересна тема управления состоянием в React, рекомендую ознакомиться с моей статьёй на Habr, где я подробнее рассказываю о хуке useActionState и его применении.