Progression
0 %
0/32 étapes terminées
Avancé · 12 min de lecture
Profilage et performance
Mesurer, comprendre, corriger
1Définition
Le profilage consiste à mesurer où une app passe son temps (démarrage, rendus, défilement, mémoire) avec les bons outils, avant de corriger la cause réelle plutôt que les symptômes.
2Principes fondamentaux
01
Hermes
Le moteur JavaScript par défaut de React Native précompile le code en bytecode au moment du build : démarrage plus rapide et mémoire réduite.
02
Deux threads à surveiller
Le thread JavaScript (logique, rendus React) et le thread UI (affichage natif). Une saccade vient souvent d'un thread JS saturé.
03
React Native DevTools
L'outil de débogage officiel intègre le Profiler React : il montre quels composants se rendent, combien de fois et pourquoi.
04
Mesurer en mode release
Le mode développement est bien plus lent. Les mesures qui comptent se font sur un build de production, sur un appareil d'entrée de gamme.
3Exemples pratiques
Différer un calcul lourd
1import { useDeferredValue, useMemo, useState } from 'react';2 3function Recherche({ contacts }) {4 const [texte, setTexte] = useState('');5 const texteDiffere = useDeferredValue(texte);6 7 const resultats = useMemo(8 () => contacts.filter((c) => c.nom.toLowerCase().includes(texteDiffere.toLowerCase())),9 [contacts, texteDiffere],10 );11 12 return (13 <>14 <TextInput value={texte} onChangeText={setTexte} />15 <FlatList data={resultats} renderItem={renderContact} />16 </>17 );18}La saisie reste instantanée ; le filtrage de milliers de contacts suit juste derrière, sans bloquer le clavier.
4Erreurs courantes
Optimiser à l'aveugle
À éviter
// useMemo et useCallback sur chaque ligne du projetÀ faire
// profiler, identifier le composant coûteux, corriger celui-làPourquoi : La mémoïsation a un coût. Sans mesure, on complexifie le code sans gain.
Des images démesurées
À éviter
<Image source={{ uri: photo4000x3000 }} style={{ width: 80, height: 80 }} />À faire
<Image source={{ uri: miniature160 }} style={{ width: 80, height: 80 }} />Pourquoi : L'image est décodée en pleine résolution en mémoire : une liste de photos peut faire exploser la consommation.
5Subtilités à connaître
- ◆Les
console.logen production ralentissent le thread JS : retire-les ou supprime-les au build. - ◆Un temps de démarrage long vient souvent d'imports lourds exécutés au lancement ; charge-les à la demande.
- ◆Sur les listes,
removeClippedSubviewspeut réduire la mémoire sur Android, à tester au cas par cas.
6Techniques d'expert
Budget de performance
Fixe des seuils mesurables (démarrage à froid, temps d'affichage du premier écran, mémoire) et suis-les à chaque version pour repérer les régressions.
Tracer les rendus coûteux
Dans le Profiler, active l'enregistrement des raisons de rendu : tu vois quelle prop ou quel contexte a déclenché chaque rendu inutile.
Surveiller en production
Des outils de monitoring (Sentry par exemple) remontent les temps de démarrage et les écrans lents réellement vécus par les utilisateurs.
7Sur le terrain
- Les équipes mobiles testent systématiquement sur un téléphone Android d'entrée de gamme, là où les problèmes se voient.
- Les applis de réseaux sociaux découpent le chargement initial pour afficher le fil avant le reste.
- Les marketplaces servent des miniatures dimensionnées par le serveur pour chaque liste.
8Vérifie ta compréhension
Question 1/3
Score 0
Quel est l'intérêt de Hermes ?
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.