Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/blog/2025/10/01/react-19-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

---

Expand Down
9 changes: 8 additions & 1 deletion src/content/reference/dev-tools/react-performance-tracks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand All @@ -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*/}
Expand Down
7 changes: 5 additions & 2 deletions src/content/reference/react/Profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That gist included docs for Webpack 4 and CRA 3. Both are either outdated or deprecated so I just kept a vague ("use bundler aliases or framework").

* 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)

---

Expand Down Expand Up @@ -81,14 +81,17 @@ 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>

<Note>

`<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>

---
Expand Down