Profiler API

React 🟡 Mid

Définition

Composant React et onglet DevTools qui mesurent le coût de rendu d'un sous-arbre : fréquence, durée et raison des re-rendus.

Analogie

Comme un chronomètre pour chaque coureur dans un relais : tu identifies qui ralentit l'équipe.

Exemple de code

<Profiler id="Navigation" onRender={(id, phase, duration) => {
  console.log(`${id} ${phase}: ${duration.toFixed(1)}ms`);
}}>
  <Nav items={items} />
</Profiler>

Cas d'usage

Identifier les composants les plus lents pour cibler les optimisations de performance.

#performance#devtools

← → au clavier pour passer d'une fiche à l'autre