Profiler API

React 🟡 Mid

Definition

Composant React et onglet DevTools qui mesurent le cout de rendu d'un sous-arbre : frequence, duree et raison des re-rendus.

Analogie

Comme un chronometre pour chaque coureur dans un relais : tu identifies qui ralentit l'equipe.

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.

Termes lies

#performance#devtools