Suscripción a API del navegador

Las consultas de medios del navegador son un store externo perfecto. Puede suscribirse mediante matchMedia a una consulta para el modo oscuro o para un breakpoint y volver a renderizar cada vez que cambie el estado de coincidencia.

La función subscribe añade un listener de cambios a MediaQueryList, y getSnapshot devuelve el valor booleano actual de matches, lo que proporciona acceso reactivo a las condiciones adaptativas.

Envolver esa lógica en un hook useMediaQuery permite que los componentes consulten si una consulta coincide mediante una sola llamada. El hook construye un subscribe y un getSnapshot estables a partir de una cadena de consulta determinada.

Esto produce una primitiva limpia y reutilizable para el comportamiento adaptable, que mantiene la coherencia durante el renderizado concurrente gracias a useSyncExternalStore.

El navegador expone los eventos online y offline, además de navigator.onLine. Suscribirse a esos eventos y leer la propiedad proporciona un estado de conectividad actualizado dentro de React.

getSnapshot devuelve navigator.onLine, y subscribe añade listeners para los eventos online y offline, de modo que el componente se actualiza cuando cambia la conectividad.

Incorporar esa lógica en un hook useOnlineStatus permite que cualquier componente muestre avisos de falta de conexión o desactive acciones cuando se interrumpe la red. La documentación oficial de React utiliza este ejemplo exacto para demostrar el hook.

Es un caso pequeño pero ilustrativo en el que una señal externa del navegador se convierte fácilmente en un fragmento de estado reactivo.

Puede suscribirse a los cambios de navegación escuchando el evento popstate y leyendo window.location en getSnapshot. Esto sirve de base para routers personalizados sencillos construidos sobre la History API.

Como pushState no emite popstate, los routers personalizados suelen enviar su propio evento para que la instantánea también se actualice durante la navegación programática.

El evento storage se dispara en otras pestañas cuando cambia localStorage, lo que lo convierte en un store externo al que puede suscribirse. getSnapshot lee el valor actual y subscribe escucha los eventos storage.

Esto permite sincronizar pestañas: al actualizar un valor en una pestaña, los componentes de otra se actualizan de forma reactiva.

El evento deviceorientation informa de la inclinación física de un dispositivo. Suscribirse a él y leer los últimos ángulos en getSnapshot convierte los datos de movimiento en estado reactivo.

Esto resulta útil para efectos de paralaje o visualizaciones interactivas que responden a la forma en que se sostiene un teléfono.

IntersectionObserver indica cuándo un elemento entra en la ventana gráfica o sale de ella. Puede envolverlo de modo que subscribe cree el observador y getSnapshot devuelva el último valor de isIntersecting.

Esto proporciona una bandera reactiva isVisible para cargar imágenes de forma diferida, activar animaciones o implementar sentinelas de desplazamiento infinito.

ResizeObserver informa de los cambios en el tamaño de los elementos. Envolverlo permite que subscribe observe un elemento y que getSnapshot devuelva sus dimensiones actuales, para que los componentes reaccionen con precisión a los cambios de diseño.

Es más eficiente y preciso que escuchar window resize cuando le interesa un elemento específico en lugar de toda la ventana gráfica.

Puede combinar el evento resize con el hook para crear un useWindowSize que devuelva el ancho y el alto actuales. subscribe añade un listener de resize y getSnapshot lee las dimensiones de la ventana.

Recuerde devolver una instantánea estable y almacenar en caché el objeto de tamaño para que unas dimensiones sin cambios no provoquen renderizados, manteniendo eficiente la composición.

Razone sobre cómo un hook useMediaQuery utiliza el hook del store.

Muchas APIs del navegador son stores externos que puede conectar mediante useSyncExternalStore: matchMedia para los breakpoints, navigator.onLine para la conectividad, location y storage para la navegación y la sincronización entre pestañas, además de los observadores de orientación, intersección y redimensionamiento.

Todos siguen la misma estructura: un subscribe que añade y elimina listeners y un getSnapshot estable. Puede combinarlos en hooks como useMediaQuery, useOnlineStatus y useWindowSize.