Généralement, les problèmes de performance des applications ne se manifestent pas pendant le développement, mais plutôt une fois l'application en production. Pendant le développement, les tests sont souvent effectués en mode développement sur des simulateurs ou des appareils physiques personnels. Les problèmes de performances peuvent se manifester par des temps de démarrage prolongés, une expérience utilisateur saccadée, des retards lors des interactions avec les éléments, des images manquantes lors des transitions ou du défilement, etc.
Pour éviter ces risques, une fois qu'un développeur a achevé le développement d'une application, que ce soit pour le web ou le mobile, il est essentiel de se consacrer à la gestion et à l'optimisation des performances. Ces processus revêtent une importance cruciale pour garantir une expérience utilisateur fluide.
En examinant les meilleures pratiques, il devient possible de réduire les temps de chargement, d'améliorer la réactivité, et d'optimiser l'utilisation des ressources système. Dans les paragraphes suivants, nous explorerons ces meilleures pratiques afin d'optimiser les performances, minimiser les temps de chargement, gérer efficacement la mémoire, et améliorer la réactivité des applications mobiles développées avec React Native.
PureComponent
En React Native « PureComponent » est une classe de base pour les composants qui implémente automatiquement la méthode «shouldComponentUpdate» avec une comparaison superficielle des accessoires et de l’état du composant. Cette méthode permet de contrôler quand un composant doit être rendu à nouveau en fonction des changements.
La classe « PureComponent » permet d’éviter les nouveaux rendus inutiles en améliorant les performances de l’application. Comme le montre l’exemple suivant, il est recommandé de l’utiliser lorsque les accessoires et l'état de votre composant sont des objets simples.
La mémorisation
La mémorisation est une stratégie de développement logiciel visant à optimiser les performances en stockant les résultats calculés d'une fonction pour des paramètres spécifiques. Lorsque la fonction est réutilisée avec les mêmes paramètres, le résultatprécalculé est utilisé, réduisant ainsi le temps d'exécution, particulièrement bénéfique pour les algorithmes coûteux en calculs.
Dans certains cas, l’application peut être menée à effectuer des calculs lourds, ce qui conduit à une interface utilisateur lente et insensible. Comme l’illustre le code suivant, la mémorisation peut y remédier.
React.memo()
React.memo() crée un composant mémorisé qui se met à jour uniquement lorsque ses props changent. Cette fonction est utile pour optimiser les composants de FlatList en évitant les rendus inutiles.
Dans l’exemple précédent, MyListItem doit être mis à jour uniquement en cas de changement du titre. En spécifiant une fonction de comparaison comme deuxième argument de React.memo(), le composant ne sera rendu que si l'accessoire spécifié est modifié, évitant ainsi des rendus superflus.
UseCallBack
En React Native, un «hook» est une fonction spéciale qui permet aux composants fonctionnels d'accéder à des fonctionnalités de React telles que l'état local, le cycle de vie, etc.
«UseCallBack» est un hook de React qui permet de mémoriser une fonction entre les rendus. Il renvoie une version mémorisée de la fonction qui ne change que si l'une de ses dépendances change. Cela est utile pour optimiser les performances en évitant les créations inutiles de fonctions à chaque rendu.
Pour l’utiliser, il suffit simplement d’envelopper notre fonction dans le «useCallBack» afin qu’elle ne se recrée pas à chaque fois que la fonction de rendu est appelée.
La virtualisation
La virtualisation, une méthode employée dans React Native, optimise les performances des listes longues en affichant uniquement les éléments visibles à l'écran. Cette approche diminue la charge sur le DOM et améliore l'efficacité globale de l'application. RecyclerListView est une bibliothèque courante pour mettre en œuvre la virtualisation dans React Native. Voici un exemple concret.
Optimisation des images
L'intégration d'images joue fréquemment un rôle crucial au sein de toute application, et l'optimisation de ces éléments peut engendrer une amélioration significative des performances de votre application React Native. Diverses techniques sont à disposition pour optimiser les images, parmi lesquelles :
- Choisir les formats d'image appropriés tels que JPEG, PNG ou WebP.
- Ajuster les dimensions des images selon les besoins spécifiques.
- Appliquer une compression pour réduire la taille globale des fichiers images.
- Utiliser un CDN (réseau de diffusion de contenu) pour diffuser efficacement les images.
Accélération du Build CI
Un serveur de CI (Intégration Continue) est un élément essentiel du processus de développement logiciel, permettant d'automatiser la construction, les tests, et le déploiement des modifications apportées au code. Accélérer ce processus est crucial pour éviter la perte de temps et d'argent. Cependant, dans le contexte de React Native, il est souvent recommandé de désactiver Flipper.
Pour les applications mobiles iOS, Flipper est un outil de débogage intégré par défaut avec React Native, conçu pour aider les développeurs à déboguer et profiler leurs applications. Cependant, dans un environnement de CI, où il n'est pas nécessaire de déboguer l'application construite, l'utilisation de Flipper devient superflue. À noter que la construction de Flipper peut prendre un certain temps lors de chaque création du framework React Native.
Afin d'éviter cette perte de temps inutile, notamment lors de l'installation des pods iOS, il est recommandé d'exécuter la commande suivante : NO_FLIPPER=1 bundle exec pod install --project-directory=ios.
Cette commande désactive la construction de Flipper, accélérant ainsi le processus d'installation des dépendances nécessaires à votre application iOS dans le contexte de la CI. En éliminant cette étape non essentielle, vous optimisez le flux de travail de votre serveur de CI et garantissez des cycles de développement plus rapides et plus efficaces.
Références
- Jignen Pandya, «10 Ways to Boost your React Native Application Performance», Expert app DEVS, https://www.expertappdevs.com/blog/improve-performance-of-react-native-app, (page consultée le 4 Mars 2024).
- «Optimisation de la configuration de la liste plate», React Native, https://reactnative.dev/docs/optimizing-flatlist-configuration , (page consultée le 5 Mars 2024).
- Arthur C.Codex, «What are the best practices for React Native performance optimization?»,REINTECH,https://reintech.io/blog/best-practices-for-react-native-performance-optimization, (page consultée le 5 Mars 2024).
- Damien Buchet,«Améliorer les performances de React», Blog, https://buchet.tech/blog/ameliorer-performances-react-memoization, (page consultée le 5 Mars 2024).
- Avraham Hamu, «React Native Memoization Cheatsheet», Medium, https://betterprogramming.pub/react-native-memoization-cheatsheet-769ee2841aa2, (page consultée le 5 Mars 2024).
- Thibault Lenclos, «Performances avec React Native», 1. Premier octet, https://www.premieroctet.com/blog/performances-avec-react-native , (page consultée le 5 mars 2024).
Commentaires