6 conseils pour optimiser les performances des applications natives React

2023/01/25

L’utilisation d’une application mobile doit être une expérience agréable, sans aucun retard frustrant. En tant que développeur React Native, il est crucial que vous optimisiez vos applications, afin qu’elles fonctionnent bien et soient faciles à utiliser. Les performances optimales des applications nécessitent que vous écriviez un code propre et efficace à l’aide des bons outils et bibliothèques.

Jetez un œil à ces conseils et techniques pour optimiser les performances de votre application React Native.

1. Réduisez les re-rendus inutiles avec useMemo Hook

React Native rend les composants à l’aide d’une technologie Virtual DOM (VDOM). Le VDOM garde une trace de toutes les modifications apportées au composant de l’application et restitue toute la hiérarchie de la vue lorsqu’il le juge nécessaire. Ce processus est coûteux, vous devez donc éviter les mises à jour inutiles de l’état et des accessoires du composant.

La bibliothèque React fournit les crochets useMemo et useCallback pour résoudre ce problème dans les composants fonctionnels. Vous pouvez utiliser le hook useMemo pour mémoriser la valeur résultante d’une fonction JavaScript que vous ne souhaitez pas recalculer à chaque rendu.

Voici un exemple d’utilisation du crochet useMemo :

import { useMemo } from 'react';

