React 19.3: View Transitions Estables, Fragment Refs y la API browser()

React 19.3 llegó el 9 de septiembre de 2026 y es la base sobre la que Next.js 16.4 activa gran parte de sus novedades. No es una versión de features llamativas sino de consolidación: APIs que llevaban tiempo en preview por fin son estables. Esto es lo que puedes usar ya sin miedo.

View Transitions estables

Las transiciones de vista nativas del navegador — animaciones entre estados del DOM gestionadas por el navegador, no por JavaScript — ahora tienen soporte estable en React:

tsxCopiar
import { unstable_ViewTransition as ViewTransition } from "react";

// En 19.3 ya es estable:
import { ViewTransition } from "react";

function Gallery() {
  return (
    <ViewTransition name="gallery">
      <ImageGrid images={images} />
    </ViewTransition>
  );
}

El componente coordina automáticamente las animaciones con el ciclo de renderizado de React: si una actualización provoca un Suspense o una transición, la animación espera al momento correcto. También se añaden transiciones independientes, que permiten que varias View Transitions se ejecuten en paralelo sin bloquearse entre sí.

Fragment refs

Por fin puedes referenciar un Fragment directamente:

tsxCopiar
import { Fragment } from "react";

function Wrapper({ children }) {
  const ref = useRef(null);

  useEffect(() => {
    // ref.current apunta al fragment real del DOM
  }, []);

  return <Fragment ref={ref}>{children}</Fragment>;
}

Parece menor, pero resuelve un problema viejo: hasta ahora, envolver children en un fragment impedía medir o manipular su posición en el DOM sin añadir un <div> extra que ensuciaba el layout. Caso típico: tooltips, popovers y componentes de medición.

La API browser()

browser() marca un subárbol para renderizarse solo en el cliente:

tsxCopiar
import { browser } from "react";

function App() {
  return (
    <Layout>
      {browser(() => <ClientOnlyWidget />)}
    </Layout>
  );
}

Es el sucesor oficial de los patrones typeof window !== "undefined" y los wrappers useEffect-only que todos hemos escrito para widgets que dependen de APIs del navegador. En SSR, el subárbol simplemente se omite del HTML inicial y se monta en cliente.

Trusted Types

React 19.3 añade soporte para Trusted Types, la API del navegador que mitiga XSS basado en DOM. Si tu app tiene una política CSP estricta con require-trusted-types-for 'script', React ya no es un obstáculo: internamente pasa los sinks de HTML a través de políticas de Trusted Types.

Cómo se conecta con Next.js 16.4

Next.js 16.4 integra React 19.3 y construye sobre estas APIs: las Instant Navigations usan View Transitions, y el modelo de Cache Components se apoya en parte en el comportamiento refinado de Suspense. Si estás en Next.js, la actualización a 19.3 llega como dependencia — pero conocer las APIs te permite usarlas directamente fuera del framework o en proyectos React puros.

Qué hacer

• Actualiza (npm install react@19.3 react-dom@19.3) — es una minor, sin breaking changes respecto a 19.2.
• Sustituye los wrappers de client-only por browser() donde tengas el patrón manual.
• Prueba View Transitions en navegaciones y galerías; el coste de implementación es bajo y el resultado visual es notablemente superior a las animaciones JS tradicionales.

React 19.3 no reinventa nada, y esa es exactamente su virtud: estabiliza lo que el ecosistema llevaba meses usando en experimental.