Magia visual en React

Una de las cosas que más frustra a los usuarios en internet es tener que esperar. Haces clic en un botón y el sistema se queda pensando hasta que por fin te muestra el resultado. Esto pasa porque el navegador tiene que hablar con el servidor, y eso toma tiempo.

Pero, ¿qué pasaría si asumiéramos que todo va a salir bien y mostráramos el resultado al instante? En React, esa herramienta se llama useOptimistic.

El problema de la espera

Pensemos en el botón de "Me gusta" en una red social.

Normalmente funciona así:

1. El usuario presiona el corazón.
2. La página envía la solicitud al servidor.
3. El usuario ve el corazón sin rellenar mientras la página espera.
4. El servidor responde.
5. El corazón se pinta de rojo.

Esa espera hace que la aplicación se sienta lenta.

La solución optimista

React introdujo la función useOptimistic para resolver esto de forma elegante. Se llama "optimista" porque asume que el servidor dirá que sí y actualiza la pantalla al instante.

Con useOptimistic, funciona así:

1. El usuario presiona el corazón.
2. El corazón se pinta de rojo al instante.
3. En el fondo, la página avisa al servidor.
4. El servidor responde y listo.

Si el servidor falla, React es inteligente y automáticamente deshace el cambio visual, permitiendo mostrar un error si es necesario.

Un ejemplo sencillo

Para entenderlo mejor, veamos cómo se escribe esto en código de una manera simplificada:

import { useOptimistic } from 'react';

export function BotonMeGusta({ meGustaInicial, enviarAlServidor }) {
  // Le decimos a React que sea optimista con el estado del 'Me gusta'
  const [meGustaOptimista, cambiarMeGustaOptimista] = useOptimistic(
    meGustaInicial,
    (estadoActual, nuevoEstado) => nuevoEstado
  );

  async function manejarClic() {
    const nuevoEstadoMeGusta = !meGustaOptimista;
    
    // 1. Actualizamos la pantalla de inmediato
    cambiarMeGustaOptimista(nuevoEstadoMeGusta);
    
    // 2. Enviamos la petición al servidor
    await enviarAlServidor(nuevoEstadoMeGusta);
  }

  return (
    <button onClick={manejarClic}>
      {meGustaOptimista ? 'Te gusta' : 'Dar me gusta'}
    </button>
  );
}

Esta función hace que las aplicaciones se sientan instantáneas, fluidas y profesionales. El usuario siente que la interfaz responde directamente a sus dedos. Es una herramienta pensada completamente para la satisfacción del usuario.