React Hooks Personnalisés : useNetworkState

Posted on 11/28/2021

4 min

Après avoir implémenté le Hook useLocalStorage pour faciliter la gestion du stockage local, implémentons le Hook useNetworkState pour connaître l'état du réseau de l'utilisateur (savoir s'il est connecté à internet ou non).

Motivation

Supposons que nous soyons en train de développer une application qui nécessite d'être connecté à internet en permanence pour fonctionner convenablement. Si l'utilisateur se retrouve déconnecté, un message doit être affiché, lui informant de vérifier sa connectivité. Pour ce faire, dans une application React, voici comment nous pourrions procéder.

1const App = () => {
2  const [isOnline, setIsOnline] = useState(window.navigator.onLine);
3
4  useEffect(() => {
5    const handleOnline = () => setIsOnline(true);
6    const handleOffline = () => setIsOnline(false);
7
8    window.addEventListener('online', handleOnline);
9    window.addEventListener('offline', handleOffline);
10
11    return () => {
12      window.removeEventListener('online', handleOnline);
13      window.removeEventListener('offline', handleOffline);
14    };
15  }, []);
16
17  return (
18    <div>
19      <h1>My Awesome App</h1>
20      <p>
21        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
22        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
23        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
24        saepe, sunt, similique vitae illo.
25      </p>
26      {!isOnline && (
27        <div className="toast">
28          You are offline. Please check your connectivity and try again.
29        </div>
30      )}
31    </div>
32  );
33};

Ceci fonctionne parfaitement. En revanche, notre code pourrait considérablement être simplifié, notamment le Hook useEffect. Notre but est donc de définir un Hook useNetworkState afin d'abstraire cette logique dans un Hook séparé. Cela permettra à la fois de simplifier notre composant, mais aussi (et surtout) de pouvoir réutiliser cette logique à d'autres endroits de notre application sans dupliquer de code. Maintenant que nous savons pourquoi nous avons besoin de ce Hook, passons à l'implémentation. 👨🏻‍💻

Implémentation

Comme à notre habitude, réfléchissons d'abord à l'interface de notre Hook afin de savoir comment nous allons l'utiliser. Dans notre cas, nous voudrions quelque chose d'aussi simple que ça :

1const isOnline = useNetworkState()

Ni plus, ni moins. Il nous retournerait une simple valeur booléenne qui sera mise à jour automatiquement et convenablement pour se synchroniser avec l'état actuel de la connectivité de l'utilisateur.

Nous pouvons donc passer à l'implémentation, qui consistera tout simplement en l'extraction de la logique que nous avons écrite précédemment au sein d'une fonction séparée. Le Hook final n'est donc pas plus compliqué que ça :

1const useNetworkState = () => {
2  const [isOnline, setIsOnline] = useBoolean(window.navigator.onLine);
3
4  useEffect(() => {
5    window.addEventListener('online', setIsOnline.on);
6    window.addEventListener('offline', setIsOnline.off);
7
8    return () => {
9      window.removeEventListener('online', setIsOnline.on);
10      window.removeEventListener('offline', setIsOnline.off);
11    };
12  }, []);
13
14  return isOnline;
15};

Euh, c'est quoi ce Hook useBoolean ? 🤨

Effectivement, il n'est pas fourni directement par React. Cependant, pour ceux qui suivraient cette série depuis le tout début, ce Hook devrait vous rappeler quelque chose : c'est le tout premier Hook personnalisé que nous avons implémenté ensemble !

Si vous avez découvert cette série en cours de route, pas d'inquiétude : je vous invite à lire cet article pour en apprendre plus sur ce Hook.

Si vous ne souhaitez pas utiliser le Hook useBoolean, vous pouvez vous contenter d'un simple useState.

1const useNetworkState = () => {
2  const [isOnline, setIsOnline] = useState(window.navigator.onLine);
3
4  useEffect(() => {
5    const handleOnline = () => setIsOnline(true);
6    const handleOffline = () => setIsOnline(false);
7
8    window.addEventListener('online', handleOnline);
9    window.addEventListener('offline', handleOffline);
10
11    return () => {
12      window.removeEventListener('online', handleOnline);
13      window.removeEventListener('offline', handleOffline);
14    };
15  }, []);
16
17  return isOnline;
18};

Utilisation

Si nous reprenons notre composant App de tout à l'heure, voici comment il peut être simplifié grâce à notre tout nouveau Hook :

1const App = () => {
2  const isOnline = useNetworkState()
3
4  return (
5    <div>
6      <h1>My Awesome App</h1>
7      <p>
8        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa
9        provident tenetur molestias fugiat expedita quaerat dolores dignissimos
10        dicta, error amet reiciendis voluptates delectus perspiciatis dolorum
11        saepe, sunt, similique vitae illo.
12      </p>
13      {!isOnline && (
14        <div className="toast">
15          You are offline. Please check your connectivity and try again.
16        </div>
17      )}
18    </div>
19  );
20};

Eh oui, je vous l'avais dit, notre code est désormais bien plus simple ! 😎

Conclusion

Nous avons réussi à abstraire toute la logique de connectivité réseau à l'extérieur de notre composant, qui se concentre maintenant sur ce qu'il doit réellement faire. Grâce à cela, nous suivons le principe de séparation des préoccupations, ou Separation of Concerns en anglais (SOC). Vous trouverez plus d'informations sur ce lien. Dans le prochain article, nous allons implémenter un Hook pour utiliser plus facilement les effets sonores : useAudio.

Code source disponible sur CodeSandbox.