diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 5a525593c48..ac96c91d998 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -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. --- diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md index 4f613f802f3..dc2912da21f 100644 --- a/src/content/reference/dev-tools/react-performance-tracks.md +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -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 [``](/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 [``](/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 ``. 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 +### 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*/} diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 188b2d1b2bd..e70e299636d 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -37,7 +37,7 @@ Wrap a component tree in a `` 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 -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) @@ -89,6 +89,9 @@ Profiling adds some additional overhead, so **it is disabled in the production b `` 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 `` 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 ``. + ---