O que são atualizações otimistas e como você as implementa com segurança?

Question

Accepted Answer

Uma **atualização otimista** atualiza a UI **imediatamente**, *assumindo* que uma requisição ao servidor será bem-sucedida, em vez de aguardar a resposta. Isso faz o app parecer instantâneo — mas você deve lidar com o caso em que a requisição realmente falha **revertendo**.

## O contraste

```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)
```

## Por que isso importa

Para ações de alta confiança (curtir um post, alternar um todo, enviar uma mensagem de chat), a requisição quase sempre é bem-sucedida, então aguardar o tempo de ida e volta apenas adiciona latência percebida. Atualizações otimistas fazem essas ações parecerem imediatas.

## Implementando com segurança (o rollback é crítico)

```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
  }
}
```

A chave para a segurança: **capturar um snapshot do estado anterior antes da mudança otimista** e restaurá-lo se a requisição falhar. Pular o rollback deixa a UI mentindo sobre o estado do servidor — o bug perigoso que as atualizações otimistas podem introduzir.

## Com React Query (suporte integrado)

```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
});
```

O React Query formaliza o padrão: `onMutate` (snapshot + atualização otimista), `onError` (rollback), `onSettled` (refetch para confirmar a verdade).

## Quando usar / evitar

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

## Por que isso importa

Atualizações otimistas são uma técnica poderosa de UX que faz os apps parecerem instantâneos por não aguardarem a rede — mas são *seguras* apenas se você implementar rollback (snapshot-then-restore) e expor erros.

O padrão (snapshot → atualização → ao falhar fazer rollback → reconciliar) é conhecimento essencial, e entender quando é apropriado (ações prováveis de sucesso, baixo risco) versus perigoso (pagamentos) é o que diferencia uma UI polida e confiável daquela que representa silenciosamente o estado do servidor incorretamente.