<Profiler>

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• Reference
  • <Profiler>
  • onRender fonction de rappel
• Utilisation
  • Mesurer les performances de votre code
  • Mesurer différentes parties de votre application

Reference

<Profiler>

Enrober un arbre de composant dans un <Profiler> afin de mesurer ses performances de rendu.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Props

• id: Une chaîne de caractère identifiant le composant que vous souhaitez mesurer.
• onRender: Une fonction de rappel onRender appelée à chaque nouveau rendu d’un composant situé l’arbre profilé. Elle reçoit les informations de rendu tel que le composant et la durée prise.Ò

Limitations

• Le profilage une certaine lourdeur, il est ainsi désactivé par défaut dans les builds de production. Pour activer le profilage en production, vous devez utiliser un build spécifique avec profilage activé.

onRender fonction de rappel

React va appeler votre fonction de rappel onRender avec les informations de rendu.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Agréger ou afficher la durée de rendu...
}

Paramètres

• id: La chaîne de caractère id utilisée en prop de l’arbre <Profiler>. Elle vous permet d’identifier quelles partie de l’arbre re-rendu en cas de co-existence de profiler.
• phase: "mount", "update" ou "nested-update". Ça vous permet de savoir si l’arbre a été monté pour la première fois ou re-monté à cause d’un changement dans les props, state ou hooks.
• actualDuration: La durée en millisecondes écoulée pendant le rendu de <Profiler> et de ses enfants pour la mise à jour concernée. Elle indique à quel point vos enfants profitent de la mémorisation (plus précisément memo et useMemo). Idéalement, cette valeur devrait décroître de façon significative après le rendu initial car les enfants devront uniquement être re-rendu si leurs props changent.
• baseDuration: Le durée en milliseconde estimant le temps que prendrait un rendu complet de <Profiler> sans aucune optimisation. Elle est calculée en sommant la durée de rendu des composants enfant. Cette valeur représente la durée maximale de rendu (c’est à dire le temps initial de rendu sans mémorisation). Comparez la avec actualDuration afin de voir si la mémorisation fonctionne.
• startTime: Un horodatage numérique de React datant le début de la mise à jour.
• endTime: Un horodatage numérique de React datant la fin de la mise à jour. Cette valeur est partagée entre les profileurs, leur permettant de les grouper si souhaité.

Utilisation

Mesurer les performances de votre code

Enrober un arbre React avec <Profiler> pour mesurer ses performance des rendu.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

Deux props sont nécessaires : une chaîne de caractère id et une fonction de rappel onRenderque React appelle à chaque mise à jour de l’arbre.

Mesurer différentes parties de votre application

Vous pouvez utiliser plusieurs composants <Profiler> pour mesurer différentes parties de votre application to measure different parts of your application :

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

Vous pouvez aussi imbriquer des <Profiler> :

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

Bien que le composant <Profiler> soit léger, il ne devrait être utilisé que lorsque nécessaire. Chaque utilisation ajoute de la charge CPU et de l’utilisation mémoire à une application.