[Tracks] Annotate devtools.performanceIssue for Cascading Updates in DEV by huntie · Pull Request #34961 · react/react

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

huntie · 2025-10-23T15:51:03Z

Summary

Updates ReactFiberPerformanceTrack.js to report a Performance Issue (detail.devtools.performanceIssue, see https://github.com/reactwg/react/discussions/400, react/react-native#54265) when emitting a Cascading Update trace event when __DEV__ is set.

This is gated behind a new enablePerformanceIssueReporting flag, enabled for RN only.

How did you test this change?

Tested end to end with the experiment in React Native. [Meta only]: See test plan of D85448199.

react-sizebot · 2025-10-23T15:56:16Z

The size diff is too large to display in a single comment. The GitHub action for this pull request contains an artifact called 'sizebot-message.md' with the full message.

Generated by 🚫 dangerJS against 5e5f970

huntie · 2025-10-28T11:51:14Z

+ name: 'React: Cascading Update',
+ severity: 'warning',
+ description:
+ 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.',


@hoxyq Let me know what you think about this description and if we can improve it (as you wrote the docs!)

Summary: Pull Request resolved: #54265 Introduces the concept of **Performance Issues**, an experimental performance signals concept for React Native. **Design** Performance Issues are an **experimental** user space API via the User Timings `detail` object. ``` performance.measure({ start, end, detail: { devtools: { ... }, rnPerfIssue: { name: 'React: Cascading Update', severity: 'warning', // 'info' | 'warning' | 'error', description: 'A cascading update is a update that is triggered by a previous update. This can lead to performance issues and should be avoided.', learnMoreUrl: 'https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates', } } }); ``` When `rnPerfIssue` is present, we eagerly report an the event over CDP, regardless of an active performance trace, via the `"__react_native_perf_issues_reporter"` runtime binding. **This diff** - Adds a `perfIssuesEnabled` feature flag. - Initial implementation of the above API. - Initially reports a "Cascading Render" issue, aligning 1:1 with the corresponding React performance track event (note: to be added in the React codebase, see react/react#34961). This feature is gated by the `perfMonitorV2Enabled` feature flag. Changelog: [Internal] Reviewed By: hoxyq Differential Revision: D85448200 fbshipit-source-id: e5aed5138682331e1cd3a713a5f09fb6745138bc

…DEV (#34961) DiffTrain build for [d000261](d000261)

…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

meta-claBot added the CLA Signed label Oct 23, 2025

huntie mentioned this pull request Oct 24, 2025
Add Performance Issues to Perf Monitor (1/2) react/react-native#54265
Closed

huntie force-pushed the rn-perf-issues branch 2 times, most recently from 6038817 to cfba372Compare October 27, 2025 15:01

huntie changed the title ~~[Tracks] Annotate rnIssueLevel for Cascading Updates in DEV~~[Tracks] Annotate rnPerfIssue for Cascading Updates in DEVOct 28, 2025

huntie force-pushed the rn-perf-issues branch from cfba372 to 3b890ceCompare October 28, 2025 11:50

huntie commented Oct 28, 2025
View reviewed changes

huntie marked this pull request as ready for review October 28, 2025 11:56

hoxyq reviewed Oct 28, 2025
View reviewed changes

Comment threadpackages/react-reconciler/src/ReactFiberPerformanceTrack.js Outdated

huntie force-pushed the rn-perf-issues branch from 3b890ce to c5f34e7Compare October 28, 2025 14:01

huntie mentioned this pull request Nov 3, 2025
Add experimental Perf Issues sub-panel react/react-native-devtools-frontend#217
Merged
2 tasks

huntie changed the title ~~[Tracks] Annotate rnPerfIssue for Cascading Updates in DEV~~[Tracks] Annotate devtools.performanceIssue for Cascading Updates in DEVNov 3, 2025

huntie force-pushed the rn-perf-issues branch 2 times, most recently from 0b568ba to 4f58e88Compare November 4, 2025 17:00

[Tracks] Annotate rnPerfIssue for Cascading Updates in DEV
5e5f970

huntie force-pushed the rn-perf-issues branch from 4f58e88 to 5e5f970Compare November 4, 2025 17:02

hoxyq approved these changes Nov 4, 2025
View reviewed changes

huntie merged commit d000261 into react:mainNov 4, 2025
239 of 240 checks passed

huntie deleted the rn-perf-issues branch November 4, 2025 17:07

github-actionsBot pushed a commit that referenced this pull request Nov 4, 2025
[Tracks] Annotate devtools.performanceIssue for Cascading Updates in …
56f1e71
…DEV (#34961) DiffTrain build for [d000261](d000261)

nextjs-bot mentioned this pull request Nov 5, 2025
Upgrade React from f646e8ff-20251104 to dd048c3b-20251105vercel/next.js#85819
Merged

github-actionsBot pushed a commit to code/lib-react that referenced this pull request Nov 7, 2025
[Tracks] Annotate devtools.performanceIssue for Cascading Updates in …
5f53c89
…DEV (react#34961) DiffTrain build for [d000261](react@d000261)

rubennorte mentioned this pull request Jun 5, 2026
Upgrade React and renderers from 19.2.3 to 19.2.7 react/react-native#57089
Closed