[DevTools] Attach async info in filtered fallback to parent of Suspense

[everettbu]

Mirror of facebook/react#35456
Original author: eps1lon

---

Summary

When a DevTools instance is filtered, we're using an unfiltered parent that's still in the reconciling Suspense boundary to attach async info to. If we attach async info to a DEvTools instance of a Suspense boundary, we treat that async info as if it's triggering the fallback of that Suspense boundary.

However, if we're inside the fallback, async info is not triggering the fallback of the nearest Suspense boundary but its parent.

Now we're using the parent of the Suspense boundary to attach async info to if that's not actually the Suspense boundary we're reconciling against (which should only happen if we're reconciling the fallback). We should always have a parent of a DevTools instance associated with a Suspense boundary if we're reconciling the fallback. The only DevTools instance associated with a Suspense boundary without a parent is the Host root. But a host root doesn't have a fallback so we can ignore that case.

How did you test this change?

• Added test passes CI (did fail without this change)

• https://tangled.org/danabra.mov/sidetrail no longer triggers an instrumentation error
  Before:

  CleanShot.2026-01-06.at.18.03.45.mp4

[greptile-apps]

Greptile Summary

This PR fixes an issue in React DevTools where async info was incorrectly attached to Suspense boundaries when rendering filtered fallback content.

The core problem: When DevTools filters out components (e.g., components matching a name pattern), the tool needs to find an unfiltered parent to attach async information to. Previously, if it landed on a Suspense component that wasn't the actual parent Suspense boundary being reconciled, it would incorrectly attach the async info to that Suspense component. This caused the DevTools to misinterpret which Suspense boundary was being triggered.

The fix: After finding an unfiltered parent instance, the code now checks if that instance is a Suspense component that differs from the actual parent Suspense boundary being reconciled. If so, it moves up one more level to use that Suspense component's parent instead. This ensures async info is attached to the correct boundary.

Key changes:

• Added check in insertSuspendedBy function to detect when unfiltered parent is a Suspense boundary but not the reconciling boundary
• Added null check with error for edge case (though per the comment, any Suspense would have at least the host root as parent)
• Added comprehensive test case for filtered fallback scenario
• Minor comment repositioning for clarity

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix is well-targeted, addresses a specific edge case with proper null checking, includes comprehensive test coverage that validates the fix, and comes from the upstream React repository where it has already been reviewed
• No files require special attention

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/backend/fiber/renderer.js	Adds logic to attach async info to parent of Suspense boundary when reconciling filtered fallback content, preventing incorrect attribution of fallback triggers
packages/react-devtools-shared/src/tests/store-test.js	Adds test case verifying async info tracking works correctly when fallback component is filtered in DevTools

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.