[DevTools] Filter snapshots by selected subtree

[everettbu]

Mirror of facebook/react#33973
Original author: s-h-a-d-o-w

---

Summary

I recently experienced some frustration profiling a Next.js app because roughly half of the snapshots came from things like hotreload (despite nothing being hot reloaded) and the Nextjs devtools logo animation.

While getting rid of that noise was my initial motivator and might sound like something to suggest to the Next.js team to improve, I figure that this could also be helpful for people with complex apps where interactions may trigger updates outside of the thing that they want to analyze.

I would also argue that this simply makes sense behaviorally - that when you zoom in to something, the work context becomes about that zoomed in content.

Presumably, you have that for ... of linting rule because you don't want it used for arrays? Since I'm using Set here, I figured it would be fine to disable. Please let me know if I should iterate differently.

Additional things I've been considering:

• Making it so that when something is zoomed in on and there's are snapshots where it renders but we're currently not on one of those, the closest or next valid snapshot is automatically selected.
• Adding an option to enable/disable this filter.

(Since it's pretty simple code-wise, I thought I would pitch this draft right here instead of opening an issue. I appreciate that you want tests but I would like to know whether you even want to land this before adding one. 🙂)

How did you test this change?

chrome_48bJzEIVqn.mp4

How exactly did you verify that your PR solves the issue you wanted to solve?

As shown in the video, I recorded a profile where multiple branches of the overall tree are affected and checked whether the list of snapshots is correctly narrowed when zooming in.
(I also zoomed in on branches that didn't render at all to ensure nothing breaks. In that case, it says "No commits".)

[greptile-apps]

Greptile Overview

Greptile Summary

Filters profiler snapshots to show only commits where the selected subtree rendered, reducing noise when analyzing specific components.

• Added getAllFiberIDsInSubtree to traverse and collect all fiber IDs in a subtree using iterative depth-first search
• Added doesCommitContainSubtree to check if any fiber from the subtree is present in a commit's duration map
• Extended snapshot filtering logic to combine duration filter with subtree filter
• Properly handles edge cases: null values, missing commit trees, and errors are gracefully handled by disabling filtering

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is well-structured with proper error handling, null checks, and correct dependency tracking. The algorithm is sound and follows existing patterns in the codebase. No security, performance, or correctness issues identified.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js	5/5	Added snapshot filtering by selected subtree with proper null handling and error recovery

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!