[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 🎉