El Profiler es un componente que nos permite medir el tiempo que tarda en renderizarse un componente y sus hijos.

import { Profiler } from 'react'

function App() {
  return (
    <Profiler id="App" onRender={(id, phase, actualDuration) => {
      console.log({id, phase, actualDuration})
    }}>
      <Component />
    </Profiler>
  )
}

El componente Profiler recibe dos parámetros:

• id: es un identificador único para el componente
• onRender: es una función que se ejecuta cada vez que el componente se renderiza

Esta información es muy útil para detectar componentes que toman mucho tiempo en renderizarse y optimizarlos.