Document React's profiling build (#8054)

This commit is contained in:
Sebastian "Sebbie" Silbermann
2025-10-06 19:47:38 +02:00
committed by GitHub
parent 11cb6b5915
commit 28e9bd9fa2
3 changed files with 15 additions and 5 deletions

View File

@@ -170,9 +170,9 @@ See the [Scheduler track](/reference/dev-tools/react-performance-tracks#schedule
The Components track shows the tree of components that React is working on either to render or run effects. Inside you'll see labels such as "Mount" for when children mount or effects are mounted, or "Blocked" for when rendering is blocked due to yielding to work outside React.
The Component track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems.
The Components track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems.
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
---

View File

@@ -24,7 +24,7 @@ These tracks are designed to provide developers with comprehensive insights into
React Performance tracks are only available in development and profiling builds of React:
- **Development**: enabled by default.
- **Profiling**: you can either wrap a subtree that you want to instrument with [`<Profiler>`](/reference/react/Profiler) component or have [React Developer Tools extension](/learn/react-developer-tools) enabled. Tracks specific to React Server Components are not enabled in profiling builds.
- **Profiling**: Only Scheduler tracks are enabled by default. The Components track only lists Components that are in subtrees wrapped with [`<Profiler>`](/reference/react/Profiler). If you have [React Developer Tools extension](/learn/react-developer-tools) enabled, all Components are included in the Components track even if they're not wrapped in `<Profiler>`. Server tracks are not available in profiling builds.
If enabled, tracks should appear automatically in the traces you record with the Performance panel of browsers that provide [extensibility APIs](https://developer.chrome.com/docs/devtools/performance/extension).
@@ -35,6 +35,13 @@ Server Components and Server Requests tracks are only available in development b
</Pitfall>
### Using profiling builds {/*using-profiling-builds*/}
In addition to production and development builds, React also includes a special profiling build.
To use profiling builds, you have to use `react-dom/profiling` instead of `react-dom/client`.
We recommend that you alias `react-dom/client` to `react-dom/profiling` at build time via bundler aliases instead of manually updating each `react-dom/client` import.
Your framework might have built-in support for enabling React's profiling build.
---
## Tracks {/*tracks*/}

View File

@@ -37,7 +37,7 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
#### Caveats {/*caveats*/}
* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)
---
@@ -81,7 +81,7 @@ It requires two props: an `id` (string) and an `onRender` callback (function) wh
<Pitfall>
Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](/reference/dev-tools/react-performance-tracks#using-profiling-builds)
</Pitfall>
@@ -89,6 +89,9 @@ Profiling adds some additional overhead, so **it is disabled in the production b
`<Profiler>` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
Components wrapped in `<Profiler>` will also be marked in the [Component tracks](/reference/dev-tools/react-performance-tracks#components) of React Performance tracks even in profiling builds.
In development builds, all components are marked in the Components track regardless of whether they're wrapped in `<Profiler>`.
</Note>
---