Comme d'habitude, Figma ne manquera pas de vous impressionner et a sorti quelques nouvelles super fonctionnalités ainsi que quelques pépites qui se cachent à la vue de tous. Voici donc les meilleurs Trucs & Astuces avec agily.fr pour rendre la vie encore plus...
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 !
Vous avez un projet en tête ?
Discutons-en !
Découvrez nos autres articles de blog
23 meilleurs conseils Figma en 2022
Comme d'habitude, Figma ne manquera pas de vous impressionner et a sorti quelques nouvelles super...
Quels sont les meilleurs outils pour améliorer son expérience utilisateur avec Jamstack ?
Découvrez les 28 meilleurs outils pour améliorer l’expérience utilisateur de votre site statique Jamstack.
Co-design vs design participatif : quelles sont les différences ?
Découvrez les différences entre co-design et design participatif et comment profiter de leurs avantages dans la conception de vos produits.
Comment optimiser ses images pour booster ses performances web ?
Découvrez comment optimiser les images sur votre site web pour booster ses performances et son référencement !