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 index 0699eb5b18dc5..7ef006fda2423 100644 --- 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,29 @@ Array [ ] `; +exports[`OwnersListContext should include all owners for a component wrapped in react memo : owners for "Anonymous" 1`] = ` +Array [ + Object { + "displayName": "Grandparent", + "hocDisplayNames": null, + "id": 2, + "type": 5, + }, + Object { + "displayName": "Anonymous", + "hocDisplayNames": null, + "id": 3, + "type": 8, + }, + Object { + "displayName": "Anonymous", + "hocDisplayNames": null, + "id": 4, + "type": 6, + }, +] +`; + exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = ` [root] diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js index b39da70632065..b8b611ff35be6 100644 --- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js @@ -206,4 +206,42 @@ describe('OwnersListContext', () => { done(); }); + + it('should include all owners for a component wrapped in react memo ', async done => { + const InnerComponent = React.forwardRef((props, ref) =>
); + const Memo = React.memo(InnerComponent); + const Grandparent = () => { + const ref = React.createRef(); + return ; + }; + + utils.act(() => + ReactDOM.render(, 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( + + + + + , + ), + ); + expect(didFinish).toBe(true); + done(); + }); }); diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 338191f23666c..874ba6baa8e3d 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -429,6 +429,9 @@ function updateMemoComponent( child.ref = workInProgress.ref; child.return = workInProgress; workInProgress.child = child; + if (__DEV__) { + child._debugOwner = workInProgress; + } return child; } if (__DEV__) { diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 4fde99d80c715..e10b4a4fe476e 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -429,6 +429,9 @@ function updateMemoComponent( child.ref = workInProgress.ref; child.return = workInProgress; workInProgress.child = child; + if (__DEV__) { + child._debugOwner = workInProgress; + } return child; } if (__DEV__) {