Si has trabajado en desarrollo frontend, lo más probable es que hayas invertido más horas de las que quieres admitir en crear un loader o spinner llamativo, que haga que la espera de los usuarios no se sienta como una tortura. Bueno, spoiler alert: los usuarios no quieren caer en la hipnosis de ese loader que los tendrá esperando.

No quieren quedarse pegados mirando tu obra maestra giratoria. Prefieren estar en cualquier otra parte, como viendo videos de gatitos en Instagram. Aquí es donde entran los optimistic updates, ese héroe silencioso del frontend que no usa capa pero debería. Un concepto tan revolucionario como simple: ¿por qué esperar a que el servidor confirme algo que ya sabemos que (probablemente) va a suceder?

Aquí es donde entran los optimistic updates como el héroe que no sabías que necesitabas.

¿Qué son los Optimistic Updates y por qué deberían importarte?

En palabras simples, un optimistic update es como decirle al usuario: "Tranqui, esto ya está hecho", incluso antes de que realmente lo esté. La idea es actualizar la interfaz de usuario inmediatamente después de una acción, asumiendo que la operación en el backend será exitosa. Si algo sale mal (porque a veces el universo conspira contra nosotros), revertimos el cambio y mostramos un error.

Ejemplo rápido: Imagina que tienes una lista de tareas y quieres marcar una como completada. Con un optimistic update, la tarea se marca como completada al instante, sin esperar la confirmación del servidor. Si el servidor dice "Nope, algo falló", simplemente deshacemos el cambio.

¿Por qué es importante para la UX?

Los usuarios odian la fricción. Cada milisegundo que pasan esperando una respuesta del servidor es una oportunidad perdida para mantenerlos felices. Con optimistic updates, les das la ilusión de velocidad y control. Y todos sabemos que una buena UX es clave para retener usuarios y evitar que se vayan a la competencia.

¿Cómo lo hacemos en Vambe? Usamos TanStack Query

Tanstack Query (antes conocido como React Query) es una biblioteca poderosa para manejar el estado y las solicitudes de datos en aplicaciones React. Su soporte para optimistic updates es una de sus mejores herramientas.

Aquí tienes un ejemplo de cómo hacerlo:

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoItem({ todo }) {
  const queryClient = useQueryClient();

  const mutation = useMutation(
    async (updatedTodo) => {
      // Simulamos la llamada al backend
      const response = await fetch(`/api/todos/${updatedTodo.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedTodo),
      });
      if (!response.ok) {
        throw new Error('Error actualizando la tarea');
      }
      return response.json();
    },
    {
      // Optimistic update
      onMutate: async (updatedTodo) => {
        await queryClient.cancelQueries(['todos']);

        const previousTodos = queryClient.getQueryData(['todos']);

        queryClient.setQueryData(['todos'], (oldTodos) =>
          oldTodos.map((todo) =>
            todo.id === updatedTodo.id ? { ...todo, ...updatedTodo } : todo
          )
        );

        return { previousTodos };
      },
      // Revertimos si falla
      onError: (err, updatedTodo, context) => {
        queryClient.setQueryData(['todos'], context.previousTodos);
      },
      // Refrescamos los datos al terminar
      onSettled: () => {
        queryClient.invalidateQueries(['todos']);
      },
    }
  );

  return (
    <div>
      <span>{todo.title}</span>
      <button
        onClick={() =>
          mutation.mutate({ id: todo.id, completed: !todo.completed })
        }
      >
        {todo.completed ? 'Desmarcar' : 'Completar'}
      </button>
    </div>
  );
}Copy

Desglosemos el código

1. onMutate: Este callback se ejecuta antes de enviar la solicitud al servidor. Cancelamos las consultas en curso y actualizamos el estado local de manera optimista.

2. onError: Si algo falla, revertimos el estado al valor anterior.

3. onSettled: Una vez que el servidor responde (ya sea con éxito o error), refrescamos los datos.

Tips y buenas prácticas

• Prueba, prueba, prueba: Asegúrate de manejar todos los casos de error. Los optimistic updates funcionan bien en la medida que minimizas errores que no manejas.

• No siempre uses optimistic updates 👀: Por su puesto hay procesos complejos que requieren una respuesta del backend. en estos casos sé creativo e implementa un loader que no haga sentir al usuario que te estás demorando dos eternidades.

Conclusión

Los optimistic updates son una herramienta poderosa para mejorar la experiencia del usuario, y Tanstack Query hace que implementarlos sea easy peasy lemon squeezy 🍋. Al final del día, se trata de hacer que tus usuarios quieran usar tu website, porque la experiencia de hacerlo es mejor que la de cualquier otra.