Skip to content

Commit

Permalink
Support inner component _debugOwner in memo (#19556)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
Brian Vaughn and hanq08 authored Aug 10, 2020
1 parent 94c0244 commit 0c52e24
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
4 changes: 4 additions & 0 deletions packages/react-reconciler/src/ReactFiber.new.js
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,10 @@ export function createFiberFromTypeAndProps(
fiber.type = resolvedType;
fiber.lanes = lanes;

if (__DEV__) {
fiber._debugOwner = owner;
}

return fiber;
}

Expand Down
4 changes: 4 additions & 0 deletions packages/react-reconciler/src/ReactFiber.old.js
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,10 @@ export function createFiberFromTypeAndProps(
fiber.type = resolvedType;
fiber.lanes = lanes;

if (__DEV__) {
fiber._debugOwner = owner;
}

return fiber;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-reconciler/src/ReactFiberBeginWork.new.js
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,7 @@ function updateMemoComponent(
Component.type,
null,
nextProps,
null,
workInProgress,
workInProgress.mode,
renderLanes,
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-reconciler/src/ReactFiberBeginWork.old.js
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,7 @@ function updateMemoComponent(
Component.type,
null,
nextProps,
null,
workInProgress,
workInProgress.mode,
renderLanes,
);
Expand Down

0 comments on commit 0c52e24

Please sign in to comment.