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
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
}

What each props means?

These props are described in the React Profiler documentation .

Interaction tracing with React

import { trace, wrap } from '@resultadosdigitais/front-hub/react'

We provide two functions of the schedule package (experimental) which can be useful for associate the events that make the application to render.

Note: This functions are experimental at the moment.

trace (unstable_trace)

The data dispatched in this function will be shown in the prop interactions of our onLog callback

trace(name, timestamp, callback)

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

 // Count.js
const Count = () => {
  const [count, setCount] = React.useState(0)

  const handleAdd = () => {
    trace('Click add count', performance.now(), () => {
      setCount(prev => prev + 1)
    })
  }

  return (
    <div>
      <span>Count: {count}</span>
      <Button onClick={handleAdd}>+</Button>
    </div>
  )
}

wrap (unstable_wrap)

Wrap function is used for async work and it can be associate the events with the trace dispatch.

unstable_wrap(callback)

trace('Some event', performance.now(), () => {
  setTimeout(
    wrap(() => {
      // Do some async work
    })
  );
});