Subscriptions auf Browser-APIs

Browser-Media-Queries sind perfekte externe Stores. Sie können eine matchMedia-Abfrage für den Dark Mode oder einen Breakpoint abonnieren und die Komponente jedes Mal neu rendern, wenn sich der Match-Status ändert.

Die subscribe-Funktion fügt der MediaQueryList einen Change-Listener hinzu, und getSnapshot gibt den aktuellen booleschen Wert von matches zurück. So erhalten Sie reaktiven Zugriff auf responsive Bedingungen.

Wenn Sie diese Logik in einen useMediaQuery-Hook kapseln, können Komponenten mit einem einzigen Aufruf abfragen, ob eine Query zutrifft. Der Hook erstellt für eine bestimmte Query-Zeichenfolge ein stabiles subscribe und getSnapshot.

Das ergibt ein übersichtliches, wiederverwendbares Grundelement für responsives Verhalten, das dank useSyncExternalStore auch beim nebenläufigen Rendering konsistent bleibt.

Der Browser stellt Online- und Offline-Events sowie navigator.onLine bereit. Wenn Sie diese Events abonnieren und die Eigenschaft lesen, erhalten Sie den aktuellen Verbindungsstatus innerhalb von React.

getSnapshot gibt navigator.onLine zurück, und subscribe registriert Listener für die Online- und Offline-Events, sodass die Komponente bei Änderungen der Verbindung aktualisiert wird.

Wenn Sie diese Logik in einem useOnlineStatus-Hook bündeln, kann jede Komponente Offline-Banner anzeigen oder Aktionen deaktivieren, sobald die Netzwerkverbindung abbricht. Die offizielle React-Dokumentation verwendet genau dieses Beispiel, um den Hook zu veranschaulichen.

Es handelt sich um einen kleinen, aber anschaulichen Fall, in dem ein externes Browser-Signal sauber auf einen reaktiven Zustand abgebildet wird.

Sie können Navigationsänderungen überwachen, indem Sie auf das popstate-Event hören und window.location in getSnapshot lesen. Darauf basieren einfache eigene Router auf Grundlage der History API.

Da pushState kein popstate auslöst, senden eigene Router häufig ein eigenes Event, damit der Snapshot auch bei programmgesteuerter Navigation aktualisiert wird.

Das storage-Event wird in anderen Tabs ausgelöst, wenn sich localStorage ändert. Dadurch eignet sich localStorage als abonnierbarer externer Store. getSnapshot liest den aktuellen Wert, und subscribe überwacht storage-Events.

Das ermöglicht die Synchronisierung zwischen Tabs: Wenn Sie einen Wert in einem Tab aktualisieren, werden Komponenten in einem anderen Tab reaktiv aktualisiert.

Das deviceorientation-Event meldet die physische Neigung eines Geräts. Wenn Sie es abonnieren und die neuesten Winkel in getSnapshot lesen, werden Bewegungsdaten zu reaktivem Zustand.

Das ist nützlich für Parallax-Effekte oder interaktive Visualisierungen, die darauf reagieren, wie ein Smartphone gehalten wird.

IntersectionObserver informiert Sie, wenn ein Element in den Viewport hinein- oder aus ihm herauswandert. Sie können ihn kapseln, sodass subscribe den Observer erstellt und getSnapshot den aktuellen Wert von isIntersecting zurückgibt.

So erhalten Sie ein reaktives isVisible-Flag zum verzögerten Laden von Bildern, zum Auslösen von Animationen oder zum Implementieren von Markierungen für endloses Scrollen.

ResizeObserver meldet Änderungen der Elementgröße. Durch eine Kapselung kann subscribe ein Element beobachten und getSnapshot dessen aktuelle Abmessungen zurückgeben, sodass Komponenten präzise auf Layoutänderungen reagieren.

Das ist effizienter und genauer als das Abhören von window resize, wenn es um ein bestimmtes Element und nicht um den gesamten Viewport geht.

Sie können das Resize-Event mit dem Hook kombinieren und so einen useWindowSize-Hook erstellen, der die aktuelle Breite und Höhe zurückgibt. subscribe registriert einen Resize-Listener, und getSnapshot liest die Fensterabmessungen.

Denken Sie daran, einen stabilen Snapshot zurückzugeben. Speichern Sie das Größenobjekt zwischen, damit unveränderte Abmessungen keine erneuten Render-Vorgänge auslösen und die Kombination effizient bleibt.

Überlegen Sie, wie ein useMediaQuery-Hook den Store-Hook verwendet.

Viele Browser-APIs sind externe Stores, die Sie mit useSyncExternalStore anbinden können: matchMedia für Breakpoints, navigator.onLine für die Konnektivität, location und storage für Navigation und tabübergreifende Synchronisierung sowie Orientation-, Intersection- und ResizeObserver.

Jede Implementierung folgt demselben Muster: ein subscribe, das Listener registriert und entfernt, sowie ein stabiler getSnapshot. Setzen Sie sie zu Hooks wie useMediaQuery, useOnlineStatus und useWindowSize zusammen.