Каждый фронтенд-разработчик сталкивался с проблемой задержек при отправке данных на сервер. Пока запрос идёт, пользователь видит пустой экран или крутящуюся иконку загрузки - это создаёт впечатление медлительности приложения. React 19 решает эту проблему новыми хуками, которые позволяют показать результат действия сразу, а потом его проверить.

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

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

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

До React 19 разработчикам приходилось вручную следить за состояниями загрузки, ошибок и оптимистичного контента. Нужно было синхронизировать локальное состояние с серверным, обрабатывать ошибки и откатывать изменения при сбое. Это приводило к громоздкому коду с множественными переменными состояния:

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

Теперь useOptimistic объединяет эту логику в один хук, который автоматически откатывает изменения при ошибке.

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

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

Рассмотрим классический пример с отправкой сообщения в чате. Когда пользователь нажимает кнопку отправки, сообщение сразу появляется в списке с пометкой “Отправка…”. В фоновом режиме идёт запрос на сервер. Как только ответ придёт, пометка исчезает. Если произойдёт ошибка, сообщение удалится из списка, вернув интерфейс в исходное состояние.

Вот как это выглядит в коде:

import { useOptimistic, useState, useRef, startTransition } from "react";

function MessageThread({ messages, sendMessageAction }) {
  const formRef = useRef();
  
  function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    startTransition(async () => {
      await sendMessageAction(formData);
    });
  }
  
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      {
        text: newMessage,
        sending: true
      },
      ...state,
    ]
  );

  return (
    <>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Введите сообщение" />
        <button type="submit">Отправить</button>
      </form>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {message.sending && <small> (Отправка...)</small>}
        </div>
      ))}
    </>
  );
}

Здесь addOptimisticMessage вызывается сразу при отправке формы, а sendMessageAction - асинхронный процесс, который идёт в фоне внутри startTransition.

Роль useTransition в процессе

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

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

Комбинация useOptimistic и startTransition работает так:

1. useOptimistic показывает локальное состояние сразу,
2. startTransition обворачивает серверное действие,
3. React откатывает оптимистичное состояние только если обещание (Promise) отклонится.

const [isPending, startTransition] = useTransition();

function handleSubmit(formData) {
  addOptimisticData(formData);
  
  startTransition(async () => {
    const result = await serverAction(formData);
    if (!result.success) {
      // При ошибке useOptimistic автоматически откатит изменения
      throw new Error(result.error);
    }
  });
}

Поиск с дебаунсом: применение на практике

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

Дебаунс (debounce) означает, что запрос на сервер отправляется только после того, как пользователь перестанет печатать на определённое время (например, 500 мс). Но это не значит, что интерфейс должен оставаться неизменным!

Оптимистичный поиск работает так:

1. Пользователь вводит текст в поле поиска,
2. Сразу же отображаются результаты из локального состояния или кэша,
3. Через 500 мс (после дебаунса) запрос отправляется на сервер,
4. Реальные результаты приходят и заменяют оптимистичные.

Вот практический пример:

import { useOptimistic, useState, useRef, useTransition } from "react";

function SearchComponent({ initialResults }) {
  const [results, setResults] = useState(initialResults);
  const [optimisticResults, addOptimisticResults] = useOptimistic(
    results,
    (state, query) => {
      // Фильтруем локальные результаты по запросу для быстрого отображения
      return state.filter(item => 
        item.title.toLowerCase().includes(query.toLowerCase())
      );
    }
  );
  const [isPending, startTransition] = useTransition();
  const debounceTimer = useRef(null);

  function handleSearchChange(e) {
    const query = e.target.value;
    addOptimisticResults(query);
    
    // Дебаунс
    clearTimeout(debounceTimer.current);
    debounceTimer.current = setTimeout(() => {
      startTransition(async () => {
        const serverResults = await fetch(`/api/search?q=${query}`)
          .then(r => r.json());
        setResults(serverResults);
      });
    }, 500);
  }

  return (
    <>
      <input 
        type="text" 
        placeholder="Поиск..." 
        onChange={handleSearchChange}
        disabled={isPending}
      />
      <ul>
        {optimisticResults.map((item, i) => (
          <li key={i}>{item.title}</li>
        ))}
      </ul>
      {isPending && <p>Загрузка результатов...</p>}
    </>
  );
}

Здесь мы комбинируем три техники:

• useOptimistic для мгновенного отображения результатов,
• setTimeout для дебаунса,
• startTransition для плавной обработки серверного запроса.

Преимущества и граничные случаи

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

Основные преимущества:

• Ощущение скорости - интерфейс реагирует моментально,
• Меньше состояний - useOptimistic автоматически управляет откатом при ошибке,
• Лучше UX - пользователь видит прогресс и понимает, что происходит,
• Меньше кода - не нужно вручную синхронизировать несколько переменных состояния.

Ограничения и граничные случаи:

• Несогласованность данных - если оптимистичное состояние отличается от серверного, пользователь может увидеть “мерцание” при откате,
• Сложная логика трансформации - функция обновления должна быть чистой и предсказуемой,
• Кэширование и синхронизация - нужно убедиться, что оптимистичное состояние согласуется с кэшем,
• Обработка ошибок - важно информировать пользователя, что произошла ошибка.

Таблица сравнения подходов:

Когда использовать, когда не использовать

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

Хорошие случаи для useOptimistic:

• Отправка сообщений и комментариев,
• Добавление элементов в список (заказы, товары в корзину),
• Изменение статусов и флагов (лайки, избранное),
• Поиск с дебаунсом и фильтрация,
• Любые операции, где вероятность ошибки низкая.

Когда лучше обойтись без оптимизма:

• Критичные финансовые операции (платежи, переводы денег),
• Операции, которые часто вызывают ошибки валидации,
• Действия, требующие согласованности с другими пользователями в реальном времени,
• Когда серверный ответ полностью отличается от оптимистичного прогноза.

Практический совет: начните с самого важного - отправки сообщений и добавления элементов. Это даст вам чувство, как работает паттерн.

Тонкости реализации и лучшие практики

Когда вы начнёте использовать useOptimistic, столкнётесь с рядом нюансов, которые важно понимать с самого начала.

Первое - функция обновления должна быть чистой (pure function). Она не должна иметь побочных эффектов, выполнять асинхронные операции или обращаться к внешним переменным. Это критично для того, чтобы React мог корректно откатить состояние при ошибке.

Второе - ключи в списках имеют значение. Если вы отображаете список с оптимистичными элементами, используйте стабильные ключи (например, уникальный ID), а не индексы. Иначе при откате элементы перемешаются.

// Плохо - ключ это индекс
{items.map((item, index) => (
  <div key={index}>{item.text}</div>
))}

// Хорошо - стабильный ID
{items.map((item) => (
  <div key={item.id}>{item.text}</div>
))}

Третье - обработка ошибок во время асинхронного действия. React 19 не автоматически ловит ошибки в startTransition. Вам нужно использовать Error Boundaries или try-catch блоки.

startTransition(async () => {
  try {
    await serverAction(data);
  } catch (error) {
    // Ошибка перехвачена, состояние откатится автоматически
    console.error(error);
  }
});

Четвёртое - не смешивайте несколько useOptimistic вызовов для одного состояния. Это приведёт к неожиданному поведению. Один хук - одна ответственность.

Пятое - кэширование и синхронизация. Если у вас есть кэш (например, React Query или SWR), убедитесь, что оптимистичное обновление согласуется с логикой кэширования. Иначе получите несогласованность данных.

Список лучших практик:

• Используйте startTransition для всех асинхронных операций, обёрнутых в useOptimistic,
• Показывайте визуальные индикаторы (например, серый цвет или иконка синхронизации) для оптимистичного контента,
• Информируйте пользователя об ошибках - не молча откатывайте изменения,
• Тестируйте сценарии сбоев - убедитесь, что откат работает правильно,
• Не усложняйте логику обновления - если функция слишком большая, разбейте её на несколько операций.

Будущее оптимистичных обновлений в React

React 19 сделал огромный шаг вперёд в упрощении оптимистичных обновлений, но это не конец эволюции. Сообщество и команда React продолжают работать над улучшениями, которые сделают эту технику ещё более доступной.

В ближайшем будущем можно ожидать лучшей интеграции с серверными компонентами и Actions, более удобных способов обработки ошибок, и, возможно, встроенных решений для синхронизации с популярными библиотеками для управления состоянием. Уже сейчас разработчики экспериментируют с комбинацией useOptimistic и Server Actions для создания полностью оптимистичных форм без необходимости писать API обработчики.

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