Оптимистичный UI с useOptimistic

useOptimistic накладывает временное оптимистичное значение поверх твоего реального состояния ровно настолько, насколько action в ожидании, — затем оно исчезает, и проступает реальное состояние. Ты передаёшь ему текущее подтверждённое состояние и редьюсер, который производит оптимистичную версию. Пока transition/action выполняется, чтения возвращают оптимистичное значение; в момент, когда action оседает, React отбрасывает оптимистичный слой, и ты видишь то, чем теперь является реальное состояние.

"use client";
import { useOptimistic, useState, startTransition } from "react";

function LikeButton({ post }: { post: { id: string; likes: number; likedByMe: boolean } }) {
  const [liked, setLiked] = useState(post.likedByMe);
  const [count, setCount] = useState(post.likes);
  // optimistic state is derived from the real state + a pending delta
  const [optimistic, setOptimistic] = useOptimistic(
    { liked, count },
    (state, nextLiked: boolean) => ({
      liked: nextLiked,
      count: state.count + (nextLiked ? 1 : -1),
    }),
  );
  // ...
}

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

Безопасная форма — всегда три хода: сделай снимок истины, примени оптимистичное обновление, затем сверь или откати — с видимым, а не молчаливым, путём ошибки. Снимок здесь неявный: твои реальные useState/серверные данные — это снимок, и useOptimistic никогда их не мутирует. Ты применяешь оптимистичное обновление внутри transition, делаешь реальную мутацию, и при успехе фиксируешь её в реальном состоянии; при сбое ты ничего не делаешь с реальным состоянием (так что оптимистичный слой просто исчезает, и истина возвращается) и показываешь ошибку.

const [error, setError] = useState<string | null>(null);

function toggle() {
  const next = !liked;
  setError(null);
  startTransition(async () => {
    setOptimistic(next);          // 2. apply optimistic — heart fills NOW
    try {
      const res = await likePost(post.id, next);  // 3a. real mutation
      setLiked(next);             // commit truth on success
      setCount(res.likes);        // reconcile with the server's number
    } catch {
      setError("Couldn't update like — tap to retry");  // 3b. visible revert
      // real state untouched → optimistic layer drops → heart un-fills
    }
  });
}

Сверка означает пересинхронизироваться с тем, что сервер реально сказал (res.likes может отличаться от твоей догадки, если другой пользователь тоже лайкнул). Откат означает: не трогай реальное состояние, дай React снять оптимистичный слой и скажи пользователю.

Режим отказа, который определяет этот паттерн: оптимистичное обновление без отката и без пути ошибки. Тогда UI врёт всякий раз, когда запрос падает. Такое легко выкатить, потому что счастливый путь выглядит идеально в dev, где запросы никогда не падают. Запах — это setOptimistic(...), за которым следует «выстрелил и забыл» мутация без catch, или catch {}, который проглатывает ошибку. Когда сеть отваливается, сердечко остаётся заполненным, элемент остаётся в списке, счётчик неверный — а пользователь понятия не имеет, что его действие не прошло.

// BROKEN: optimistic with no error path — the UI lies on failure
function toggle() {
  startTransition(async () => {
    setOptimistic(!liked);
    setLiked(!liked);          // commits truth BEFORE the server confirms
    await likePost(post.id, !liked).catch(() => {}); // swallowed → silent lie
  });
}

Исправление структурное, а не косметическое: никогда не фиксируй реальное состояние до подтверждения сервера и всегда имей catch, который даёт пользователю обратную связь. Оптимизм без пути отката — это не оптимизм, это баг, который сам себя прячет.

Не будь оптимистичным насчёт операций, которые пользователь не должен ошибочно считать выполненными, — платежи, удаления-с-последствиями, всё необратимое. Оптимистичный UI меняет корректность-в-моменте на скорость, ставя на то, что действие удастся. Эта ставка нормальна для лайка или добавления задачи: если оно упадёт, пользователь пожмёт плечами и повторит. Она не нормальна для «Оплатить $400» или «Удалить аккаунт», где ложное «Готово ✓» уводит пользователя в уверенности, что произошло то, чего не произошло. Для них показывай реальное состояние ожидания (спиннер, заблокированную кнопку) и подтверждай только после подтверждения сервера.

// like / add-to-list  → optimistic is great (cheap to be wrong, instant feel)
// "Pay now" / "Delete forever" → NEVER optimistic; the user acts on a false truth
//   use a pending UI instead:
const [isPending, startTransition] = useTransition();
<button disabled={isPending}>{isPending ? "Charging…" : "Pay $400"}</button>

Senior-суждение — по-действию: спроси «если это оптимистичное обновление окажется неверным, что пользователь сделает с этим ложным убеждением?». Если ответ «ничего плохого» — будь оптимистичным. Если «он думает, что заплатил» — нет.