diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap index 884b6cbcec85d..cfe68aa69ecbc 100644 --- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap +++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap @@ -84,6 +84,19 @@ exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2
`; +exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = ` +[root] + ▾ + ▾ +
+`; + +exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = ` +[root] + ▾ + +`; + exports[`Store component filters should support filtering by element type: 1: mount 1`] = ` [root] ▾ diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js index 1a5be03f09aad..bfbf3e98210a9 100644 --- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js +++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js @@ -227,4 +227,34 @@ describe('Store component filters', () => { ]), ); }); + + it('should not break when Suspense nodes are filtered from the tree', () => { + const promise = new Promise(() => {}); + + const Loading = () =>
Loading...
; + + const Component = ({shouldSuspend}) => { + if (shouldSuspend) { + throw promise; + } + return null; + }; + + const Wrapper = ({shouldSuspend}) => ( + }> + + + ); + + store.componentFilters = [ + utils.createElementTypeFilter(Types.ElementTypeSuspense), + ]; + + const container = document.createElement('div'); + act(() => ReactDOM.render(, container)); + expect(store).toMatchSnapshot('1: suspended'); + + act(() => ReactDOM.render(, container)); + expect(store).toMatchSnapshot('2: resolved'); + }); }); diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 2b382e24a59e8..c10d71bbfec2e 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -1572,7 +1572,7 @@ export function attach( if (nextPrimaryChildSet !== null) { mountFiberRecursively( nextPrimaryChildSet, - nextFiber, + shouldIncludeInTree ? nextFiber : parentFiber, true, traceNearestHostComponentUpdate, );