React Academy · Leçon

Utiliser l’onglet Profiler

Enregistrer les rendus, lire les graphiques en flamme et repérer les composants lents.

Utiliser l’onglet Profiler est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous utiliserez le profileur de React DevTools pour enregistrer des rendus, lire des graphiques en flammes et identifier les composants qui provoquent des goulots d’étranglement des performances.

Ouvrir le profileur

Cliquez sur l’onglet **Profileur** dans React DevTools (à côté des composants). Vous verrez un bouton Enregistrer (un cercle) et un bouton Recharger et profiler. Le profileur ne fonctionne qu’en mode développement.

Enregistrer une session

Cliquez sur **Enregistrer** (le cercle), interagissez avec votre application (par exemple, cliquez sur un bouton ou saisissez du texte dans un champ de saisie), puis cliquez sur **Arrêter** (le carré). Les DevTools capturent chaque rendu effectué pendant la session.

Lire le graphique en flammes

Le graphique en flammes affiche une barre par composant et par validation. Largeur = temps passé au rendu. Empilements hauts = arborescences de composants profondes. Survolez une barre pour voir le nom du composant et la durée exacte du rendu.

Chronologie des validations

En haut du profileur, vous voyez une rangée de petites barres — une par validation React. Les barres plus hautes représentent des validations plus lentes. Cliquez sur une barre pour accéder au graphique en flammes de cette validation.

Pourquoi un composant a-t-il effectué un rendu ?

Sélectionnez un composant dans le graphique en flammes et consultez la section **Pourquoi ce rendu a-t-il eu lieu ?** Elle indique si le composant a été rendu parce que ses propriétés ou son état ont changé, ou parce qu'un composant parent a effectué un nouveau rendu.

Barres grises ou colorées

Les barres grises indiquent que le composant n'a **pas** été rendu lors de cette validation (React a réutilisé la sortie précédente). Les barres colorées indiquent qu'il a effectué un nouveau rendu : les couleurs plus foncées correspondent à des durées de rendu plus longues.

La vue en graphique classé

Passez du graphique en flammes au graphique **Classé** (à l'aide du bouton situé en haut). Celui-ci répertorie tous les composants rendus, classés par durée de rendu, ce qui permet de repérer immédiatement le composant le plus lent.

Enregistrer et recharger

Cliquez sur **Recharger et profiler** au lieu de cliquer sur Enregistrer pour capturer le chargement de la page, y compris les rendus initiaux. Cela vous aide à trouver les composants lents lors de leur premier montage.

Activer le profilage en production

Les compilations de production désactivent le profileur par défaut. Pour profiler la production, compilez avec `react-dom/profiling` comme alias et `scheduler/tracing-profiling`. La plupart des équipes commencent par profiler en développement.

Vérification rapide

Dans le graphique en flammes du profileur React DevTools, que représente la largeur d'une barre ?

Récapitulatif

Vous pouvez maintenant enregistrer une session de profilage, lire les graphiques en flammes et les graphiques classés, vérifier pourquoi un composant a effectué un nouveau rendu et utiliser la chronologie des validations pour naviguer entre les rendus.

À suivre

Prochaine leçon : **Déboguer les erreurs React courantes** — vous diagnostiquerez les avertissements liés aux clés manquantes, les erreurs d'état non défini et les incohérences d'hydratation à l'aide de DevTools et de la console du navigateur.

Questions Fréquemment Posées

La leçon « Utiliser l’onglet Profiler » est-elle gratuite ?

Oui — le texte complet de « Utiliser l’onglet Profiler » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Utiliser l’onglet Profiler » ?

Enregistrer les rendus, lire les graphiques en flamme et repérer les composants lents. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Utiliser l’onglet Profiler » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Installer et ouvrir React DevTools
Inspecter les arborescences de composants et les props
Utiliser l’onglet Profiler
Déboguer les erreurs React courantes

← Retour à React Academy