¿Qué son las actualizaciones optimistas y cómo las implementas de forma segura?

Question

Accepted Answer

Una **actualización optimista** actualiza la UI **inmediatamente**, *asumiendo* que una solicitud al servidor tendrá éxito, en lugar de esperar la respuesta. Esto hace que la aplicación se sienta instantánea — pero debes manejar el caso en el que la solicitud falla realmente al **revertir** los cambios.

## El 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 qué es importante para UX

Para acciones de alta confianza (dar like a una publicación, cambiar un todo, enviar un mensaje de chat), la solicitud casi siempre tiene éxito, por lo que esperar el viaje de ida y vuelta solo agrega latencia percibida. Las actualizaciones optimistas hacen que estas se sientan instantáneas.

## Implementarlo de forma segura (el retroceso es 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
  }
}
```

La clave para la seguridad: **capturar una instantánea del estado anterior antes del cambio optimista** y restaurarla si la solicitud falla. Omitir el retroceso deja la UI mintiendo sobre el estado del servidor — el error peligroso que pueden introducir las actualizaciones optimistas.

## Con React Query (soporte 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
});
```

React Query formaliza el patrón: `onMutate` (instantánea + actualización optimista), `onError` (retroceso), `onSettled` (refetch para confirmar la verdad).

## Cuándo usar / evitar

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

## Por qué es importante

Las actualizaciones optimistas son una técnica UX poderosa que hace que las aplicaciones se sientan instantáneas al no esperar la red — pero solo son *seguras* si implementas el retroceso (instantánea-luego-restaura) y muestras errores.

El patrón (instantánea → actualizar → en caso de fallo retroceder → reconciliar) es conocimiento esencial, y entender cuándo es apropiado (acciones con probabilidad de éxito, bajo riesgo) versus peligroso (pagos) es lo que separa una UI pulida y confiable de una que silenciosamente tergiversa el estado del servidor.