Sottoscrizione alle API del browser

Le media query del browser sono un perfetto esempio di store esterno. È possibile sottoscriversi a una query di matchMedia per la modalità scura o per un breakpoint e rieseguire il rendering ogni volta che lo stato di corrispondenza cambia.

La funzione subscribe aggiunge un listener per i cambiamenti a MediaQueryList, mentre getSnapshot restituisce il valore booleano corrente di matches, offrendo un accesso reattivo alle condizioni responsive.

Racchiudere questa logica in un hook useMediaQuery consente ai componenti di verificare se una query corrisponde con una sola chiamata. L’hook crea un subscribe e un getSnapshot stabili a partire da una determinata stringa di query.

Si ottiene così una primitiva pulita e riutilizzabile per il comportamento responsive, coerente anche nel rendering concorrente grazie a useSyncExternalStore.

Il browser espone gli eventi online e offline oltre a navigator.onLine. Sottoscriversi a questi eventi e leggere la proprietà consente di ottenere in React lo stato della connettività in tempo reale.

getSnapshot restituisce navigator.onLine e subscribe collega listener agli eventi online e offline, così il componente si aggiorna al variare della connettività.

Raggruppare questa logica in un hook useOnlineStatus consente a qualsiasi componente di mostrare banner offline o disabilitare azioni quando la rete si interrompe. La documentazione ufficiale di React usa proprio questo esempio per illustrare l’hook.

È un caso semplice ma significativo, in cui un segnale esterno del browser viene trasformato direttamente in uno stato reattivo.

È possibile sottoscriversi ai cambiamenti di navigazione ascoltando l’evento popstate e leggendo window.location in getSnapshot. Questo costituisce la base per semplici router personalizzati costruiti sulla History API.

Poiché pushState non emette popstate, i router personalizzati spesso inviano un evento proprio, così lo snapshot si aggiorna anche durante la navigazione programmatica.

L’evento storage viene attivato nelle altre schede quando cambia localStorage, rendendolo uno store esterno a cui è possibile sottoscriversi. getSnapshot legge il valore corrente e subscribe ascolta gli eventi storage.

Questo abilita la sincronizzazione tra schede: l’aggiornamento di un valore in una scheda aggiorna in modo reattivo i componenti presenti in un’altra.

L’evento deviceorientation segnala l’inclinazione fisica di un dispositivo. Sottoscriversi a questo evento e leggere gli ultimi angoli in getSnapshot trasforma i dati di movimento in uno stato reattivo.

È utile per effetti parallasse o visualizzazioni interattive che reagiscono al modo in cui viene tenuto un telefono.

IntersectionObserver indica quando un elemento entra o esce dall’area visibile. È possibile racchiuderlo in un wrapper in cui subscribe crea l’observer e getSnapshot restituisce l’ultimo valore di isIntersecting.

Si ottiene così un flag reattivo isVisible per il caricamento differito delle immagini, l’attivazione di animazioni o l’implementazione di sentinelle per lo scroll infinito.

ResizeObserver segnala i cambiamenti nelle dimensioni degli elementi. Racchiuderlo in un wrapper consente a subscribe di osservare un elemento e a getSnapshot di restituirne le dimensioni correnti, così i componenti reagiscono con precisione ai cambiamenti del layout.

È più efficiente e accurato dell’ascolto del ridimensionamento della finestra quando interessa un elemento specifico anziché l’intera area visibile.

È possibile combinare l’evento di ridimensionamento con l’hook per creare un useWindowSize che restituisca larghezza e altezza correnti. subscribe collega un listener per il ridimensionamento e getSnapshot legge le dimensioni della finestra.

È importante restituire uno snapshot stabile, memorizzando nella cache l’oggetto delle dimensioni affinché dimensioni invariate non causino nuovi rendering e la composizione rimanga efficiente.

Molte API del browser sono store esterni che è possibile collegare con useSyncExternalStore: matchMedia per i breakpoint, navigator.onLine per la connettività, location e storage per la navigazione e la sincronizzazione tra schede, oltre agli observer di orientamento, intersezione e ridimensionamento.

Tutti seguono la stessa struttura: un subscribe che collega e rimuove i listener e un getSnapshot stabile. È possibile combinarli in hook come useMediaQuery, useOnlineStatus e useWindowSize.