[DevTools] Fix: Trace Updates incorrectly highlights components when filtered parent re-mounts them

[everettbu]

Mirror of facebook/react#35618
Original author: youaresoyoung

---

Summary

Bug:
When "Hide DOM nodes" filter is enabled, updating a sibling component incorrectly highlights unrelated components that share a filtered parent.

Root Cause:
didFiberRender() only checks the PerformedWork flag but doesn't verify if the fiber is a mount vs update. When DevTools re-mounts components after their filtered parent changes, they have PerformedWork=true + alternate=null causing them to be incorrectly marked as "rendered".

Fix:
Add alternate check in didFiberRender(). If alternate === null, the fiber is a mount (not an update) and should not be highlighted in trace updates.

---

Before

before.mov

After

after.mov

[greptile-apps]

Greptile Summary

Fixes a bug where DevTools incorrectly highlights components in trace updates when a filtered parent re-mounts them. The fix adds an alternate === null check in didFiberRender() to properly distinguish between mounts and updates - when alternate is null, the fiber is being mounted for the first time and should not be highlighted as "rendered".

• Fixed trace updates incorrectly highlighting sibling components when "Hide DOM nodes" filter is enabled
• Added alternate null check to prevent newly mounted fibers from being treated as updates
• The fix correctly identifies that fibers with PerformedWork=true but alternate=null are mounts, not updates

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix is a simple, well-targeted change that correctly addresses the root cause. The logic is sound: checking alternate === null properly distinguishes mounts from updates in React's fiber architecture. The change is minimal and focused on the specific bug reported.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/backend/fiber/renderer.js	Adds alternate === null check to didFiberRender() to correctly distinguish mounts from updates in trace highlighting

[greptile-apps]

Additional Comments (1)

1. packages/react-devtools-shared/src/backend/fiber/renderer.js, line 2120-2127 (link)

   style: The default case doesn't check alternate === null, so host components and other types could potentially be incorrectly highlighted on mount. Consider adding the same check here if this case can also encounter mounts.

_{1 file reviewed, 1 comment}

_{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!