Оптимистичный UI и useOptimistic: честно врать пользователю

Механизм: оверлей с истекающим сроком

useOptimistic(canonicalState, mergeFn) возвращает состояние для рендера плюс addOptimistic. Семантика — то, что нужно усвоить: хук не форкает ваше состояние — он рендерит оверлей. Пока никакая мутация не висит, он возвращает каноничное состояние нетронутым. Когда вы вызываете addOptimistic(input) внутри transition (form action — это transition), React рендерит mergeFn(canonicalState, input) — каноничное состояние плюс вашу надежду — ровно столько, сколько transition в полёте. Когда transition завершается, оверлей истекает, и хук возвращает то, чем каноничное состояние стало теперь. Отменять нечего, потому что ничего не было записано: откат при провале — не код, который вы пишете, а истечение оверлея при каноничном состоянии, которое не успело измениться.

function Comments({ comments, postComment }) {
  const [optimisticComments, addOptimistic] = useOptimistic(
    comments,
    (current, newComment) => [
      ...current,
      { ...newComment, pending: true },
    ]
  );

  async function action(formData) {
    const text = formData.get("text");
    addOptimistic({ id: crypto.randomUUID(), text });
    await postComment(text); // on success, parent refetches → comments updates
  }

  return (
    <form action={action}>
      <ul>
        {optimisticComments.map((c) => (
          <li key={c.id} style={{ opacity: c.pending ? 0.5 : 1 }}>
            {c.text}
          </li>
        ))}
      </ul>
      <input name="text" />
    </form>
  );
}

Путь успеха: action ждёт POST, родитель обновляет comments (refetch или слияние ответа), transition завершается, и оверлей сменяется каноничным состоянием, которое теперь содержит комментарий — пользователь не видит шва. Путь провала: action бросает или возвращает ошибку, каноничное состояние не менялось, оверлей истекает — комментарий гаснет сам. Флаг pending: true — маркер честности: приглушение или лёгкий спиннер говорят пользователю, что этот элемент — обещание, а не факт, и редкое исчезновение становится объяснимым, а не мистическим. Баг исчезающего комментария из Hook в этой модели невыразим — нечему гнаться со splice-ом, потому что второй записываемой копии списка не существует.

Сверка: истина сервера побеждает — даже когда не согласна

Оверлей отвечает на «что показывать, пока ждём» — сверка отвечает на «что делать, когда пришла истина». Правило абсолютно: оптимистичное значение — это предсказание, и ответ сервера замещает его, даже если они расходятся. Сервер может нормализовать текст комментария, навесить флаги модерации, выдать настоящие id и timestamp; каноничное состояние строится из ответа (или refetch-а) — никогда повышением оптимистичного объекта до «настоящего». Команды, повышающие предсказание, получают дрейф: UI показывает домодерационный текст до следующей полной перезагрузки, а временный клиентский id протекает в якоря и аналитику.

Идентичность — острая кромка. У оптимистичного элемента клиентский ключ; у серверного — настоящий id. Если слияние идёт по позиции в массиве или по небрежному равенству, медленный успех ненадолго покажет оба — приглушённое предсказание и подтверждённый элемент. Несите на оптимистичном элементе клиентский ключ, пусть сервер вернёт его эхом (большинство API возвращают присланное) и сшивайте по нему.

Идемпотентность: пережить второе нажатие

Оптимизм делает UI мгновенным, но с сетью не делает ничего, а пользователи дабл-сабмитят по уважительным причинам: кнопка не отреагировала визуально, страница замерла, гостиничный wifi. Отключение кнопки на время isPending помогает локально, но бессильно, если первый запрос уже улетел, а ответ потерялся — пользователь повторяет, и сервер, не имея памяти, выполняет мутацию дважды. Двойной лайк, двойной комментарий, а в худшем жанре — двойное списание.

Лекарство — ключ идемпотентности: клиент генерирует уникальный ключ на намерение (не на запрос) — crypto.randomUUID() в момент жеста — и шлёт его с мутацией; ретрай шлёт тот же ключ. Сервер хранит обработанные ключи и на повтор возвращает записанный результат вместо повторного исполнения. Это превращает доставку «хотя бы раз» в эффект «ровно раз» — тот же контракт, который ровно по этой причине выставляют платёжные API. Заметьте разделение труда: React даёт оверлей и pending-флаг; идемпотентность — протокол между вашим клиентским кодом и вашим API, и никакой хук её не подвезёт.

Когда оптимизм — неверная ставка

Оптимизм — пари, что успех подавляюще вероятен, а провал дёшево забрать обратно. Лайки, подписки, эмодзи-реакции, отметка прочитанным, перестановка задач в списке: успех в высоких 99-х, откат — лёгкое затухание; ставьте всегда. Пари переворачивается в трёх ситуациях. Деньги и всё юридически значимое: показать «Платёж выполнен» до ответа процессинга — не сокрытие задержки, а ложный чек: пользователь закрывает вкладку и уходит, веря в то, что может оказаться неправдой. Деструктивные, трудно обратимые операции: оптимистично исчезающие «Удалить аккаунт» или «Отменить подписку» подтверждают необратимый акт, который сервер ещё может отвергнуть, — а пользователь уже действует исходя из подтверждения. Мутации с низкой уверенностью: всё с заметной долей отказов (модерируемый контент в строгом сообществе, выбор мест под конкуренцией, резервирование остатков) — когда провал рутина, а не исключение, UI постоянно «забирает обратно» показанное, и каждое изъятие жжёт доверие, которое оптимизм должен был строить. Здесь выигрывает честный pending: отключить, показать прогресс, подтвердить по истине. Пользователь прощает 800 мс спиннера на платеже; он не прощает чек, который отозвали.