[DevTools] Show component names while highlighting renders

[piotrski]

Summary

This PR improves the Trace Updates feature by letting developers see component names directly on the update overlay. Before this change, the overlay only highlighted updated regions, leaving it unclear which components were involved. With this update, you can now match visual updates to their corresponding components, making it much easier to debug rendering performance.

New Feature: Show component names while highlighting

When the new "Show component names while highlighting" setting is enabled, the update overlay display the names of affected components above the rectangles, along with the update count. This gives immediate context about what’s rendering and why. The preference is stored in local storage and synced with the backend, so it’s remembered across sessions.

Improvements to Drawing Logic

The drawing logic has been updated to make the overlay sharper and easier to read. Overlay now respect device pixel ratios, so they look great on high-DPI screens. Outlines have also been made crisper, which makes it easier to spot exactly where updates are happening.

[!NOTE] Grouping Logic and Limitations Updates are grouped by their screen position (left, top coordinates) to combine overlapping or nearby regions into a single group. Groups are sorted by the highest update count within each group, making the most frequently updated components stand out. Overlapping labels may still occur when multiple updates involve components that overlap but are not in the exact same position. This is intentional, as the logic aims to maintain a straightforward mapping between update regions and component names without introducing unnecessary complexity.

Testing

This PR also adds tests for the new groupAndSortNodes utility, which handles the logic for grouping and sorting updates. The tests ensure the behavior is reliable across different scenarios.

Before & After

https://github.com/user-attachments/assets/6ea0fe3e-9354-44fa-95f3-9a867554f74c

https://github.com/user-attachments/assets/32af4d98-92a5-47dd-a732-f05c2293e41b

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2024 11:46am

[hoxyq]

Love these improvements, thanks for opening this PR! Left some comments. I will try to get this supported for React Native, and I am also thinking about moving the checkbox to some other place, so this feature gets more visibility.

[AlexVidoso]

It's a nice feature, but something went wrong. I can't disable the display of component names, and in some cases, this feature is quite annoying. Could you please check? I'm using Thorium 128 on Linux and tried to disable/enable/reinstall the extension

[hoxyq]

I can't disable the display of component names

Component names will be displayed by default if this feature is enabled. You can disable this feature by unchecking "Highlight updates when component render." checkbox. Does that work?

[AlexVidoso]

Hi, I'm sorry if I wasn't clear: there is no checkbox for "Show component names...". Disabling "Highlight updates..." works as intended.

[hoxyq]

there is no checkbox for "Show component names..."

This is expected. It was removed in https://github.com/facebook/react/pull/32019

[AlexVidoso]

In my opinion, that's a significant oversight. Nevertheless, thank you for the information.

[vision-jinwoo]

@hoxyq I agree with @AlexVidoso. I don't think we always need a rendering name. I'd like to see it as optional. ( when simply debugging, there is no need to know the rendering name. )

[alanloi]

Agree with the comments from @vision-jinwoo and @AlexVidoso. In some situations when there is a lot going on on the screen, the component names can get in the way of seeing the boxes. It would be better to have the flexibility of disabling the names whilst still being able to see the box highlighting, like in the original PR from @piotrski. As it is right now, it makes this feature much less usable than before the change.

See screenshot of the checkbox config

[jayers-scg]

Adding to voices above: I have started turning this feature off where I used to leave it on all the time, because sometimes components are grouped in such a way or update so often that the screen becomes significantly cluttered and visually annoying while I'm trying to work. This feature is helpful but I would love if I could turn it off -- I could leave the render highlights on always while working in the past without it cluttering my workspace.

As it stands now I'm going to start turning it off until I'm explicitly testing performance, which is unfortunate considering it would sometimes help me find performance issues when I wasn't looking for them in the past.

[4anghyeon]

I too am sad that the checkbox option is gone. so I inserted the script below to turn off this feature.

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.getComponentNameForHostInstance = function() { return null; };

And I created a very simple chrome extension for this for my own use.

I hope that one day the "Show component names" checkbox to come back.

[alanloi]

I too am sad that the checkbox option is gone. so I inserted the script below to turn off this feature.

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.getComponentNameForHostInstance = function() { return null; };

And I created a very simple chrome extension for this for my own use.

I hope that one day the "Show component names" checkbox to come back.

That works perfectly, thanks for sharing this! Workarounds like this really shouldn't be needed if the feature was implemented with better user flexibility, but hey here we are..