Repérer les rendus coûteux

Un récapitulatif mensuel peut sembler lent alors que l’écran entier ne contient que quelques zones visibles. Le ralentissement peut venir d’un calcul relancé trop souvent, d’un composant rendu à la suite d’une interaction sans rapport, ou d’un travail effectué ailleurs dans le navigateur. Avant de modifier le code, vous allez localiser le coût et établir une mesure de référence.

Dans les leçons précédentes, vous avez réparti les responsabilités du tableau de bord et identifié les données conservées ou calculées. Ici, vous ne changez ni cette organisation ni les données : vous observez ce que React exécute lorsque vous changez le mois, ajoutez une dépense ou modifiez un filtre. Le profilage répond à une question précise : quelle partie de cette interaction mérite d’être examinée en premier ?

Préparer une mesure fiable

Ouvrez l’application dans une configuration stable : utilisez le même navigateur, la même version de développement ou de production et un jeu de données représentatif. Pour le tableau de bord, prévoyez suffisamment de dépenses réparties sur plusieurs mois et catégories pour solliciter le récapitulatif et la liste. Notez l’action mesurée, par exemple « sélectionner un autre mois », plutôt que de comparer des sessions où les données ou les interactions diffèrent.

Dans les outils de développement du navigateur, ouvrez React DevTools, puis son onglet Profiler. Lancez un enregistrement, effectuez une seule interaction représentative et arrêtez l’enregistrement. Répétez cette séquence plusieurs fois dans les mêmes conditions : une mesure isolée peut être influencée par le chargement initial, d’autres tâches du navigateur ou une interaction imprécise.

Lire le profil du tableau de bord

Un enregistrement présente les opérations de rendu associées à l’interaction. Le flamegraph représente la hiérarchie des composants concernés : chaque bloc correspond à un composant rendu et sa largeur aide à comparer le temps attribué à cette opération. Le survol d’un bloc fournit des détails, notamment sa durée et la raison pour laquelle React l’a rendu, lorsque cette information est disponible.

Repérez d’abord les blocs larges et les composants qui apparaissent lors de plusieurs interactions. Si vous changez le mois, regardez si le récapitulatif et le reste de l’interface sont rendus, puis vérifiez si cette activité correspond aux données qui changent. Si vous modifiez uniquement la recherche, observez si le calcul du récapitulatif est également effectué : le profil signale une piste, mais ne prouve pas à lui seul que ce travail est coûteux.

La durée de rendu mesure le travail de React pour produire une mise à jour de l’interface ; elle ne représente pas nécessairement toute la latence ressentie. Le navigateur doit aussi appliquer les changements, effectuer la mise en page et afficher les pixels. Si le Profiler ne montre pas de travail React important alors que l’action reste lente, examinez le panneau Performance du navigateur : le problème peut se situer hors du rendu React.

Établir une référence avant d’agir

Consignez l’action testée, le volume de données, les composants qui mobilisent le plus de temps et les durées observées sur plusieurs essais. Par exemple, pour le changement de mois, notez si le temps se concentre dans le récapitulatif, dans la liste ou dans des composants parents. Cette note est votre mesure de référence : après une modification ciblée, vous pourrez répéter exactement la même séquence et vérifier si le gain est réel.

En développement, les outils peuvent afficher des rendus supplémentaires liés à leur mode de vérification ; ne comparez donc pas directement ces chiffres à ceux d’une version de production. Le plus important pour une première enquête est de comparer des scénarios réalisés dans le même environnement. Évitez aussi d’ajouter des outils de mesure dans le code applicatif tant que le Profiler fournit les informations nécessaires.

À retenir

• Reproduisez une interaction précise avec des données représentatives et des conditions constantes.
• Utilisez React DevTools Profiler et son flamegraph pour localiser les composants rendus et comparer leur durée.
• Distinguez le temps passé par React du coût total observé dans le navigateur.
• Notez une mesure de référence et ne modifiez le code qu’après avoir identifié une piste vérifiable.

Dans la prochaine leçon, vous utiliserez ces observations pour décider si un calcul dérivé du récapitulatif justifie une mémoïsation.