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>
Brian Vaughn committed
Aug 10, 2020 at 10:49 UTC
0c52e24cb65a8f1c370184f58ee2d5601a3acd7f
6 files changed
+76
-2
packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+27
@@ -78,6 +78,33 @@ Array [
78
]
79
`;
80
81
+exports[`OwnersListContext should include all owners for a component wrapped in react memo: owners for "InnerComponent" 1`] = `
82
+Array [
83
+ Object {
84
+ "displayName": "Grandparent",
85
+ "hocDisplayNames": null,
86
+ "id": 2,
87
+ "type": 5,
88
+ },
89
+ Object {
90
+ "displayName": "InnerComponent",
91
+ "hocDisplayNames": Array [
92
+ "Memo",
93
+ ],
94
+ "id": 3,
95
+ "type": 8,
96
+ },
97
+ Object {
98
+ "displayName": "InnerComponent",
99
+ "hocDisplayNames": Array [
100
+ "ForwardRef",
101
+ ],
102
+ "id": 4,
103
+ "type": 6,
104
+ },
105
+]
106
+`;
107
+
108
exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
109
[root]
110
<Grandparent>
packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+39
@@ -206,4 +206,43 @@ describe('OwnersListContext', () => {
206
207
done();
208
});
209
+
210
+ it('should include all owners for a component wrapped in react memo', async done => {
211
+ const InnerComponent = (props, ref) => <div ref={ref} />;
212
+ const ForwardRef = React.forwardRef(InnerComponent);
213
+ const Memo = React.memo(ForwardRef);
214
+ const Grandparent = () => {
215
+ const ref = React.createRef();
216
+ return <Memo ref={ref} />;
217
+ };
218
+
219
+ utils.act(() =>
220
+ ReactDOM.render(<Grandparent />, document.createElement('div')),
221
+ );
222
+
223
+ let didFinish = false;
224
+ function Suspender({owner}) {
225
+ const read = React.useContext(OwnersListContext);
226
+ const owners = read(owner.id);
227
+ didFinish = true;
228
+ expect(owners.length).toBe(3);
229
+ expect(owners).toMatchSnapshot(
230
+ `owners for "${(owner && owner.displayName) || ''}"`,
231
+ );
232
+ return null;
233
+ }
234
+
235
+ const wrapped = ((store.getElementAtIndex(2): any): Element);
236
+ await utils.actAsync(() =>
237
+ TestRenderer.create(
238
+ <Contexts defaultOwnerID={wrapped.id}>
239
+ <React.Suspense fallback={null}>
240
+ <Suspender owner={wrapped} />
241
+ </React.Suspense>
242
+ </Contexts>,
243
+ ),
244
+ );
245
+ expect(didFinish).toBe(true);
246
+ done();
247
+ });
248
});
packages/react-reconciler/src/ReactFiber.new.js
+4
@@ -579,6 +579,10 @@ export function createFiberFromTypeAndProps(
579
fiber.type = resolvedType;
580
fiber.lanes = lanes;
581
582
+ if (__DEV__) {
583
+ fiber._debugOwner = owner;
584
+ }
585
+
586
return fiber;
587
}
588
packages/react-reconciler/src/ReactFiber.old.js
+4
@@ -573,6 +573,10 @@ export function createFiberFromTypeAndProps(
573
fiber.type = resolvedType;
574
fiber.lanes = lanes;
575
576
+ if (__DEV__) {
577
+ fiber._debugOwner = owner;
578
+ }
579
+
580
return fiber;
581
}
582
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+1
-1
@@ -434,7 +434,7 @@ function updateMemoComponent(
434
Component.type,
435
null,
436
nextProps,
437
- null,
437
+ workInProgress,
438
workInProgress.mode,
439
renderLanes,
440
);
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+1
-1
@@ -434,7 +434,7 @@ function updateMemoComponent(
434
Component.type,
435
null,
436
nextProps,
437
- null,
437
+ workInProgress,
438
workInProgress.mode,
439
renderLanes,
440
);