Skip to content

Commit b59f74c

Browse files
committed
docs: scaffold docs structure for Performance tracks
1 parent e9a7cb1 commit b59f74c

File tree

1 file changed

+63
-0
lines changed

1 file changed

+63
-0
lines changed
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: React Performance tracks
3+
version: experimental
4+
---
5+
6+
<Experimental>
7+
8+
**This feature is experimental and is not available in a stable version of React yet.**
9+
10+
You can try it by upgrading React packages to the most recent experimental version:
11+
12+
- `react@experimental`
13+
- `react-dom@experimental`
14+
- `eslint-plugin-react-hooks@experimental`
15+
16+
Experimental versions of React may contain bugs. Don't use them in production.
17+
18+
</Experimental>
19+
20+
<Intro>
21+
22+
React Performance tracks are specialized custom entries that appear on the [Performance panel's timeline of Chrome DevTools](https://developer.chrome.com/docs/devtools/performance/overview).
23+
24+
</Intro>
25+
26+
These tracks are designed to provide developers with comprehensive insights into their React application's performance by visualizing React-specific events and metrics alongside other critical data sources such as Network requests, JavaScript execution, and Event Loop activity, all synchronized on a unified timeline within the Performance panel for a complete understanding of application behavior.
27+
28+
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
29+
<picture >
30+
<source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" />
31+
<img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" />
32+
</picture>
33+
<picture >
34+
<source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" />
35+
<img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" />
36+
</picture>
37+
</div>
38+
39+
<InlineToc />
40+
41+
---
42+
43+
## Usage {/*usage*/}
44+
45+
You don't need to do anything to explicitly enable React Performance tracks. They are enabled by default in development and profiling builds of React and should appear by default in the traces you record with the Performance panel.
46+
47+
<Pitfall>
48+
49+
Profiling instrumentation that powers React Performance tracks adds some additional overhead, so it is disabled in the production build by default.
50+
51+
</Pitfall>
52+
53+
---
54+
55+
## Tracks {/*tracks*/}
56+
57+
### Scheduler {/*scheduler*/}
58+
59+
🚧 Work in progress...
60+
61+
### Components {/*components*/}
62+
63+
🚧 Work in progress...

0 commit comments

Comments
 (0)