Profiling with React Profiler

As of React 16.5, React now includes support for profiling, which is a means of capturing information with timings that assist Gatsby developers in pinpointing performance issues within a given Gatsby site. Users of React Developer Tools can access a Profiler tab to diagnose issues, and Gatsby automatically enables profiling in development, though development profiling does not match performance in production.

To enable profiling for a given production Gatsby build, execute the following command:

$ gatsby build --profile

The profiler should be included in a Gatsby build only when necessary for performance profiling, as it adds some computational and memory overhead to a Gatsby application. Though the Profiler tab will display overarching profiling results, you may wish to customize React’s profiler further to enable greater introspection into the performance of your React components.

For example, you can write a profiler component for a given “slow” component as follows:

import * as React from "react"
import { Profiler } from "react"

export const MyComponent = props => (
  // for onRender parameters
  <Profiler id={props.someUniqueId} onRender={capturePageMetrics}>
    <SlowComponent />
  </Profiler>
)

To profile Gatsby page performance, implement the wrapPageElement API in gatsby-browser.js, as demonstrated in the following example:

// gatsby-browser.js
import * as React from "react"
import { Profiler } from "react"

export const wrapPageElement = ({ element, props }) => (
  <Profiler id={props.someUniqueId} onRender={capturePageMetrics}>
    {element}
  </Profiler>
)

NOTE

For more information about the React profiler, consult the introductory blog post and the React profiler documentation.