React 19.3: View Transitions y Trusted Types estables

React 19.3 llegó a npm el 9 de septiembre de 2026. Es una versión menor sin cambios que rompan la compatibilidad, así que la actualización en sí es aburrida en el buen sentido. Lo importante es lo que salió del cajón experimental. View Transitions y Fragment Refs son ahora estables, y dos adiciones menores, use(browser()) y el soporte para Trusted Types, cambian silenciosamente la forma en que pensamos sobre el renderizado y la seguridad.

Hemos leído las notas de la versión para que pueda saltarse el bombo y llegar a las partes que afectan a proyectos reales.

Qué se ha publicado realmente

View Transitions estuvo detrás de una bandera experimental durante aproximadamente año y medio. Ahora el componente <ViewTransition> es estable. Anima elementos mientras entran, salen, se mueven o cambian de tamaño, y se conecta con la API View Transition del navegador junto con startTransition, Suspense y useDeferredValue. Un helper complementario, addTransitionType(), permite variar la animación según lo que causó la transición, como «siguiente» frente a «anterior» en un carrusel.

Fragment Refs también son estables. Puede adjuntar una ref a un <Fragment> y obtener un conjunto limitado de métodos DOM para todo el grupo de hijos: addEventListener, focus(), observeUsing() para IntersectionObserver, además de algunos helpers de medición. Si alguna vez ha renderizado una lista de hermanos y luego ha tenido que luchar con React para adjuntar un observer a todos ellos, esta es la solución.

Luego hay dos cosas que recibieron menos atención pero merecen más.

use(browser()) es una nueva forma de excluirse del renderizado en servidor. Llámelo dentro de un componente y React suspende ese componente en el servidor, muestra el fallback de Suspense en el HTML inicial y luego lo renderiza normalmente después de la hidratación. Está pensado para componentes que genuinamente no pueden ejecutarse en el servidor, como cualquier cosa que lea localStorage o la zona horaria del usuario.

El soporte para Trusted Types es el que más nos importa. React DOM solía convertir cada valor a una cadena antes de pasarlo al DOM. Ahora pasa TrustedHTML, TrustedScript y TrustedScriptURL sin modificar, para que pueda ejecutar React bajo una Content Security Policy con require-trusted-types-for 'script' y obtener protección contra XSS basado en DOM a nivel de plataforma.

Nuestra opinión

Empiece por la mejora de seguridad. Durante nuestros proyectos de pentesting seguimos encontrando XSS basado en DOM con más frecuencia de la que los equipos esperan, normalmente a través de una llamada a dangerouslySetInnerHTML que confía en datos que no debería. Trusted Types mueve la comprobación al navegador. Si un valor no ha pasado por una política de Trusted Types, la asignación lanza una excepción en lugar de ejecutarse. Es el tipo de defensa que se mantiene incluso cuando un desarrollador comete un error más adelante. Cuando configuramos Cloudflare y CSP para clientes, este es el control en capas que promovemos, y ahora React deja de obstaculizarlo.

El problema es que Trusted Types solo ayuda si lo activa. React 19.3 hace que React sea compatible. No configura la cabecera CSP por usted. Nuestro consejo para esta semana es concreto. Añada require-trusted-types-for 'script' en modo de solo informe, publíquelo y observe los informes de violaciones durante un par de semanas antes de aplicarlo. Encontrará los sinks que olvidó sin romper la producción.

Tenga cuidado con use(browser()). Es una API limpia, pero significa que el contenido del componente está ausente del HTML renderizado en el servidor. Para un widget de configuración, está bien. Para cualquier cosa que un motor de búsqueda o un scraper social necesite ver, ese contenido es ahora invisible en el primer render. Hemos visto cómo equipos dañan su propio SEO al mover demasiado renderizado al cliente. Úselo para componentes hoja de solo navegador, no para contenido que importe a los rastreadores.

Equipos móviles, esperen un momento. View Transitions solo funciona en el DOM por ahora. El equipo de React dice que el soporte para React Native está en progreso, pero aún no está disponible. En nuestro trabajo nativo de iOS y Android nos apoyamos en las propias APIs de transición de la plataforma de todos modos, y para proyectos de React Native recomendaríamos esperar a diseñar alrededor de <ViewTransition> hasta que realmente llegue a la plataforma. No construya una capa de animación compartida sobre una API que solo existe en un objetivo.

Una cosa que hacer ahora

Elija su aplicación React más pequeña, actualice a 19.3 en una rama y active Trusted Types en modo de solo informe. Es una forma de bajo riesgo de ver cuánto trabajo DOM inseguro se esconde en su base de código, y la actualización no tiene cambios que rompan la compatibilidad para frenarlo. Si el informe sale limpio, bien. Si no, acaba de encontrar el backlog de seguridad del próximo sprint.

Si publicar rápido sin dejar agujeros de XSS le suena familiar, hablemos. Hacemos esto para equipos de web y móvil cada semana, desde builds cloud-native hasta revisiones de seguridad.