DevTools: Support an element mounting before its owner

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -60,6 +60,43 @@ describe('Store', () => {
     expect(store).toMatchSnapshot('2: add host nodes');
   });
 
+  // This is a weird and admittedly contrived edge case.
+  // It's not the same cause as what's reported on GitHub,
+  // but the resulting behavior (owner mounting after descendant) is the same.
+  // See https://github.com/facebook/react/issues/21445
+  it('should handle when a component mounts before its owner', () => {
+    const promise = Promise.resolve();
+
+    let Dynamic = null;
+    const Owner = () => {
+      Dynamic = <Child />;
+      throw promise;
+      return null;
+    };
+    const Parent = () => {
+      return Dynamic;
+    };
+    const Child = () => null;
+
+    const container = document.createElement('div');
+
+    act(() => ReactDOM.render(
+      <>
+        <React.Suspense fallback="Loading...">
+          <Owner />
+        </React.Suspense>
+        <Parent />
+      </>,
+      container,
+    ));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Suspense>
+        ▾ <Parent>
+            <Child>
+    `);
+  });
+
   describe('collapseNodesByDefault:false', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = false;

packages/react-devtools-shared/src/backend/renderer.js

@@ -1753,7 +1753,11 @@ export function attach(
       const elementType = getElementTypeForFiber(fiber);
       const {_debugOwner} = fiber;
 
-      const ownerID = _debugOwner != null ? getFiberIDThrows(_debugOwner) : 0;
+      // HACK Ideally we would call getFiberIDThrows() for _debugOwner,
+      // but in some edge cases the owner doesn't yet have an ID generated.
+      // Since this is a DEV only field it's probably okay to also just generate if needed here.
+      // 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);