Skip to content

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

Merged
hoxyq merged 1 commit intofacebook:mainfrom
hoxyq:react-devtools/render-forget-badge-in-profiler
May 7, 2024
Merged

feat[react-devtools]: display forget badge for components in profiling session#29014
hoxyq merged 1 commit intofacebook:mainfrom
hoxyq:react-devtools/render-forget-badge-in-profiler

Conversation

@hoxyq
Copy link
Contributor

@hoxyq hoxyq commented May 7, 2024 •
edited
Loading

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, mofeiZ and poteto 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.

poteto
poteto approved these changes May 7, 2024
View reviewed changes
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
@hoxyq hoxyq deleted the react-devtools/render-forget-badge-in-profiler branch May 7, 2024 15:39
This was referenced May 8, 2024
Merged
Merged
hoxyq added a commit that referenced this pull request May 8, 2024
@hoxyq
fix[react-devtools/InspectedElementView.css]: dont draw bottom border…
0e6ea69 
… 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
@hoxyq
React DevTools 5.1.0 -> 5.2.0 (#29022)
1717ab0 
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))
@eps1lon eps1lon mentioned this pull request May 16, 2024
Merged
eps1lon added a commit to vercel/next.js that referenced this pull request May 16, 2024
@eps1lon
Update React from 4508873393 to 04b058868c (#65864)
c045f0f 
Completes #65845 which only
updated Canary not Experimental.

<details>
<summary> React upstream changes</summary>

- facebook/react#29026
- facebook/react#29025
- facebook/react#28743
- facebook/react#29022
- facebook/react#29023
- facebook/react#29015
- facebook/react#29016
- facebook/react#28988
- facebook/react#28987
- facebook/react#28986
- facebook/react#29014
- facebook/react#28982
- facebook/react#29006
- facebook/react#28973
- facebook/react#28841
- facebook/react#28964
- facebook/react#28990
- facebook/react#29003
- facebook/react#28989
- facebook/react#28893
- facebook/react#28887
- facebook/react#28807
- facebook/react#28978
- facebook/react#28963
- facebook/react#28972
- facebook/react#28970
- facebook/react#28816
- facebook/react#28977
- facebook/react#28974
- facebook/react#28976
- facebook/react#28975
- facebook/react#28969
- facebook/react#28966
- facebook/react#28056

</details>
panteliselef pushed a commit to panteliselef/next.js that referenced this pull request May 20, 2024
@eps1lon @panteliselef
Update React from 4508873393 to 04b058868c (vercel#65864)
1539871 
Completes vercel#65845 which only
updated Canary not Experimental.

<details>
<summary> React upstream changes</summary>

- facebook/react#29026
- facebook/react#29025
- facebook/react#28743
- facebook/react#29022
- facebook/react#29023
- facebook/react#29015
- facebook/react#29016
- facebook/react#28988
- facebook/react#28987
- facebook/react#28986
- facebook/react#29014
- facebook/react#28982
- facebook/react#29006
- facebook/react#28973
- facebook/react#28841
- facebook/react#28964
- facebook/react#28990
- facebook/react#29003
- facebook/react#28989
- facebook/react#28893
- facebook/react#28887
- facebook/react#28807
- facebook/react#28978
- facebook/react#28963
- facebook/react#28972
- facebook/react#28970
- facebook/react#28816
- facebook/react#28977
- facebook/react#28974
- facebook/react#28976
- facebook/react#28975
- facebook/react#28969
- facebook/react#28966
- facebook/react#28056

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@poteto poteto poteto approved these changes

@eps1lon eps1lon eps1lon approved these changes

@gsathya gsathya Awaiting requested review from gsathya

@mofeiZ mofeiZ Awaiting requested review from mofeiZ

Assignees

No one assigned

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@hoxyq @eps1lon @poteto @facebook-github-bot