Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat[react-devtools]: display forget badge for components in profiling session #29014

Merged

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented May 7, 2024

Summary

  • compiledWithForget field for nodes is now propagated from the backend to frontend profiler stores
  • Corresponding node with such field will have a prefix displayed before its displayName
Screenshot 2024-05-07 at 15 05 37
  • Badges are now displayed on the right panel when some fiber is selected in a specific commit
Screenshot 2024-05-07 at 15 05 50
  • Badges are also displayed when user hovers over some node in the tree
Screenshot 2024-05-07 at 15 25 22

@hoxyq hoxyq requested review from gsathya, poteto and mofeiZ May 7, 2024 12:23
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 7, 2024
@eps1lon
Copy link
Collaborator

eps1lon commented May 7, 2024

What do you think about displaying the icon (not the full badge) at the start of the component name here? Especially in dense flamegraphs this would help identify at a glance when auto-memoized components re-render.

Copy link
Member

@poteto poteto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@hoxyq hoxyq force-pushed the react-devtools/render-forget-badge-in-profiler branch from 7df5f49 to 93d23a2 Compare May 7, 2024 14:06
@hoxyq
Copy link
Contributor Author

hoxyq commented May 7, 2024

What do you think about displaying the icon (not the full badge) at the start of the component name here? Especially in dense flamegraphs this would help identify at a glance when auto-memoized components re-render.

Awesome idea, updated the PR accordingly

@hoxyq hoxyq force-pushed the react-devtools/render-forget-badge-in-profiler branch from 93d23a2 to b7622e9 Compare May 7, 2024 14:13
@hoxyq hoxyq force-pushed the react-devtools/render-forget-badge-in-profiler branch from b7622e9 to 492c5b7 Compare May 7, 2024 14:26
@hoxyq hoxyq merged commit e7d213d into facebook:main May 7, 2024
38 checks passed
@hoxyq hoxyq deleted the react-devtools/render-forget-badge-in-profiler branch May 7, 2024 15:39
hoxyq added a commit that referenced this pull request May 8, 2024
… for empty badge list (#29023)

Forward fix to #29014, the bug was
discovered while testing v5.2.0.
hoxyq added a commit that referenced this pull request May 8, 2024
Full list of changes (not a public changelog):
* fix[react-devtools/ci]: fix configurations for e2e testing
([hoxyq](https://github.com/hoxyq) in
[#29016](#29016))
* feat[react-devtools]: display forget badge for components in profiling
session ([hoxyq](https://github.com/hoxyq) in
[#29014](#29014))
* fix[react-devtools]: add backwards compat with legacy element type
symbol ([hoxyq](https://github.com/hoxyq) in
[#28982](#28982))
* Expose "view source" options to Fusebox integration
([motiz88](https://github.com/motiz88) in
[#28973](#28973))
* Enable inspected element context menu in Fusebox
([motiz88](https://github.com/motiz88) in
[#28972](#28972))
* Check in `frontend.d.ts` for react-devtools-fusebox, include in build
output ([motiz88](https://github.com/motiz88) in
[#28970](#28970))
* Devtools: Fix build-for-devtools
([eps1lon](https://github.com/eps1lon) in
[#28976](#28976))
* Move useMemoCache hook to react/compiler-runtime
([kassens](https://github.com/kassens) in
[#28954](#28954))
* warn -> error for Test Renderer deprecation
([acdlite](https://github.com/acdlite) in
[#28904](#28904))
* [react-dom] move all client code to `react-dom/client`
([gnoff](https://github.com/gnoff) in
[#28271](#28271))
* Rename the react.element symbol to react.transitional.element
([sebmarkbage](https://github.com/sebmarkbage) in
[#28813](#28813))
* Rename Forget badge ([jbonta](https://github.com/jbonta) in
[#28858](#28858))
* Devtools: Add support for useFormStatus
([eps1lon](https://github.com/eps1lon) in
[#28413](#28413))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants