[DevTools] feat: show changed hooks names in the Profiler tab

[piotrski]

Summary

This PR adds support for displaying the names of changed hooks directly in the Profiler tab, making it easier to identify specific updates.

A HookChangeSummary component has been introduced to show these hook names, with a displayMode prop that toggles between “compact” for tooltips and “detailed” for more in-depth views. This keeps tooltip summaries concise while allowing for a full breakdown where needed.

This functionality also respects the “Always parse hook names from source” setting from the Component inspector, as it uses the same caching mechanism already in place for the Components tab. Additionally, even without hook names parsed, the Profiler will now display hook types (like State, Callback, etc.) based on data from inspectedElement.

To enable this across the DevTools, InspectedElementContext has been moved higher in the component tree, allowing it to be shared between the Profiler and Components tabs. This update allows hook name data to be reused across tabs without duplication.

Additionally, a getAlreadyLoadedHookNames helper function was added to efficiently access cached hook names, reducing the need for repeated fetching when displaying changes.

These changes improve the ability to track specific hook updates within the Profiler tab, making it clearer to see what’s changed.

Before

Previously, the Profiler tab displayed only the IDs of changed hooks, as shown below:

After (without hook names parsed)

When hook names aren’t parsed, custom hooks and hook types are displayed based on the inspectedElement data:

After (with hook names parsed)

Once hook names are fully parsed, the Profiler tab provides a complete breakdown of specific hooks that have changed:

This should resolve #21856 🎉

[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 12, 2024 2:00pm

[hoxyq]

Hey, thanks for upstreaming this, really appreciate any contributions to React DevTools.

I am currently on leave and will be back first week of December. This change will probably require some manual testing on my side, so I think its better to iterate on this once I am fully available.

[corentin-gautier]

Can this be moved forward ?

[hoxyq]

@piotrski Are you planning to continue the work on this or are you okay with someone picking this up?

[piotrski]

@hoxyq sorry, I was sick, and then I got caught up with other things and completely missed this. I’ll try to get it done this week since I finally have some time for OSS

[hoxyq]

@hoxyq sorry, I was sick, and then I got caught up with other things and completely missed this. I’ll try to get it done this week since I finally have some time for OSS

No worries, thank you!

[piotrski]

@hoxyq I’ve addressed all the comments, let me know if anything else needs further adjustments. Looking forward to your feedback. I’d like to add a diff of the hook values, but I didn’t want this PR to grow too much, so I think it’s better to do it in a separate PR. I’m not sure about the UI for that yet. Also, hook name parsing is a bit flaky, sometimes it fails silently, but I haven’t been able to figure out why.

[hoxyq]

I’d like to add a diff of the hook values, but I didn’t want this PR to grow too much, so I think it’s better to do it in a separate PR.

Makes sense, that would be awesome.

Also, hook name parsing is a bit flaky, sometimes it fails silently, but I haven’t been able to figure out why.

Yeah, the implementation is flawed, and was based on a lot of assumptions about the source code, but that's what we have. This should not block you from landing this change, since you are just using it as an API.

[hoxyq]

Hey, just circling back here to say that this is still in my queue.

In my scenario, I end up in a weird state where I can see the button for fetching hook names on the inspected element panel, but not on the profile tab, I am only seeing hooks indexes. We should probably avoid doing this. I am not sure yet what is going wrong, though.

Will follow up here once I have more details.

[piotrski]

@hoxyq thanks for the update! Happy to jump on a quick call if that helps speed up debugging, just let me know.

[piotrski]

Thanks for merging! Yeah, I’ve noticed the hook name parsing can be a bit flaky too, especially in Next.js projects. If there's anything I can do to help with that, just let me know. I'm happy to help.