S’abonner aux API du navigateur

Les requêtes multimédias du navigateur constituent une source d’état externe idéale. Vous pouvez vous abonner à une requête matchMedia pour le mode sombre ou pour un point d’arrêt, puis effectuer un nouveau rendu chaque fois que l’état de correspondance change.

La fonction d’abonnement ajoute un écouteur de changement à MediaQueryList, tandis que getSnapshot renvoie sa valeur booléenne de correspondance actuelle, ce qui vous donne un accès réactif aux conditions d’adaptation.

En regroupant cette logique dans un crochet useMediaQuery, les composants peuvent déterminer si une requête correspond en un seul appel. Le crochet construit une fonction d’abonnement et un getSnapshot stables à partir d’une chaîne de requête donnée.

Vous obtenez ainsi une primitive claire et réutilisable pour les comportements adaptatifs, qui reste cohérente lors du rendu concurrent grâce à useSyncExternalStore.

Le navigateur expose des événements de connexion et de déconnexion, ainsi que navigator.onLine. En vous abonnant à ces événements et en lisant cette propriété, vous obtenez l’état de la connectivité en temps réel dans React.

getSnapshot renvoie navigator.onLine, et la fonction d’abonnement ajoute des écouteurs pour les événements de connexion et de déconnexion afin que le composant se mette à jour lorsque la connectivité change.

En regroupant cette logique dans un crochet useOnlineStatus, n’importe quel composant peut afficher des bannières hors connexion ou désactiver des actions lorsque le réseau tombe. La documentation officielle de React utilise précisément cet exemple pour présenter le crochet.

Il s’agit d’un cas simple, mais révélateur, où un signal externe du navigateur correspond naturellement à un élément d’état réactif.

Vous pouvez vous abonner aux changements de navigation en écoutant l’événement de changement d’historique et en lisant window.location dans getSnapshot. Cela constitue la base de routeurs personnalisés simples construits avec l’API d’historique.

Comme pushState n’émet pas l’événement de changement d’historique, les routeurs personnalisés déclenchent souvent leur propre événement afin que l’instantané se mette aussi à jour lors d’une navigation programmée.

L’événement de stockage est déclenché dans les autres onglets lorsque localStorage change, ce qui en fait une source d’état externe à laquelle vous pouvez vous abonner. getSnapshot lit la valeur actuelle et la fonction d’abonnement écoute les événements de stockage.

Cela permet la synchronisation entre onglets : la mise à jour d’une valeur dans un onglet met réactivement à jour les composants d’un autre onglet.

L’événement d’orientation de l’appareil indique l’inclinaison physique d’un appareil. En vous y abonnant et en lisant les derniers angles dans getSnapshot, vous transformez les données de mouvement en état réactif.

C’est utile pour les effets de parallaxe ou les visualisations interactives qui réagissent à la manière dont un téléphone est tenu.

IntersectionObserver vous indique quand un élément entre dans la zone d’affichage ou en sort. Vous pouvez l’encapsuler afin que la fonction d’abonnement crée l’observateur et que getSnapshot renvoie la dernière valeur de isIntersecting.

Vous obtenez ainsi un indicateur réactif isVisible pour le chargement différé des images, le déclenchement d’animations ou la mise en œuvre de marqueurs de défilement infini.

ResizeObserver signale les changements de taille des éléments. En l’encapsulant, vous permettez à la fonction d’abonnement d’observer un élément et à getSnapshot de renvoyer ses dimensions actuelles, afin que les composants réagissent précisément aux changements de mise en page.

Cette approche est plus efficace et plus précise que l’écoute du redimensionnement de la fenêtre lorsque vous vous intéressez à un élément précis plutôt qu’à toute la zone d’affichage.

Vous pouvez combiner l’événement de redimensionnement avec le crochet pour créer un useWindowSize qui renvoie la largeur et la hauteur actuelles. La fonction d’abonnement ajoute un écouteur de redimensionnement et getSnapshot lit les dimensions de la fenêtre.

N’oubliez pas de renvoyer un instantané stable en mettant l’objet de dimensions en cache afin que des dimensions inchangées ne provoquent pas de nouveaux rendus, ce qui préserve l’efficacité de la composition.

Analysez la manière dont un crochet useMediaQuery utilise le crochet de source d’état.

De nombreuses API du navigateur sont des sources d’état externes que vous pouvez relier avec useSyncExternalStore : matchMedia pour les points d’arrêt, navigator.onLine pour la connectivité, window.location et le stockage pour la navigation et la synchronisation entre onglets, ainsi que les observateurs d’orientation, d’intersection et de redimensionnement.

Elles suivent toutes la même structure : une fonction d’abonnement qui ajoute et retire des écouteurs, ainsi qu’un getSnapshot stable. Composez-les dans des crochets comme useMediaQuery, useOnlineStatus et useWindowSize.