How to use profiling in production mode for react-dom

index.md

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

Create React App v3.2+

Creating a profiling build can be done by specifying an additional --profile flag:

yarn build --profile

npm run build -- --profile

Create React App <= v3.1

Enabling profiling permanently

At the moment, the only way to permanently enable production profiling in CRA apps is to eject. Then you can follow the instructions below and apply these changes to config/webpack.config.prod.js in your app folder.

However, you can also enable profiling temporarily without ejecting.

Enabling profiling temporarily

If you only want to profile the application locally in production mode, you can do this by editing node_modules directly.

Follow the instructions below, and apply them to node_modules/react-scripts/config/webpack.config.prod.js. Then you can run yarn build or npm run build to get a profiling build. Note that your changes would be temporary and will not persist between re-runs of your package manager.

Changing the Webpack config

To enable profiling in production mode, modify Webpack configuration file (config/webpack.config.prod.js) as shown below.

react-dom@^17.0.2 / scheduler@^0.20.2

module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'react-dom$': 'react-dom/profiling',
    },
    // ...
  },
  // ...
};

Note that if you're using a version of react/react-dom that's less than 16.6, you should refer to this earlier revision of the documentation instead.

Note that if you're using the schedule package v0.3.0-v0.4.0 you should refer to this earlier revision of the documentation instead.

Optional: Disabling mangling for local profiling

When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. Note that this will significantly increase your bundle size so only do this during local development! To do this, find the mangle option for UglifyJSPlugin in the config, and set it to false. Don't forget to undo your changes before a real deployment.

Webpack 4

If you are using Webpack 4 to bundle your apps, add the following import aliases to your production config:

react-dom@^17.0.2 / scheduler@^0.20.2

module.exports = {
  //...
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    }
  }
};

Note that if you're using a version of react/react-dom that's less than 16.6, you should refer to this earlier revision of the documentation instead.

Note that if you're using the schedule package v0.3.0-v0.4.0 you should refer to this earlier revision of the documentation instead.

Optional: Disabling mangling for local profiling

When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. Note that this will significantly increase your bundle size so only do this during local development! To do this, find the mangle option for UglifyJSPlugin in the config, and set it to false. Don't forget to undo your changes before a real deployment.

For versions of React Native equal to or greater than 0.61, I improved @lukaszchopin's solution so you don't have to use patch-package. You can use this configuration in your babel.config.js:

const path = require('path');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        resolvePath(sourcePath) {
          if (sourcePath === '../implementations/ReactNativeRenderer-prod') {
            return path.resolve(
              __dirname,
              './node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling',
            );
          }
          return undefined;
        },
      },
    ],
  ],
};

@bvaughn, you still need the scheduler aliases, at least when using webpack bundling alone, which may be the source of some confusion here for people having trouble getting it working. I tested with the exact versions of react-dom and scheduler, and if you skip the scheduler alias you get this error:

It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling

Technically I got a minified error that linked here, since it's a production build.

@tonyhallett Your code didn't work but I made a module which does fix this for Parcel. Turned out to be a lot less code than I expected:

https://github.com/goosewobbler/parcel-resolver-react-profiling

I am getting the below error for your solution @louiszawadzki

error: index.js: Cannot find module 'babel-plugin-module-resolver'
Require stack:
- app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/plugins.js
- app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/index.js
- app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/index.js
- app/root/node_modules/metro-react-native-babel-transformer/src/index.js
- app/root/node_modules/metro-transform-worker/src/index.js
- app/root/node_modules/metro/src/DeltaBundler/Worker.js
- app/root/node_modules/jest-worker/build/workers/processChild.js

@Tymek thanks for the vite snippet! Wondering if you ever saw errors like this during your vite build:

ERROR: [vite:load-fallback] Could not load /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils (imported by ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js): ENOENT: no such file or directory, open '/Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils'

✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling

    ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:3:21:
      3 │ import ReactDOM from 'react-dom';
        ╵                      ~~~~~~~~~~~

✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils

    ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:1:27:
      1 │ import * as testUtils from 'react-dom/test-utils';
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/client

    ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:4:32:
      4 │ import * as ReactDOMClient from 'react-dom/client';

I don't know why @testing-library/react would even be trying to build during our production build 🤨
We exclude any files that reference that package from our tsconfig.json AFAIK.
For extra complexity, I am using vite in a monorepo as well 😇

    "react": "18.2.0",
    "react-dom": "18.2.0",
    "vite": "5.1.4",

Any pointers on where to look to try to debug this one? Thank you!

{
  resolve: {
    alias: [
      { find: /^react-dom$/, replacement: 'react-dom/profiling' },
      { find: 'scheduler/tracing', replacement: 'scheduler/tracing-profiling' }
    ]
  }
}

in vite.config.js did the trick for me.

I am using react-devtools-core to implement a custom backend for debugging a custom renderer similar to React Native. During the debugging process, React is using the development build version:
"react": "18.2.0", "react-devtools-core": "4.28.0", "react-reconciler": "0.29.0"
However, I have found that in react-devtools-core, the recordProfilingDurations method is not capturing accurate durations for the fiber nodes, and all durations are 0. Are there any additional steps required to record the render times (duration) accurately?