<Profiler>

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

• Referencia
  • <Profiler>
  • onRender callback
• Uso
  • Medición del rendimiento de la performance programáticamente
  • Midiendo diferentes partes de la aplicación

Referencia

<Profiler>

Envuelve un árbol de componentes en un <Profiler> para medir su rendimiento de renderizado.

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

Props

• id: Un string que identifica la parte de la interfaz de usuario que se está midiendo.
• onRender: Una devolución de llamada onRender que React llama cada vez que los componentes dentro del árbol perfilado se actualizan. Recibe información sobre lo que se renderizó y cuánto tiempo llevó.

Advertencias

• El perfilado agrega cierta sobrecarga adicional, por lo que está deshabilitado en la versión de producción de manera predeterminada. Para optar por el perfilado en producción, debe habilitar una versión especial de producción con el perfilado habilitado.

onRender callback

React llamará su devolución de llamada onRender con información sobre lo que se renderizó.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Agregar o registrar tiempos de procesamiento...
}

Parámetros

• id: La propiedad id del árbol <Profiler> que acaba de ser entregado. Esto te permite identificar qué parte del árbol se entregó si estás usando varios perfiles.
• phase: "mount", "update" o "nested-update". Esto te indica si el árbol acaba de ser montado por primera vez o se ha vuelto a renderizar debido a un cambio en las props, el estado o los hooks.
• actualDuration: El número de milisegundos que se tardó en renderizar el árbol <Profiler> Esto indica qué tan bien el subárbol hace uso de la memorización (por ejemplo, memo y useMemo). Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizarse si cambian sus propiedades específicas.
• baseDuration: El número de milisegundos que estima cuánto tiempo tardaría en volver a renderizar todo el subárbol <Profiler> sin ninguna optimización. Se calcula sumando las duraciones de renderizado más recientes de cada componente en el árbol. Este valor estima el costo peor de caso del renderizado (por ejemplo, el montaje inicial o un árbol sin memorización). Compara actualDuration con este valor para ver si la memorización está funcionando.
• startTime: Una marca de tiempo numérica para cuando React comenzó a renderizar la actualización actual.
• endTime: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable.

Uso

Medición del rendimiento de la performance programáticamente

Envuelve el componente <Profiler> alrededor de un árbol de React para medir su rendimiento de performance.

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

Se requieren dos props: un id (string) y un callback onRender (function) que React llama cada vez que un componente dentro del árbol “comete” una actualización.

Midiendo diferentes partes de la aplicación

Puedes usar varios componentes <Profiler> para medir diferentes partes de tu aplicación:

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

También puedes anidar componentes <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>

Aunque <Profiler> es un componente ligero, debería ser usado solo cuando sea necesario. Cada uso añade una sobrecarga de CPU y memoria a una aplicación.