Profiling React app in Chrome DevTools - Profiling not supported

Question

When i try to profile the production build of my app, in the Profile tab of the Chrome DevTools, i get the following message:

Profiling not supported.
Profiling support requires either a development or production-profiling build of React v16.5+.

(my React version is 16.8) How can i fix that?

I'm using Webpack4, and adding this to my config file as suggested by the official React docs didn't help:

  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }
  }
};

Answer 1

By default, React doesn't include profiling in production builds, you'll need to add that by using the Profiler API.

The Profiler API provides a component which takes an id (string), and an onRender callback as arguments. You can wrap any part of your React tree with this component and get profiling info from it, though it won't be available in the DevTools, and thus won't have the nice flame chart. It would look something like this:

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent {...props} />
</Profiler>

The onRender callback does provide some neat info though that you could send off to an API endpoint:

function onRenderCallback(
  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...
}

This ☝️ came directly from the React docs linked above.

Keep in mind that any component you add, adds CPU and memory overhead, so you should really only use the React.Profiler when needed. Ideally you should be profiling your components and finding bottlenecks in development mode.

It's worth noting that the config you included above for 'react-dom/profiling' and 'scheduler/tracing-profiling' is required during your build process to get this React.Profiler working.

Hope this helps you out!