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

Question

Accepted Answer

**Оптимистичное обновление** обновляет UI **сразу же**, *предполагая*, что запрос на сервер будет успешен, вместо того чтобы ждать ответ. Это делает приложение мгновенным — но вы должны обработать случай, когда запрос действительно не удаётся, **откатив изменения**.

## Контраст

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## Почему это важно

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

## Безопасная реализация (откат критичен)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

Ключ к безопасности: **сохраните снимок предыдущего состояния перед оптимистичным изменением** и восстановите его, если запрос не удаётся. Пропуск отката оставляет UI с ложной информацией о состоянии сервера — опасный баг, который могут внести оптимистичные обновления.

## С React Query (встроенная поддержка)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

React Query формализует паттерн: `onMutate` (снимок + оптимистичное обновление), `onError` (откат), `onSettled` (повторная загрузка для подтверждения истины).

## Когда использовать / избегать

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## Почему это важно

Оптимистичные обновления — мощная техника UX, которая делает приложения мгновенными, не ожидая сеть — но они *безопасны* только если вы реализуете откат (сохранение-затем-восстановление) и показываете ошибки.

Паттерн (снимок → обновление → при сбое откат → согласование) — это необходимое знание, и понимание того, когда это уместно (действия с высокой вероятностью успеха, низкий риск) в сравнении с опасным (платежи), — это то, что отличает отполированный, заслуживающий доверия UI от того, что молча искажает состояние сервера.