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);