Profiler

The Profiler is a custom React Profiler API.

"The Profiler measures how often a React application renders and what the “cost” of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization."

By default Profiler is disabled in the production build

Usage

This component is available in this way:

import { Profiler } from '@resultadosdigitais/front-hub/react'

A Profiler can be used as a component in a React tree to measure the cost of rendering that part of the tree.

It requires two props: an id (string) and an onLog callback (function) which React calls any time a component within the tree "commits" an update.

render(
  <Root>
    <Profiler id="Count" onLog={callback}>
      <Count />
    </Profiler>
  </Root>,
)

You can decide when at which update phase you want to get the log. To do that use the prop phase (string) to filter the phase "mount" | "update" You can use the collection phases available in the Profiler component:

Profiler.phases.mount
Profiler.phases.update

render(
  <Root>
    <Profiler id="Count" onLog={callback} phase="mount">
      <Count />
    </Profiler>
  </Root>,
)

By default the onLog function call has a delay of 3000 milliseconds after the last commits an update, so, this will accumulate all log in an array for each sequence of the interaction. You can custom this delay time using the prop delay (number).

render(
  <Root>
    <Profiler id="Count" onLog={callback} delay={1000}>
      <Count />
    </Profiler>
  </Root>,
)

For safe, we fire the onLog callback only when the main thread is idle!

onLog

The Profiler requires an onLog function as a prop. React calls this function any time a component within the profiled tree "commits" an update after the delay. It receives parameters describing what was rendered and how long it took.

function onLogCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
) {
  // Aggregate or log render timings...
}

What each props means?

These props are described in the React Profiler documentation .