Skip to content

Commit 28e9bd9

Browse files
authored
Document React's profiling build (#8054)
1 parent 11cb6b5 commit 28e9bd9

File tree

3 files changed

+15
-5
lines changed

3 files changed

+15
-5
lines changed

src/content/blog/2025/10/01/react-19-2.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,9 @@ See the [Scheduler track](/reference/dev-tools/react-performance-tracks#schedule
170170
171171
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.
172172
173-
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.
173+
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.
174174
175-
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
175+
See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
176176
177177
---
178178

src/content/reference/dev-tools/react-performance-tracks.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ These tracks are designed to provide developers with comprehensive insights into
2424
React Performance tracks are only available in development and profiling builds of React:
2525

2626
- **Development**: enabled by default.
27-
- **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.
27+
- **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.
2828

2929
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).
3030

@@ -35,6 +35,13 @@ Server Components and Server Requests tracks are only available in development b
3535

3636
</Pitfall>
3737

38+
### Using profiling builds {/*using-profiling-builds*/}
39+
40+
In addition to production and development builds, React also includes a special profiling build.
41+
To use profiling builds, you have to use `react-dom/profiling` instead of `react-dom/client`.
42+
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.
43+
Your framework might have built-in support for enabling React's profiling build.
44+
3845
---
3946

4047
## Tracks {/*tracks*/}

src/content/reference/react/Profiler.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Wrap a component tree in a `<Profiler>` to measure its rendering performance.
3737

3838
#### Caveats {/*caveats*/}
3939

40-
* 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)
40+
* 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)
4141

4242
---
4343

@@ -81,14 +81,17 @@ It requires two props: an `id` (string) and an `onRender` callback (function) wh
8181

8282
<Pitfall>
8383

84-
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)
84+
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)
8585

8686
</Pitfall>
8787

8888
<Note>
8989

9090
`<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.
9191

92+
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.
93+
In development builds, all components are marked in the Components track regardless of whether they're wrapped in `<Profiler>`.
94+
9295
</Note>
9396

9497
---

0 commit comments

Comments
 (0)