Skip to content

Commit eaf9296

Browse files
committed
edit perf tracks down
1 parent bda26fc commit eaf9296

File tree

1 file changed

+6
-38
lines changed

1 file changed

+6
-38
lines changed

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

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ For examples on how to use Activity, check out the [Activity docs](/reference/re
5454

5555
---
5656

57-
### React Performance Tracks {/*react-performance-tracks*/}
57+
### Performance Tracks {/*performance-tracks*/}
5858

5959
React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to Chrome DevTools performance profiles to provide more information about the performance of your React app.
6060

@@ -71,24 +71,9 @@ React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/d
7171
</picture>
7272
</div>
7373

74-
The Scheduler track shows what React is working on for different priorities:
74+
The Scheduler track shows what React is working on for different priorities such as "blocking" for user interactions, or "transition" for updates inside startTransition. Inside each track, you will see the type of work being performed such as the event that scheduled an update, and when the render for that update happened.
7575

76-
- **Blocking** - synchronous updates such as user interactions.
77-
- **Transition** - non-blocking updates such as Actions, or useDeferredValue.
78-
- **Suspense** - non-blocking updates rendering of Suspense content.
79-
- **Idle** - non-blocking updates such as children hidden by Activity.
80-
81-
Inside each track, you will see the type of work being performed such as:
82-
83-
- **Event** - the event that triggered an update.
84-
- **Update** - this is what scheduled an update.
85-
- **Render** - rendering components (visible in the [Components track](#components-track)).
86-
- **Commit** - committing the changes to the UI, and running effects during commit such as useLayoutEffect.
87-
- **Remaining Effects** - running effects after commit, such as useEffect.
88-
89-
You'll also see states of work, such as:
90-
- **Update Blocked** - when an update is waiting for a different priority of work.
91-
- **Waiting for Paint** - when React yields for paint before continuing work such as running effects.
76+
We also show information such as when an update is blocked waiting for a different priority, or when React is waiting for paint before continuing. The Scheduler track helps you understand how React splits your code into different priorities, and the order it completed the work.
9277

9378
See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs for a full list.
9479

@@ -99,24 +84,13 @@ See the [Scheduler track](/reference/dev-tools/react-performance-tracks#schedule
9984
<img className="w-full dark-image" src="/images/docs/performance-tracks/components-render.dark.png" alt="Components track: render durations" />
10085
</div>
10186

102-
The Components track shows the tree of components that React is working on either to render or run effects.
87+
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.
10388

104-
You'll see labels such as:
105-
- **Mount** - When the children mount or effects are mounted.
106-
- **Unmount** - When the children unmount or effects are unmounted.
107-
- **Reconnect** - Similar to Mount, but for `<Activity>`.
108-
- **Disconnect** - Similar to Unmount, but for `<Activity>`.
109-
- **Blocked** - When rendering is blocked due to yielding to work outside React.
110-
111-
Each entry represents the duration of the corresponding component render and all its descendant children components. For each component, the color of the bar indicates how long the component itself took:
112-
- **0-0.5ms**: light
113-
- **0.5-10ms**: darker
114-
- **10ms-100ms**: darkest
115-
- **> 100ms**: red
89+
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.
11690

11791
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for a full list.
11892

119-
## Finding performance issues {/*finding-performance-issues*/}
93+
#### Finding performance issues {/*finding-performance-issues*/}
12094

12195
Finally, the performance tracks include information to help identify performance pitfalls. For example, setting state in an Effect creates a "Cascading update", which is a common patterns for performance regressions.
12296

@@ -127,12 +101,6 @@ React flags cascading renders in the performance tracks and marks them with a re
127101
<img className="w-full dark-image" src="/images/docs/performance-tracks/scheduler-cascading-update.dark.png" alt="Scheduler track: cascading updates" />
128102
</div>
129103

130-
<Note>
131-
132-
In development builds, you can select the "Cascading Update" to view the source of the update in the "Summary" panel below.
133-
134-
</Note>
135-
136104
These performance tracks are just a start. We will continue to expand on the performance tracks to provide more information and insights about your app.
137105

138106
For more information, see the [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks).

0 commit comments

Comments
 (0)