View Transitions en React: Una Nueva Era de UI Sin Fisuras

Una interfaz de usuario fluida no es solo un adorno, es cómo los usuarios deciden si tu aplicación se siente moderna. Hola, soy Samuel Ouyang, un ingeniero fundador en AI Startups. Hoy te mostraré cómo usar React 19 y la View Transition API para desbloquear una interfaz de usuario sin problemas. Presenta cómo se mueve React. Entonces, ¿por qué las animaciones en React se sienten rotas? En primer lugar, los cambios de enrutamiento son un malabarismo. No hay continuidades. Entonces pasamos a las complejas bibliotecas de animación de terceros. Pero esto añade complejidad, tamaño del paquete y código repetitivo. Cuando eso no es suficiente, intentamos los frágiles trucos del DOM, que resultan en que el SSR y el RLC se rompan. Y una interfaz de usuario fluida siempre se siente como luchar contra React en lugar de trabajar con él.

Así que aquí está la antigua manera de hacer las transiciones. La antigua técnica de transición simplemente no escala. La animación, el diseño, resultando en cambios impredecibles. Cambios de enrutamiento, introduciendo parpadeos de carga, y el SSR lleva a una desincronización de hidratación. Y parchear estos problemas mata el rendimiento. Así que eso significa más código, más trucos, aún mala UX. Luego tenemos los movimientos de cuadro. Los movimientos de cuadro en realidad fueron un gran paso adelante, pero incluso eso tiene límites. En primer lugar, necesitamos añadir código extra a casi todos los componentes. No hay transiciones de enrutador nativas. Y además, aumenta el tamaño del paquete, y no se soporta bien con SSR y streaming.

Así que aquí viene la View Transition API. La View Transition API es una característica nativa del navegador construida para resolver estos problemas. Entonces, ¿cómo funciona? En primer lugar, toma una instantánea del DOM antes y después. Y luego el navegador anima entre ellos. Sin diferenciación manual, y maneja las actualizaciones de ruta y los cambios de página completa. Por primera vez, las transiciones suaves están integradas en la plataforma. Luego React 19 adopta esta API con el componente View Transition. El componente View Transition es experimental, pero hace que las transiciones sean declarativas y nativas para React. Se integra con los enrutamientos, así que route.push anima la página automáticamente.

Funciona con SSR y RSC. Y finalmente, tiene los componentes de View Transition que podrían funcionar con la View Transition API. Pero también tiene limitaciones. En primer lugar, es un envoltorio. Esto significa que necesitamos envolver los árboles JSX para casi todos los lugares donde necesitamos realizar las transiciones de vista. Y no hay manejo automático de rutas. Esto significa que si estamos haciendo el enrutador con las cargas, o necesitamos manejar algún enrutamiento complejo basado en las condiciones, tenemos que envolverlo cuidadosamente. Y eso es propenso a errores.

En segundo lugar, es difícil de hacer con el suspense y SSR, porque la View Transition es una API del lado del cliente. Así que significa que SSR y el streaming son fáciles de parpadear, renderizar dos veces y desajustar. Si comenzamos la transición en el momento equivocado, eso también requiere que envuelvas los componentes correctos en el momento adecuado usando el envoltorio de View Transition de React 19. Así que luego introduzco el hook personalizado Use View Transition que creé. Así que resuelve perfectamente los problemas con los que trabaja, tanto en enrutamiento, estado y suspense.

Por ejemplo, como el manejo automático de rutas. Podemos ponerlo directamente en los disparadores de hacer los enrutamientos, por ejemplo, haciendo las navegaciones, y también podría manejar las rutas anidadas complejas. Y también es seguro para SSR y retrocede a un concurrente amigable con una API de React Native de inicio de transición. Y en resumen, React nos dio el motor, y yo construí el volante para introducir las flexibilidades para trabajar con la View Transition API. Así que aquí está mi código. Así es como se ve mi código. El código real, de hecho, además de las declaraciones y el otro trabajo, el código real en realidad solo tiene las 10 líneas.

Así que en el lado izquierdo está la implementación del hook personalizado. En el lado derecho está cómo usar ese hook personalizado. En el lado izquierdo, básicamente, primero que nada, detecta características de las APIs del navegador, y podríamos detectarlo. Y estaban justo alrededor de la transición de vista de inicio nativa. Y usan la sincronización flash para asegurar que el DOM esté sincronizado correctamente para prevenir cualquier parpadeo inesperado. Y si el navegador no puede encontrar la transición de vista de inicio, retrocede de manera elegante con la programación no urgente de React con start transition que es concurrentemente operaciones no bloqueantes que hacen que la transición siga siendo suave sin la transición de vista.

Así que aquí hay una demostración rápida de hacer eso. Solo estoy compartiendo mi pantalla. Déjame solo sacar el sitio web aquí. Aquí está mi API. Aquí está el sitio web que creé usando el hook personalizado que creé. Primero que nada, implementé múltiples implementaciones, incluyendo cambios de ruta, cambio de diseño y los eventos de clic. Y el último, lista, pero la lista ya se está reordenando. Así que con respecto al cambio de ruta, puedes ver que tenemos transiciones suaves usando el hook que creé llamado useViewTransition. Y con respecto a las transiciones de panel, cambiamos de la cuadrícula a la lista y de la lista a la cuadrícula. Verás las transiciones bastante suaves. Y el tercero en realidad son los eventos de clic, significa que solo animamos los volteos usando las transiciones de vista.

Y lo mismo para esto también. Por ejemplo, estoy haciendo clic en ocultar, ocultar y ocultar, y hago clic en mostrar todo. Ves que la transición es bastante suave con el hook personalizado que creé. Y por último, pero no menos importante es el reordenamiento de listas. Esto ya, por ejemplo, tiene los cinco elementos con diferentes colores. Estoy poniendo esto justo después del para inyectar el primero y luego poner eso tercero justo después de ese cuarto.

Y luego restablecer el orden. Verás que la transición en realidad es bastante fluida sin ningún código de terceros. Solo usando el hook personalizado y también la API de transición de vista, la API de transición de vista nativa del navegador, y también la API de inicio de transición creada por React.

Entonces, ¿cómo funciona la API de transición de vista bajo el capó? Primero que nada, los navegadores capturan el estado actual del DOM, cambian la imagen, y luego las actualizaciones programadas de React usan las transiciones de inicio y el navegador anima suavemente del estado antiguo al nuevo. Así que significa que ya no tenemos los problemas de hidratación o parpadeo porque esto abarca bien las transiciones con el respaldo seguro usando la API de inicio de transición. Sí.

Así que vamos al siguiente. Entonces, ¿cuándo deberíamos usar la transición de vista? ¿Y cuándo no deberíamos? El caso de uso perfecto es lo que acabo de demostrar, como los cambios en bruto, animaciones de tarjetas, cambios de pestañas, cambios de diseño. Pero no es ideal para el streaming de alta frecuencia. Por ejemplo, los chats en vivo son actualizaciones de datos en tiempo real. Y también, por supuesto, no es compatible con algunos de los navegadores. Y mencionaré eso más adelante en la siguiente diapositiva.

Y también la gestión de datos complejos, por ejemplo, la fusión de datos en tiempo real, y también el hover y el focus que resultarán en parpadeos. Y en ese caso, trabajamos alrededor usando el CSS para lograr el objetivo y las otras técnicas. Y con respecto a las capacidades de rendimiento, funciona con Chrome, Edge y Safari. Y todos están en un estado estable. Pero para Firefox, todavía está en desarrollo, pero llegará pronto este año. Así que animo a todos a usar las transiciones de vista de inicio.