Optimisations en React Native

6 min readDec 7, 2023

1 — Mécanisme de React Native

React Native est un framework de développement d’applications mobiles open source créé par Facebook. Il permet aux développeurs de construire des applications pour les plateformes iOS et Android en utilisant JavaScript et React, une bibliothèque de JavaScript pour construire des interfaces utilisateur.

Principe de Fonctionnement

JavaScript et React : React Native combine le meilleur de React — déclaratif, composant-centré, et le développement JavaScript — avec les capacités des applications mobiles natives. Le code JavaScript est exécuté dans un environnement d’exécution JavaScript séparé, tandis que l’interface utilisateur de l’application est rendue en utilisant les composants natifs de la plateforme.
Pont React Native : Un élément crucial de React Native est le “Pont” (Bridge), qui permet la communication entre le code JavaScript et les composants natifs de la plateforme. Lorsqu’une interaction dans l’application se produit, un message JSON est envoyé à travers le Pont vers le code natif pour effectuer les changements nécessaires sur l’interface utilisateur.
Composants Natifs : Contrairement à d’autres frameworks basés sur le Web, React Native utilise des composants natifs au lieu de WebViews. Cela permet à l’application de bénéficier d’une meilleure performance et d’une apparence cohérente avec les applications natives sur la plateforme.
Hot Reloading : React Native inclut une fonctionnalité de “Hot Reloading”, permettant aux développeurs de voir les modifications apportées au code en temps réel sans redémarrer l’application entière. Cela accélère considérablement le processus de développement.
NPM pour les Dépendances : Les développeurs peuvent utiliser Node Package Manager (NPM) pour gérer les dépendances de l’application. Cela facilite l’intégration de bibliothèques et outils tiers.
Interopérabilité avec le Code Natif : Une force majeure de React Native est sa capacité à s’intégrer avec le code natif existant. Cela signifie que les applications peuvent être partiellement construites en React Native et partiellement en code natif, offrant une grande flexibilité.

2 — Utilisation de FlatList ou SectionList pour afficher de grandes listes dans React Native

FlatList

FlatList est un composant React Native qui permet d'afficher de longues listes de données de manière efficace et performante. Il ne rend que les éléments actuellement visibles à l'utilisateur, réduisant ainsi l'utilisation de la mémoire et améliorant les performances.

Ce composant utilise le rendu paresseux (ou Lazy Loading, oui parce que ça fait bizzare dis en français 😌**)** pour gérer de grandes listes. Cela signifie que les éléments de la liste sont rendus uniquement lorsqu’ils entrent dans la zone visible à l’écran, réduisant ainsi le travail du processeur et de la mémoire.

<FlatList
  data={this.state.data}
  renderItem={({item}) => <Text>{item.key}</Text>}
  keyExtractor={item => item.id}
/>

SectionList

SectionList est similaire à FlatList, mais il est conçu pour rendre des listes avec des sections. Chaque section peut avoir son propre en-tête et pied de page, ce qui le rend idéal pour des listes organisées de manière plus complexe.

Les données sont organisées en un array de sections, chacune ayant son propre array de données. Cela facilite la création de listes divisées en catégories ou en groupes.

<SectionList
  sections={[
    {title: 'Section 1', data: ['item1', 'item2']},
    {title: 'Section 2', data: ['item3', 'item4']},
  ]}
  renderItem={({item}) => <Text>{item}</Text>}
  renderSectionHeader={({section}) => <Text>{section.title}</Text>}
  keyExtractor={(item, index) => index}
/>

Pour les applications React Native gérant de grandes listes de données, l’utilisation de FlatList ou SectionList est essentielle. Ces composants optimisent non seulement les performances en rendant uniquement les éléments visibles, mais offrent également une grande flexibilité pour personnaliser l'affichage des listes. Le choix entre FlatList et SectionList dépendra de la structure des données et des besoins spécifiques de l'application.

3 — Supprimer tous les appels à console dans React Native

Importance de Supprimer les Appels à `console`

Les appels à console peuvent impacter négativement la performance, surtout dans une application mobile. Chaque appel à console.log ou autres méthodes similaires entraîne un surcoût en termes de traitement et de mémoire, ce qui peut ralentir l'application, surtout si ces appels sont nombreux ou placés dans des parties du code exécutées fréquemment.

Laisser des appels à console dans le code en production peut poser des risques de sécurité, car cela peut exposer des données sensibles.

💡 Petit tip: Une approche plus automatisée consiste à utiliser un plugin Babel, comme babel-plugin-transform-remove-console, qui supprimera automatiquement tous les appels à console lors du processus de build. Cependant cela rajoute une dépendance dans ton projet, bref à toi de juger la meilleure manière de “clean” ton travail.

4 — Mise en Cache des Calculs Coûteux dans React Native

Importance du Cache

Amélioration de la Performance : Les calculs coûteux, surtout s’ils sont répétés fréquemment, peuvent ralentir considérablement une application. Mettre en cache les résultats de ces calculs permet de réduire le temps de traitement en évitant de recalculer des données déjà traitées.
Économie de Ressources : En réduisant la charge de calcul, la mise en cache contribue à une utilisation plus efficace de la CPU et de la mémoire, améliorant ainsi l’expérience utilisateur et prolongeant la durée de vie de la batterie sur les appareils mobiles.

Stratégies de Mise en Cache

Memoization :

La memoization est une technique de mise en cache qui enregistre les résultats de fonctions coûteuses en fonction de leurs entrées. Lorsque la fonction est appelée avec les mêmes paramètres, le résultat est récupéré du cache plutôt que d’être recalculé.

React offre React.memo pour les composants et useMemo pour les hooks, qui sont utiles pour la memoization. Il y a aussi useCallback Mais pour ces 3 là je ferai un article plus détaillé car il y en a largement besoin.

Bibliothèques de Caching :

Des bibliothèques comme lodash.memoize ou memoize-one peuvent être utilisées pour implémenter la memoization dans des fonctions spécifiques.

Exemple d’utilisation avec lodash :

import memoize from 'lodash.memoize';

const expensiveFunction = memoize(function computeExpensiveValue(a, b) {
  // calculs coûteux
});

On ne va pas se mentir, vu que React et React Native donne accès à useCallback , useMemo et React.memo leurs utilisation est très contextuelle, on en reparlera aussi dans un autre article 😉.

Stockage Local :

Utiliser le stockage local (comme AsyncStorage dans React Native) pour enregistrer des données qui ne changent pas fréquemment. Cela est particulièrement utile pour des données comme les préférences utilisateur ou des informations qui ne sont pas mises à jour à chaque session.

Cache Serveur :

Pour les données récupérées via des API, envisager la mise en cache côté serveur. Cela réduit le nombre de requêtes réseau et accélère le chargement des données.

Meilleures Pratiques :

Invalidation de Cache : Il est crucial de définir des stratégies d’invalidation de cache pour s’assurer que les données ne sont pas obsolètes.
Taille du Cache : Surveiller et limiter la taille du cache pour éviter une utilisation excessive de la mémoire.

Conclusion

Si on veux parler des optimisations en React Native il y a un floppée de sujet à aborder en détail, je n’ai fait qu’évoquer la surface de certains d’entre eux mais si tu regardes cet article cela te permets au moins de poser des axes sur lesquels tu peux aller plus en détails dans tes recherches.

Il y aura bientôt la partie 2 de cette article afin d’aborder d’autres des sujets principaux sur le thème de l’optimisation.

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 !