Skip to content

Commit 64b14f1

Browse files
eps1loneps1lon
committed
Only measure rects on mount for primary content
1 parent b2e79f0 commit 64b14f1

File tree

2 files changed

+56
-26
lines changed

2 files changed

+56
-26
lines changed

‎packages/react-devtools-shared/src/__tests__/store-test.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -493,7 +493,7 @@ describe('Store', () => {
493493
▾ <Suspense>
494494
<Loading>
495495
[shell]
496-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:10,height:1}]}>
496+
<Suspense name="Wrapper>?" rects={null}>
497497
`);
498498

499499
await act(() => {
@@ -562,7 +562,7 @@ describe('Store', () => {
562562
</React.Fragment>
563563
);
564564

565-
await act(() =>
565+
await actAsync(() =>
566566
render(
567567
<Wrapper
568568
suspendParent={false}
@@ -588,7 +588,7 @@ describe('Store', () => {
588588
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
589589
<Suspense name="one" rects={null}>
590590
<Suspense name="two" rects={null}>
591-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
591+
<Suspense name="three" rects={null}>
592592
`);
593593
await act(() =>
594594
render(
@@ -616,7 +616,7 @@ describe('Store', () => {
616616
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
617617
<Suspense name="one" rects={null}>
618618
<Suspense name="two" rects={null}>
619-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
619+
<Suspense name="three" rects={null}>
620620
`);
621621
await act(() =>
622622
render(
@@ -644,7 +644,7 @@ describe('Store', () => {
644644
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
645645
<Suspense name="one" rects={null}>
646646
<Suspense name="two" rects={null}>
647-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
647+
<Suspense name="three" rects={null}>
648648
`);
649649
await act(() =>
650650
render(
@@ -672,7 +672,7 @@ describe('Store', () => {
672672
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
673673
<Suspense name="one" rects={null}>
674674
<Suspense name="two" rects={null}>
675-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
675+
<Suspense name="three" rects={null}>
676676
`);
677677
await act(() =>
678678
render(
@@ -693,7 +693,7 @@ describe('Store', () => {
693693
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
694694
<Suspense name="one" rects={null}>
695695
<Suspense name="two" rects={null}>
696-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
696+
<Suspense name="three" rects={null}>
697697
`);
698698
await act(() =>
699699
render(
@@ -721,7 +721,7 @@ describe('Store', () => {
721721
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
722722
<Suspense name="one" rects={null}>
723723
<Suspense name="two" rects={null}>
724-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
724+
<Suspense name="three" rects={null}>
725725
`);
726726
await act(() =>
727727
render(
@@ -749,7 +749,7 @@ describe('Store', () => {
749749
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
750750
<Suspense name="one" rects={null}>
751751
<Suspense name="two" rects={null}>
752-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
752+
<Suspense name="three" rects={null}>
753753
`);
754754

755755
const rendererID = getRendererID();
@@ -777,7 +777,7 @@ describe('Store', () => {
777777
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
778778
<Suspense name="one" rects={null}>
779779
<Suspense name="two" rects={null}>
780-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
780+
<Suspense name="three" rects={null}>
781781
`);
782782
await act(() =>
783783
agent.overrideSuspense({
@@ -796,7 +796,7 @@ describe('Store', () => {
796796
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
797797
<Suspense name="one" rects={null}>
798798
<Suspense name="two" rects={null}>
799-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
799+
<Suspense name="three" rects={null}>
800800
`);
801801
await act(() =>
802802
render(
@@ -817,7 +817,7 @@ describe('Store', () => {
817817
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
818818
<Suspense name="one" rects={null}>
819819
<Suspense name="two" rects={null}>
820-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
820+
<Suspense name="three" rects={null}>
821821
`);
822822
await act(() =>
823823
agent.overrideSuspense({
@@ -843,7 +843,7 @@ describe('Store', () => {
843843
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
844844
<Suspense name="one" rects={null}>
845845
<Suspense name="two" rects={null}>
846-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
846+
<Suspense name="three" rects={null}>
847847
`);
848848
await act(() =>
849849
agent.overrideSuspense({
@@ -869,7 +869,7 @@ describe('Store', () => {
869869
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}, {x:1,y:2,width:10,height:1}]}>
870870
<Suspense name="one" rects={null}>
871871
<Suspense name="two" rects={null}>
872-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
872+
<Suspense name="three" rects={null}>
873873
`);
874874
await act(() =>
875875
render(
@@ -897,7 +897,7 @@ describe('Store', () => {
897897
<Suspense name="parent" rects={[{x:1,y:2,width:10,height:1}]}>
898898
<Suspense name="one" rects={null}>
899899
<Suspense name="two" rects={null}>
900-
<Suspense name="three" rects={[{x:1,y:2,width:10,height:1}]}>
900+
<Suspense name="three" rects={null}>
901901
`);
902902
});
903903

@@ -938,7 +938,7 @@ describe('Store', () => {
938938
▾ <Suspense>
939939
<Loading>
940940
[shell]
941-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:10,height:1}]}>
941+
<Suspense name="Wrapper>?" rects={null}>
942942
`);
943943

944944
await act(() => {
@@ -1291,7 +1291,7 @@ describe('Store', () => {
12911291
[root]
12921292
▸ <Wrapper>
12931293
[shell]
1294-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:10,height:1}]}>
1294+
<Suspense name="Wrapper>?" rects={null}>
12951295
`);
12961296

12971297
// This test isn't meaningful unless we expand the suspended tree
@@ -1308,7 +1308,7 @@ describe('Store', () => {
13081308
▾ <Suspense>
13091309
<Loading>
13101310
[shell]
1311-
<Suspense name="Wrapper>?" rects={[{x:1,y:2,width:10,height:1}]}>
1311+
<Suspense name="Wrapper>?" rects={null}>
13121312
`);
13131313

13141314
await act(() => {

‎packages/react-devtools-shared/src/backend/fiber/renderer.js‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3477,10 +3477,25 @@ export function attach(
34773477
newInstance = recordMount(fiber, reconcilingParent);
34783478
if (fiber.tag === SuspenseComponent || fiber.tag === HostRoot) {
34793479
newSuspenseNode = createSuspenseNode(newInstance);
3480-
// Measure this Suspense node. In general we shouldn't do this until we have
3481-
// inserted the new children but since we know this is a FiberInstance we'll
3482-
// just use the Fiber anyway.
3483-
newSuspenseNode.rects = measureInstance(newInstance);
3480+
// Fallbacks get attributed to the parent so we only measure if we're
3481+
// showing primary content.
3482+
if (OffscreenComponent === -1) {
3483+
const isTimedOut = fiber.memoizedState !== null;
3484+
if (!isTimedOut) {
3485+
newSuspenseNode.rects = measureInstance(newInstance);
3486+
}
3487+
} else {
3488+
const contentFiber = fiber.child;
3489+
if (contentFiber === null) {
3490+
throw new Error(
3491+
'There should always be an Offscreen Fiber child in a Suspense boundary.',
3492+
);
3493+
}
3494+
const isTimedOut = fiber.memoizedState !== null;
3495+
if (!isTimedOut) {
3496+
newSuspenseNode.rects = measureInstance(newInstance);
3497+
}
3498+
}
34843499
recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);
34853500
}
34863501
insertChild(newInstance);
@@ -3511,10 +3526,25 @@ export function attach(
35113526
newInstance = createFilteredFiberInstance(fiber);
35123527
if (fiber.tag === SuspenseComponent) {
35133528
newSuspenseNode = createSuspenseNode(newInstance);
3514-
// Measure this Suspense node. In general we shouldn't do this until we have
3515-
// inserted the new children but since we know this is a FiberInstance we'll
3516-
// just use the Fiber anyway.
3517-
newSuspenseNode.rects = measureInstance(newInstance);
3529+
// Fallbacks get attributed to the parent so we only measure if we're
3530+
// showing primary content.
3531+
if (OffscreenComponent === -1) {
3532+
const isTimedOut = fiber.memoizedState !== null;
3533+
if (!isTimedOut) {
3534+
newSuspenseNode.rects = measureInstance(newInstance);
3535+
}
3536+
} else {
3537+
const contentFiber = fiber.child;
3538+
if (contentFiber === null) {
3539+
throw new Error(
3540+
'There should always be an Offscreen Fiber child in a Suspense boundary.',
3541+
);
3542+
}
3543+
const isTimedOut = fiber.memoizedState !== null;
3544+
if (!isTimedOut) {
3545+
newSuspenseNode.rects = measureInstance(newInstance);
3546+
}
3547+
}
35183548
}
35193549
insertChild(newInstance);
35203550
if (__DEBUG__) {

0 commit comments

Comments
 (0)