Skip to content

Commit b5b7998

Browse files
committed
edit perf tracks down more
1 parent eaf9296 commit b5b7998

File tree

1 file changed

+7
-25
lines changed

1 file changed

+7
-25
lines changed

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

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

5757
### Performance Tracks {/*performance-tracks*/}
5858

59-
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.
60-
61-
#### Scheduler ⚛ {/*scheduler-*/}
59+
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:
6260

6361
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
6462
<picture >
@@ -71,39 +69,23 @@ React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/d
7169
</picture>
7270
</div>
7371

72+
The [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks) explain everything included in the tracks, but here is a high-level overview.
73+
74+
#### Scheduler ⚛ {/*scheduler-*/}
75+
7476
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.
7577

7678
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.
7779

78-
See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs for a full list.
80+
See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs to see everything included.
7981

8082
#### Components ⚛ {/*components-*/}
8183

82-
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
83-
<img className="w-full light-image" src="/images/docs/performance-tracks/components-render.png" alt="Components track: render durations" />
84-
<img className="w-full dark-image" src="/images/docs/performance-tracks/components-render.dark.png" alt="Components track: render durations" />
85-
</div>
86-
8784
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.
8885

8986
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.
9087

91-
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for a full list.
92-
93-
#### Finding performance issues {/*finding-performance-issues*/}
94-
95-
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.
96-
97-
React flags cascading renders in the performance tracks and marks them with a red Cascading Update label:
98-
99-
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
100-
<img className="w-full light-image" src="/images/docs/performance-tracks/scheduler-cascading-update.png" alt="Scheduler track: cascading updates" />
101-
<img className="w-full dark-image" src="/images/docs/performance-tracks/scheduler-cascading-update.dark.png" alt="Scheduler track: cascading updates" />
102-
</div>
103-
104-
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.
105-
106-
For more information, see the [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks).
88+
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
10789

10890
---
10991

0 commit comments

Comments
 (0)