diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js index 236a9b0f5e501..04f14a41a9348 100644 --- a/packages/react-devtools-shared/src/__tests__/store-test.js +++ b/packages/react-devtools-shared/src/__tests__/store-test.js @@ -60,6 +60,45 @@ describe('Store', () => { expect(store).toMatchSnapshot('2: add host nodes'); }); + // This test is not the same cause as what's reported on GitHub, + // but the resulting behavior (owner mounting after descendant) is the same. + // Thec ase below is admittedly contrived and relies on side effects. + // I'mnot yet sure of how to reduce the GitHub reported production case to a test though. + // See https://github.com/facebook/react/issues/21445 + it('should handle when a component mounts before its owner', () => { + const promise = new Promise(resolve => {}); + + let Dynamic = null; + const Owner = () => { + Dynamic = ; + throw promise; + }; + const Parent = () => { + return Dynamic; + }; + const Child = () => null; + + const container = document.createElement('div'); + + act(() => + ReactDOM.render( + <> + + + + + , + container, + ), + ); + expect(store).toMatchInlineSnapshot(` + [root] + + ▾ + + `); + }); + describe('collapseNodesByDefault:false', () => { beforeEach(() => { store.collapseNodesByDefault = false; diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index c05a9b6a7214b..b7b8eb605615a 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -1753,7 +1753,13 @@ export function attach( const elementType = getElementTypeForFiber(fiber); const {_debugOwner} = fiber; - const ownerID = _debugOwner != null ? getFiberIDThrows(_debugOwner) : 0; + // Ideally we should call getFiberIDThrows() for _debugOwner, + // since owners are almost always higher in the tree (and so have already been processed), + // but in some (rare) instances reported in open source, a descendant mounts before an owner. + // Since this is a DEV only field it's probably okay to also just lazily generate and ID here if needed. + // See https://github.com/facebook/react/issues/21445 + const ownerID = + _debugOwner != null ? getOrGenerateFiberID(_debugOwner) : 0; const parentID = parentFiber ? getFiberIDThrows(parentFiber) : 0; const displayNameStringID = getStringID(displayName);