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>

Author: Brian Vaughn

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>

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',asyncdone=>{
+constInnerComponent=(props,ref)=><divref={ref}/>;
+constForwardRef=React.forwardRef(InnerComponent);
+constMemo=React.memo(ForwardRef);
+constGrandparent=()=>{
+constref=React.createRef();
+return<Memoref={ref}/>;
+};
+
+utils.act(()=>
+ReactDOM.render(<Grandparent/>,document.createElement('div')),
+);
+
+letdidFinish=false;
+functionSuspender({owner}){
+constread=React.useContext(OwnersListContext);
+constowners=read(owner.id);
+didFinish=true;
+expect(owners.length).toBe(3);
+expect(owners).toMatchSnapshot(
+`owners for "${(owner&&owner.displayName)||''}"`,
+);
+returnnull;
+}
+
+constwrapped=((store.getElementAtIndex(2): any): Element);
+awaitutils.actAsync(()=>
+TestRenderer.create(
+<ContextsdefaultOwnerID={wrapped.id}>
+<React.Suspensefallback={null}>
+<Suspenderowner={wrapped}/>
+</React.Suspense>
+</Contexts>,
+),
+);
+expect(didFinish).toBe(true);
+done();
+});
 });

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;
+}
+
 returnfiber;
 }
 

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;
+}
+
 returnfiber;
 }
 

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -434,7 +434,7 @@ function updateMemoComponent(
 Component.type,
 null,
 nextProps,
-null,
+workInProgress,
 workInProgress.mode,
 renderLanes,
 );

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -434,7 +434,7 @@ function updateMemoComponent(
 Component.type,
 null,
 nextProps,
-null,
+workInProgress,
 workInProgress.mode,
 renderLanes,
 );