function MyComponent({ data }) { // The computeExpensiveValue function is an expensive computation that // doesn't need to be re-computed on every render. const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);

// The component can use the memoized value without re-computing // it on every render. return <div>{expensiveValue}</div>; }

L’ encapsulation de la fonction computeExpensiveValue dans le crochet useMemo mémorise le résultat de la fonction. Le crochet useMemo peut accepter un deuxième argument comme dépendance. Cela signifie que la fonction mémorisée n’exécutera le gain que lorsque cette dépendance changera.

useCallback est similaire à useMemo , mais il mémorise une fonction de rappel au lieu d’une valeur. Cela peut être utile pour empêcher les rendus inutiles de composants enfants déclenchés par une fonction de rappel transmise en tant que prop.

2. Traitement efficace des données d’état

Une mauvaise gestion de l’état peut entraîner des incohérences dans les données, entraînant un comportement inattendu qui peut être difficile à détecter et à corriger. Une bonne gestion de l’état implique d’éviter de stocker des données inutiles dans l’état, ce qui peut ralentir l’application et rendre le débogage plus difficile. Il est important de s’assurer que tous les états que vous stockez sont absolument nécessaires au rendu du composant.

Une autre façon de mettre à jour efficacement l’état consiste à utiliser des techniques d’immuabilité, comme l’opérateur de propagation ou la méthode Object.assign() .

Par example:

import React, { useState } from 'react';

function MyComponent() { const [state, setState] = useState({ count: 0, text: 'Hello' });


  function handleClick() {
    setState(prevState => {
      return Object.assign({}, prevState, { count: prevState.count + 1 });
    });
  }

return ( <div> <button onClick={handleClick}>Increment Count</button> </div> ); }

Dans cet exemple, la fonction handleClick utilise le hook setState pour mettre à jour l’état. Pourtant, au lieu de modifier directement l’objet d’état, il utilise la méthode Object.assign() pour créer un nouvel objet qui copie l’état précédent avec la propriété count modifiée. Cette approche permet au DOM virtuel de React de restituer le composant lorsqu’il reconnaît que vous avez mis à jour l’état.

Vous pouvez également utiliser une bibliothèque de gestion d’état comme Redux et l’API de contexte intégrée pour implémenter cette technique.

3. Mettre en place un système de suivi des performances

Les systèmes de surveillance des performances des applications mobiles (PMS) sont des outils qui vous permettent de mesurer et d’analyser les performances de vos applications mobiles. Ils fournissent des fonctionnalités telles que la surveillance en temps réel, les rapports d’incident, la surveillance du réseau, les mesures de performances et la relecture de la session utilisateur. L’utilisation d’un système de surveillance des performances avec votre application React Native vous permettra d’identifier les goulots d’étranglement des performances pour réparer et faire évoluer votre application.

Voici une liste de plusieurs outils PMC disponibles.

React Native Debugger : une application autonome qui vous permet de déboguer et d’inspecter l’état de votre application React Native. Il comprend également un moniteur de performances pour vous aider à identifier et à résoudre les problèmes de performances.
React Native Profiler : Cet outil de surveillance des performances intégré vous permet de surveiller les performances de votre application en mesurant le temps nécessaire pour rendre chaque composant.
Flipper : une plate-forme de développement d’applications mobiles avec un moniteur de performances qui peut vous aider à identifier et à résoudre les problèmes de performances.
Surveillance des performances de Firebase : un outil de surveillance des performances fourni par Firebase qui vous permet de suivre les performances de votre application sur différents appareils et plates-formes.

4. Supprimer les déclarations Console.log

Lorsqu’une instruction console.log s’exécute, elle envoie un message au moteur JavaScript pour consigner le message dans la console. Le moteur JS prend alors du temps pour traiter et afficher le message.

Trop d’instructions de console dans votre code ralentiront son exécution et entraîneront des retards de performances. Cela peut être particulièrement problématique lorsque votre application s’exécute sur un appareil aux ressources limitées, comme un appareil mobile bas de gamme.

Un terminal de métro natif réactif avec plusieurs journaux de console et un message d'erreur

Un bon système de navigation améliorera la structure globale de votre application React Native, facilitant ainsi la maintenance, la mise à jour des fonctionnalités et la transmission efficace des données d’état. De plus, cela facilite grandement le basculement entre plusieurs affichages dans votre application, améliorant ainsi l’expérience utilisateur.

homme dessinant un story-board de navigation sur papier avec un iPhone posé sur une table

Vous devez tenir compte de facteurs tels que le bon modèle de navigation (basé sur des onglets, sur des piles, sur des tiroirs, etc.) en fonction de votre application. Tenez compte du nombre d’écrans que vous attendez dans votre application et de la manière dont vous allez transmettre les données d’état entre eux.

La mise en cache est une méthode utile pour développer un système de navigation fiable. La mise en cache permet de sauvegarder l’état d’un écran ou d’un composant lorsque l’utilisateur le quitte, puis de le restaurer à son retour. Cela permet de minimiser la quantité de données que vous devez charger et le nombre de fois que vous devez effectuer un nouveau rendu.

React Native dispose de plusieurs bibliothèques disponibles pour la navigation, telles que React Navigation et React Native Navigation. Vous pouvez les utiliser pour implémenter certains de ces modèles de navigation courants dans votre application.

6. Réduisez la taille de l’application avec le fractionnement du code et le chargement paresseux

La taille de l’application est importante pour optimiser les performances, car elle peut affecter certains aspects de l’expérience utilisateur, tels que le temps de chargement initial, l’utilisation de la mémoire et l’espace de stockage.

Le fractionnement de code et le chargement paresseux sont des techniques qui peuvent réduire la taille de votre application React Native et améliorer les performances.

Le fractionnement du code est le processus de décomposition d’une grande base de code JavaScript en « ensembles » plus petits et plus faciles à gérer. Cela peut réduire considérablement le temps de chargement initial de l’application.

Le chargement différé est une technique qui vous permet de charger des composants lorsque l’utilisateur y accède plutôt qu’au démarrage. Cela peut aider à réduire la quantité de mémoire utilisée par votre application et à améliorer les performances globales.

Pourquoi l’optimisation des performances est importante

L’optimisation des performances est cruciale pour le succès de toute application mobile. Une application lente peut entraîner une mauvaise expérience utilisateur et, en fin de compte, un faible engagement et une faible rétention.

Ces astuces ne sont que quelques-unes des façons que vous pouvez utiliser pour garantir une expérience agréable à la base d’utilisateurs de votre application.