Support inner component _debugOwner in memo (#19556)

* Support inner component _debugOwner in memo * test with devtool context * remove memo test * Merged master; tweaked test and snapshot * Pass owner to createFiber fn when creating a memo component. Co-authored-by: Theodore Han <tqhan317@gmail.com>
facebook · Aug 10, 2020 · 0c52e24 · 0c52e24
1 parent 94c0244
commit 0c52e24
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 2 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -78,6 +78,33 @@ Array [
 ]
 `;
 
+exports[`OwnersListContext should include all owners for a component wrapped in react memo: owners for "InnerComponent" 1`] = `
+Array [
+  Object {
+    "displayName": "Grandparent",
+    "hocDisplayNames": null,
+    "id": 2,
+    "type": 5,
+  },
+  Object {
+    "displayName": "InnerComponent",
+    "hocDisplayNames": Array [
+      "Memo",
+    ],
+    "id": 3,
+    "type": 8,
+  },
+  Object {
+    "displayName": "InnerComponent",
+    "hocDisplayNames": Array [
+      "ForwardRef",
+    ],
+    "id": 4,
+    "type": 6,
+  },
+]
+`;
+
 exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
 [root]
     <Grandparent>

diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -206,4 +206,43 @@ describe('OwnersListContext', () => {
 
     done();
   });
+
+  it('should include all owners for a component wrapped in react memo', async done => {
+    const InnerComponent = (props, ref) => <div ref={ref} />;
+    const ForwardRef = React.forwardRef(InnerComponent);
+    const Memo = React.memo(ForwardRef);
+    const Grandparent = () => {
+      const ref = React.createRef();
+      return <Memo ref={ref} />;
+    };
+
+    utils.act(() =>
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
+    );
+
+    let didFinish = false;
+    function Suspender({owner}) {
+      const read = React.useContext(OwnersListContext);
+      const owners = read(owner.id);
+      didFinish = true;
+      expect(owners.length).toBe(3);
+      expect(owners).toMatchSnapshot(
+        `owners for "${(owner && owner.displayName) || ''}"`,
+      );
+      return null;
+    }
+
+    const wrapped = ((store.getElementAtIndex(2): any): Element);
+    await utils.actAsync(() =>
+      TestRenderer.create(
+        <Contexts defaultOwnerID={wrapped.id}>
+          <React.Suspense fallback={null}>
+            <Suspender owner={wrapped} />
+          </React.Suspense>
+        </Contexts>,
+      ),
+    );
+    expect(didFinish).toBe(true);
+    done();
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
@@ -579,6 +579,10 @@ export function createFiberFromTypeAndProps(
   fiber.type = resolvedType;
   fiber.lanes = lanes;
 
+  if (__DEV__) {
+    fiber._debugOwner = owner;
+  }
+
   return fiber;
 }
 

diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
@@ -573,6 +573,10 @@ export function createFiberFromTypeAndProps(
   fiber.type = resolvedType;
   fiber.lanes = lanes;
 
+  if (__DEV__) {
+    fiber._debugOwner = owner;
+  }
+
   return fiber;
 }
 

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -434,7 +434,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
-      null,
+      workInProgress,
       workInProgress.mode,
       renderLanes,
     );

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -434,7 +434,7 @@ function updateMemoComponent(
       Component.type,
       null,
       nextProps,
-      null,
+      workInProgress,
       workInProgress.mode,
       renderLanes,
     );