docs: initial docs for Performance tracks

[hoxyq]

Adds initial docs for React Performance tracks.

These docs cover only client-side tracks for now: Scheduler and Components.

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/[[...markdownPath]]	130.52 KB (🟡 +44 B)	241.06 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[rubennorte]

Suggested change

	title: React Performance tracks
	title: React performance tracks

It feels weird to capitalize performance. I'd either capitalize everything or just React. There are other examples of this in the doc.

[hoxyq]

My thinking is, Performance is capitalized here to align with "Performance panel" in the browser.

@rickhanlonii How do you feel about the naming?

[rubennorte]

We should mention that not all components rendered are shown here. Only the ones taking more than a specific amount of time.

[hoxyq]

Good point, added a note:

<Note>

Unlike renders, not all effects are shown on the Components track by default.

To maintain performance and prevent UI clutter, React will only display those effects, which had a duration of 0.05ms or longer, or triggered an update.

</Note>

I am working on a feature that will record effects that triggered an update, independent of their duration

[rubennorte]

Regarding that note, are we showing all components rendered, but not all effects, or are we also not showing all the renders?

[hoxyq]

All renders are showed, independent from their corresponding duration.

Not all effects are showed. With facebook/react#34648, we won't show the ones that took 0.05ms or less and didn't trigger any blocking updates.

[rubennorte]

State updates from commits (layout effects, ref assignments, etc.) are also scheduled with a blocking priority. We should probably mention that too.

[hoxyq]

The "The synchronous updates" are referring to the application updates, not to the state updates.

I am not sure how to update it to clarify it more

[eps1lon]

Do we have a concrete example we can link to instead? Maybe even with a backlink telling people to use the profiler to spot cascading updates?

[hoxyq]

We don't have a section that explains fully the cascading updates. Only a small paragraph on https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state, where it is briefly mentioned.

That's a great idea for a separate task, we could add a section to it that explains how cascading updates could be spotted with Performance tracks. Will follow up.