Comment expérimenter React Freeze avec React Suspense

Aujourd’hui, nous allons analyser un nouveau package React : react-freeze. Cette petite bibliothèque utilise le mécanisme React Suspense pour empêcher l’activation de certaines parties de l’arborescence des composants React tout en gardant son état (à la fois l’état de React et de la vue native / de l’élément DOM) intact. De cette façon, il est possible de mettre en pause les mises à jour d’une partie des applications qui ne sont pas visibles pour l’utilisateur à ce moment-là, et donc de gagner du temps.

Le cas d’utilisation idéale de la bibliothèque react-freeze est la navigation. Lorsque l’on utilise la navigation dans les applications React Native, il y a un certain nombre de composants d’écran qui sont présentes dans l’arborescence react et qui peuvent recevoir des mises à jour d’état. Mais elles ne sont pas visibles pour l’utilisateur. Il en va de même pour la navigation par onglets dans les applications web ou natives – nous avons des arborescences de composants potentiellement complexes au niveau de chaque onglet, et comme nous ne voyons qu’un seul onglet à la fois, on passe inutilement beaucoup de temps à mettre à jour les onglets invisibles.

Notez que react-freeze ne supprime pas les composants gelés, mais ils seront temporairement retirés de l’écran et remplacés par un placeholder. Il s’agit d’une limitation de l’approche que nous adoptons avec Suspense. Cependant, cela ne devrait pas être une réduction trop problématique car de toute façon notre objectif est de geler uniquement les parties qui ne sont pas visibles.

Si vous êtes prêt à l’essayer cette bibliothèque, il existe plusieurs façons de le faire :

UTILISER LA BIBLIOTHÈQUE FREEZE DIRECTEMENT DANS LES APPLICATIONS REACT OU REACT NATIVE

Pour utiliser Freeze, la seule chose que vous devez faire est d’importer le composant Freeze de la bibliothèque react-freeze que vous pouvez installer à partir de npm. Ensuite, vous enveloppez certains de vos composants avec lui et passez freeze={true} lorsque vous souhaitez que les mises à jours soient stockées provisoirement dans la sous-arborescence enveloppée :

COMMENT L’UTILISER AVEC REACT-NAVIGATION V5 OU V6 (REACT NATIVE) 

React-navigation utilise une bibliothèque appelée react-native-screens pour effectuer la récupération des écrans originaux. Au niveau de la bibliothèque react-native-screens, nous sommes capables de dire quels « écrans » sont visibles et quels sont ceux cachés dans la hiérarchie de la pile. Grâce à cela, nous avons pu modifier les écrans de la bibliothèque react-native et ajouter un support expérimental pour le freeze. Pour l’utiliser, la seule chose à faire est de mettre à jour react-native-screens avec la version 3.9.0 et d’ajouter le snippet ci-dessous dans le fichier racine de votre application :

Cette version de react-native-screens est compatible avec react-navigation v5 et v6, cependant, avec react-navigation v5, assurez-vous d’avoir également la bibliothèque screens activée. Ceci peut être fait grâce à une méthode supplémentaire dans le fichier principal de votre application : enableScreens(true) et en passant l’option detachInactiveScreens avec vos navigateurs (onglets, etc).

Le mot de la fin 

L’utilisation de React Freeze avec React Suspense est un procédé qui peut paraître complexe mais ils possèdent de nombreux avantages comme celui de faire gagner du temps à l’utilisateur.

Le principe est d’empêcher l’activation de certaines parties de l’arborescence des composants React pour permettre la mise en pause des mises à jour d’une partie des applications.

Prêt à sauter le pas ? Contactez-nous !