[DevTools] feat: show changed hooks names in the Profiler tab #31398
+305
−59
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…cache The InspectedElementContext was previously only available in the Components tab. This change moves the context provider to a higher level in the component hierarchy, making the InspectedElementContext available in both the Components and Profiler tabs.
- Introduced `HookChangeSummary` component to show names of changed hooks, improving clarity and making it easier to identify specific hook updates in the Profiler tab. - Added `getAlreadyLoadedHookNames` helper for efficient retrieval of hook names. Resolves facebook#21856
…ry in tooltips - Added `displayMode` prop to `HookChangeSummary` for `detailed` and `compact` views. - Updated `WhatChanged` and `HoveredFiberInfo` to use `compact` mode in tooltips, preserving the previous concise summary display. This change maintains the original hook change summary style in tooltips while allowing a detailed view where needed.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
HookChangeSummarycomponent has been introduced to show these hook names, with adisplayModeprop 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 (likeState,Callback, etc.) based on data frominspectedElement.To enable this across the DevTools,
InspectedElementContexthas 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
getAlreadyLoadedHookNameshelper 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 🎉