2 cambios importantes en React: View Transitions y Activity

• React presentó nuevas funciones experimentales
  • View Transitions permite aplicar fácilmente animaciones fluidas de transición entre páginas
  • Activity permite optimizar el rendimiento ocultando la UI y preservando el estado
• Además, también están en desarrollo varias funciones como manejo automático de dependencias, Fragment Refs y Concurrent Stores

Características principales de View Transitions

• Implementa animaciones usando la nueva API del navegador startViewTransition
• Con <ViewTransition> se puede indicar qué elementos animar, y se pueden usar como disparadores startTransition, useDeferredValue, Suspense, etc.
• De forma predeterminada ofrece animaciones de crossfade, y se puede personalizar con CSS
• También soporta shared element transitions, lo que permite movimientos fluidos entre elementos con el mismo atributo name
• Incluye la API addTransitionType, que permite definir animaciones distintas según la causa de la transición

Características principales de Activity

• Con <Activity> se puede ocultar la UI y conservar el estado, o hacer prerenderizado cuando sea necesario
• En modo oculto, el componente se desmonta pero el estado se conserva, y la prioridad de renderizado baja
• Permite restaurar valores de entrada o estado al cambiar de página sin perderlos
• En el futuro también se planea agregar un modo para modales y una función para eliminar estado con el fin de ahorrar memoria
• Activity también admite optimizaciones en renderizado del lado del servidor (SSR)

Otras funciones en desarrollo

• React Performance Tracks

  • Está en desarrollo una función para agregar tracks personalizados de React al profiler de rendimiento del navegador
  • Todavía están resolviendo problemas de rendimiento y de integración con Suspense

• Manejo automático de dependencias de efectos (Automatic Effect Dependencies)

  • El objetivo es insertar automáticamente dependencias de useEffect a través del compilador de React para mejorar la concisión y comprensión del código
  • También busca fomentar una forma de pensar centrada en Effects en lugar del ciclo de vida de los componentes

• Compiler IDE Extension

  • Está en desarrollo una extensión para IDE basada en React Compiler
  • Planea ofrecer varias funciones, como optimización de código, detección de violaciones de reglas y visualización de dependencias insertadas automáticamente

• Fragment Refs

  • Se está investigando la función Fragment Ref, que permite administrar varios elementos del DOM con un solo Ref
  • El objetivo es facilitar las llamadas a la API del DOM

• Gesture Animations

  • Se está investigando cómo extender View Transition a animaciones basadas en gestos táctiles
  • Están resolviendo problemas como movimiento continuo, manejo de acciones no completadas e inversión entre el DOM nuevo y el existente

• Concurrent Stores

  • El objetivo es integrar stores externos con React de forma natural en un modelo concurrente
  • Están desarrollando una nueva API estilo use(store) que vaya más allá de las limitaciones de useSyncExternalStore