Optimistic UI
Optimistic UI (actualizaciones optimistas) es un patrón de UX/frontend en el que la interfaz asume que una acción va a tener éxito y actualiza el estado visualmente de forma inmediata, sin esperar la confirmación del servidor. Si la operación falla, se revierte el cambio y se notifica el error al usuario.
El nombre viene de adoptar una postura optimista: "esto va a salir bien, así que ya lo muestro".
Problema que resuelve
En una SPA tradicional, el flujo habitual es:
Esto introduce latencia perceptible, especialmente con conexiones lentas o servidores con alta carga. El usuario tiene que esperar para ver el resultado de cada acción.
Con Optimistic UI el flujo cambia a:
- El usuario ejecuta una acción (clic, submit, etc.).
- La UI actualiza el estado local de forma inmediata, como si ya hubiera ido bien.
- Se lanza la petición HTTP al servidor en segundo plano.
- Se espera la respuesta:
- Éxito: el estado del servidor coincide con el local → no se hace nada.
- Error: se revierte el estado local al valor anterior y se muestra el error.
Ejemplos reales
| Aplicación | Acción | Comportamiento optimista |
|---|---|---|
| Twitter / X | Dar "like" | El corazón se pone rojo al instante |
| Gmail | Archivar un correo | El email desaparece de la lista inmediatamente |
| Notion / Google Docs | Editar texto | Los cambios se ven al momento sin esperar sync |
| Trello | Mover una tarjeta | La tarjeta se mueve visualmente al instante |
| Enviar mensaje | El mensaje aparece antes de confirmación del servidor |
Cuándo usarlo (y cuándo no)
Buena candidata para Optimistic UI
- Acciones con alta tasa de éxito (>99% de los casos funcionan bien)
- Operaciones que el usuario repite frecuentemente (likes, reordenar, editar)
- Cuando la latencia es perceptible y degrada la experiencia
- Acciones reversibles (se puede deshacer si falla)
No recomendable
- Operaciones críticas o irreversibles (pagos, borrado permanente, envío de contratos)
- Acciones con lógica de negocio compleja en servidor donde el resultado es impredecible
- Cuando el conflicto de datos con otros usuarios es probable (ej: reservas en tiempo real)
Consideraciones importantes
Estado de "pending"
Aunque la UI se actualiza de inmediato, es buena práctica aplicar un estilo visual sutil (opacidad reducida, indicador pequeño) mientras la petición está en vuelo. Así el usuario sabe que la acción está en proceso sin que le bloquee.
Manejo del error
El mensaje de error debe ser claro y aparecer cerca del elemento afectado. Un toast genérico puede confundir si el usuario ya realizó varias acciones.
Conflictos y race conditions
Si el usuario puede lanzar múltiples acciones rápidas, hay que gestionar el orden de las respuestas. React Query cancela las queries anteriores automáticamente con cancelQueries.