Optimisations en React Native — Partie 3

8 min readDec 20, 2023

1 — Suppression des bibliothèques inutiles en React Native

Alors, le titre peut faire sourire, mais ça reste un point essentiel ET je pense que l’on sous-estime un certain nombre de développeurs pour ne pas être au point sur ce sujet. Dit comme ça, ça peut paraître ridicule, mais quand on a la tête dans le guidon, que les features, debugs et autres sujets s’empilent pour diverses raisons, on oublie vite cette partie pourtant essentielle. On va donc y jeter un coup d’œil, surtout qu’il y a quelques techniques bien utiles pour cela, mine de rien.

Parce que oui, la suppression des bibliothèques inutiles permet de réduire le temps de chargement et d’améliorer l’expérience utilisateur globale.

Identifier les bibliothèques superflues :

Avant tout, il est important d’analyser votre projet pour détecter les bibliothèques qui ne sont plus utilisées ou qui ont un impact négatif sur les performances. Des outils tels que webpack-bundle-analyzer ou react-native-bundle-visualizer peuvent aider à visualiser la taille des dépendances et leur impact sur l'application.

Évaluer les alternatives :

Parfois, une bibliothèque peut être remplacée par une solution plus légère ou par une fonctionnalité native de React Native. Par exemple, si une bibliothèque est utilisée uniquement pour une petite fonctionnalité, il pourrait être plus avantageux de développer cette fonctionnalité directement dans votre code.

Mettre à jour ou retirer :

Les bibliothèques obsolètes ou peu maintenues peuvent être de sérieux freins à l’optimisation (Pour ceux qui ont jamais mis bumpé de 2 ou 3 versions R.N. vous allez voir comment ça complique vite les choses 🥲). Il est donc conseillé de les mettre à jour ou de les supprimer. Avant de retirer une bibliothèque, on s’assure qu’elle n’est pas utilisée ailleurs dans le code.

Tester après modification :

Après chaque suppression ou remplacement, il est crucial de tester l’application pour s’assurer que la fonctionnalité reste intacte et que les performances sont améliorées (et là on est vraiment content d’avoir des batteries de tests ! ✅.

Enfin, il est important de garder à l’esprit que l’optimisation est un processus continu. On doit régulièrement revoir les dépendances et s’assurer que chaque bibliothèque ajoutée est vraiment nécessaire et efficace.

Cette étape de suppression des bibliothèques inutiles est un élément fondamental dans l’optimisation des applications React Native, contribuant significativement à une meilleure performance et à une expérience utilisateur plus fluide.

2 — Utilisation du moteur Hermes en React Native

L’intégration du moteur JavaScript Hermes dans une application React Native est une stratégie d’optimisation clé. Hermes est conçu pour améliorer les performances des applications React Native, en particulier sur les plateformes Android.

Qu’est-ce que Hermes ? Hermes est un moteur JavaScript léger et optimisé pour React Native. Il vise à réduire la taille de l’application, améliorer le temps de démarrage et réduire l’utilisation de la mémoire.

Comment activer Hermes ? Pour utiliser Hermes dans une application React Native, vous devez l’activer dans le fichier android/app/build.gradle en modifiant la ligne enableHermes: false en enableHermes: true. Cela nécessite également de s'assurer que votre environnement de développement est configuré avec les bonnes dépendances pour Hermes.

Avantages de Hermes :

Réduction du temps de démarrage : Hermes précompile le code JavaScript en bytecode, ce qui accélère considérablement le démarrage de l’application.
Diminution de la taille de l’application : Le bytecode généré par Hermes est plus compact que le JavaScript traditionnel, ce qui réduit la taille globale de l’application.
Optimisation de la mémoire : Hermes est conçu pour utiliser moins de mémoire, ce qui est particulièrement bénéfique pour les appareils avec des ressources limitées.

💡 petit tip: Hermes est intégré de base depuis la version 69 de React Native. Donc ce bout d’article s’adresse à des gens qui ont une version antérieure ou qui ont délibérément désactivé son utilisation car il y a toujours une multitude de contexte qui peuvent demander ces modifications.

3 — Suivi de la consommation de mémoire en React Native

Une utilisation efficace de la mémoire peut grandement améliorer les performances et la stabilité de l’application (normal vous me direz).

💡 petit tip: une notion importante qui est liée à cela est le “profiling” on en parle dans un autre article soon !

Pour surveiller l’utilisation de la mémoire, vous pouvez utiliser des outils comme le Chrome DevTools, le React Native Debugger ou des extensions spécifiques à Android Studio et Xcode. Ces outils permettent de visualiser la consommation de mémoire en temps réel et d’identifier les fuites potentielles, flipper fait un travail monstre dans le domaine aussi.

Les fuites de mémoire se produisent lorsque l’application continue d’occuper de la mémoire qui n’est plus nécessaire. Elles peuvent être causées par des écouteurs d’événements non supprimés, des références circulaires, ou des timers non effacés. L’utilisation d’outils de profilage peut aider à détecter ces fuites. Pour les personnes qui font de la sécurité informatiques ou qui ont l’habitude de travailler sur du language bas niveau, on sait très bien que ces fuites peuvent représenter de vrais risques de sécurité.

Optimisation de la gestion de la mémoire :

Nettoyage des ressources : Assurez-vous de libérer toutes les ressources, comme les écouteurs d’événements ou les timers, lorsqu’ils ne sont plus nécessaires.
Utilisation des Hooks : Les Hooks tels que useEffect pour gérer les effets de bord et les abonnements peuvent aider à prévenir les fuites de mémoire en React Native.
Images et médias : Les images et autres médias peuvent consommer une quantité significative de mémoire. Utilisez des formats de fichiers optimisés, compressez les images et gérez correctement le chargement et le déchargement des médias.

Bonnes pratiques de programmation :

Décomposition en petits composants : Cela aide à isoler les problèmes de mémoire et à rendre le code plus gérable, plus lisible et vous me remercierez quand vous devrez debuguer quelque chose. Car coder de manière “atomique” comme on dit, permets un debug plus rapide et facile.
Éviter les allocations inutiles : Réduisez la création d’objets et de fonctions inutiles dans vos composants pour minimiser l’utilisation de la mémoire.

4 — Utilisation de Reselect avec Redux pour la mise en cache

L’intégration de la bibliothèque Reselect dans des applications React Native utilisant Redux peut jouer un rôle crucial dans l’optimisation des performances grâce à la mise en cache des sélecteurs. Reselect permet de créer des sélecteurs mémoïsés, qui peuvent améliorer l’efficacité et la performance des calculs dérivés des états.

Qu’est-ce que Reselect ? Reselect est une bibliothèque pour Redux qui permet de créer des sélecteurs qui calculent et retournent un état dérivé de manière efficace. Les sélecteurs créés avec Reselect ne recalculent la sortie que lorsque l’une des entrées a changé, ce qui réduit le nombre de recalculs inutiles.

Avantages de Reselect :

Performance : En évitant les recalculs inutiles, Reselect réduit le temps de traitement et les consommations de ressources.
Réutilisabilité : Les sélecteurs peuvent être réutilisés dans différentes parties de l’application.
Maintenabilité : Le code est plus propre, mieux organisé et plus facile à tester.

⚠️ disclaimer: Honnêtement, je parle de Redux ici parce que je m’adresse à tout le monde. Redux était une lib “must-have” car ça résolvait beaucoup de soucis et de complexité en apportant une solution complète. Aujourd’hui, Redux est une lib qui est bien plus lourde que d’autres qui font un travail plus optimisé, facile et rapide à implémenter, donc je ne suis plus fan de son utilisation honnêtement, mais ça reste un bon outil !

Exemple d’utilisation de Reselect, on utilise createSelector pour définir des sélecteurs :

import { createSelector } from 'reselect';

const shopItemsSelector = state => state.shop.items;
const taxPercentSelector = state => state.shop.taxPercent;

const subtotalSelector = createSelector(
  shopItemsSelector,
  items => items.reduce((acc, item) => acc + item.value, 0)
);

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
);

