docs: initial draft of Tracks section

Author: hoxyq

public/images/docs/performance-tracks/components-effects.dark.png

@@ -19,21 +19,15 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 <Intro>
 
-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).
+React Performance tracks are specialized custom entries that appear on the Performance panel's timeline.
 
 </Intro>
 
 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.
 
 <div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
-  <picture >
-      <source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" />
-      <img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" />
-  </picture>
-  <picture >
-      <source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" />
-      <img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" />
-  </picture>
+  <img className="w-full light-image" src="/images/docs/performance-tracks/overview.png" alt="React Performance Tracks" />
+  <img className="w-full dark-image" src="/images/docs/performance-tracks/overview.dark.png" alt="React Performance Tracks" />
 </div>
 
 <InlineToc />
@@ -42,11 +36,11 @@ These tracks are designed to provide developers with comprehensive insights into
 
 ## Usage {/*usage*/}
 
-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.
+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 automatically in the traces you record with the Performance panel of browsers that provide [extensibility APIs](https://developer.chrome.com/docs/devtools/performance/extension).
 
 <Pitfall>
 
-Profiling instrumentation that powers React Performance tracks adds some additional overhead, so it is disabled in the production build by default.
+The profiling instrumentation that powers React Performance tracks adds some additional overhead, so it is disabled in production builds by default.
 
 </Pitfall>
 
@@ -56,8 +50,36 @@ Profiling instrumentation that powers React Performance tracks adds some additio
 
 ### Scheduler {/*scheduler*/}
 
-🚧 Work in progress...
+The Scheduler is an internal React concept used for managing tasks with different priorities. This track consists of 4 subtracks, each representing work of a specific priority:
+
+- **Blocking** - The highest priority work that must be finished before the browser can paint.
+- **Transition** - Non-blocking work that happens in the background, usually via [`startTransition`](/reference/react/startTransition).
+- **Suspense** - Work related to Suspense boundaries, such as displaying fallbacks or revealing content.
+- **Idle** - The lowest priority work that is done when there are no other tasks with higher priority.
+
+🚧 `<screenshot>`
+
+🚧  WIP: a sub-section about React update and phases.
 
 ### Components {/*components*/}
 
-🚧 Work in progress...
+The Components track visualizes the durations of React components. They are displayed as a flamegraph, where each entry represents the duration of the corresponding component render and all its descendant children components.
+
+<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
+  <img className="w-full light-image" src="/images/docs/performance-tracks/components-render.png" alt="Components Track: render durations" />
+  <img className="w-full dark-image" src="/images/docs/performance-tracks/components-render.dark.png" alt="Components Track: render durations" />
+</div>
+
+Similar to render durations, effect durations are also represented as a flamegraph, but with a different color scheme that aligns with the corresponding phase on the Scheduler track.
+
+<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
+  <img className="w-full light-image" src="/images/docs/performance-tracks/components-effects.png" alt="Components Track: effects durations" />
+  <img className="w-full dark-image" src="/images/docs/performance-tracks/components-effects.dark.png" alt="Components Track: effects durations" />
+</div>
+
+Additional events may be displayed during the render and effects phases:
+
+- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Mount</span> - A corresponding subtree of component renders or effects was mounted.
+- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Unmount</span> - A corresponding subtree of component renders or effects was unmounted.
+- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Reconnect</span> - Similar to Mount, but limited to cases when [`<Activity>`](/reference/react/Activity) is used.
+- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Disconnect</span> - Similar to Unmount, but limited to cases when [`<Activity>`](/reference/react/Activity) is used.