5 — La navigation en React Native:

Ici, on aborde un réel sujet : la navigation en React Native fonctionne de différentes manières suivant la lib que vous allez utiliser. Les créateurs ont bien entendu créé leurs outils en gardant en tête l’optimisation de l’app.

Cependant, une mauvaise utilisation peut avoir des conséquences vraiment désastreuses sur les performances de votre application.

Des bugs parfois très mystiques peuvent apparaître, avec en plus des messages d’erreurs qui nous perdent parfois plus qu’autre chose (oui, j’ai perdu un temps monstre sur ma toute première migration de librairie de navigation, je l’avoue 😓)

Choix du bon outil de navigation : React Native propose plusieurs bibliothèques de navigation, comme React Navigation et React Native Navigation. Chaque bibliothèque a ses propres avantages et convient à différents cas d’usage, plus récemment il y a aussi expo-router.

React Navigation : C’est la bibliothèque de navigation la plus populaire dans l’écosystème React Native. Elle est entièrement écrite en JavaScript et facile à intégrer et à personnaliser. Elle offre une grande variété d’options de navigation telles que les stacks, les tiroirs et les onglets.
React Native Navigation : Cette bibliothèque, développée par Wix, utilise les composants de navigation natifs des plateformes iOS et Android. Elle est idéale pour ceux qui recherchent une expérience de navigation qui se rapproche le plus possible du natif.

Soyez attentif à la gestion de l’état et du contexte lors de la navigation entre les écrans pour éviter les problèmes de performances et de mémoire.

Certaines bibliothèques offrent des fonctionnalités pour optimiser les performances, comme le chargement paresseux des écrans dans React Navigation.

En conclusion

l’optimisation d’une application React Native implique plusieurs aspects clés, chacun contribuant à améliorer les performances et l’expérience utilisateur. Il y a beaucoup de sujet comme on à pu le voir dans les derniers articles. Si on résume on peux parler de :

Quel est le mécanisme de React Native ?
Utiliser FlatList ou SectionList pour afficher de grandes listes dans React Native
Supprimer toutes les déclarations de console
Mettre en cache les calculs coûteux
Ajuster (redimensionner et réduire) les tailles d’images
Mettre en cache les images localement
Programmer des animations avec InteractionManager et LayoutAnimation
Utiliser le pilote natif avec l’API Animated
Navigation dans React Native
Supprimer les bibliothèques inutiles
Utiliser le moteur Hermes
Utiliser Reselect avec Redux (pour le cache)

Chacune de ces stratégies joue un rôle distinct mais complémentaire dans l’optimisation d’une application React Native. En les mettant en œuvre, les développeurs peuvent non seulement accroître les performances de leur application, mais aussi offrir une expérience utilisateur plus réactive et agréable. Cela invite à un débat sur les meilleures pratiques et les nouvelles approches en matière d’optimisation des applications mobiles. Et vous quels sujets traitez vous pour optimiser vos app ?

N’hésites pas à caresser le bouton “like” et “follow” pour voir les nouveaux articles et ça fait toujours plaisir !

Stay tuned ! 📻

Moi, c’est Kévin Bidet, développeur freelance React et React Native, créateur de contenus et apporteur d’affaires à mes heures perdues ! J’accompagne les entreprises pour améliorer et faire grandir leurs apps ! Tu veux plus d’infos ? Contacte-moi via mon site web → kevinbidet.me !