Skip to content

Commit a9e9cae

Browse files
eps1loneps1lon
committed
Only measure rects on mount for primary content
1 parent e8350c3 commit a9e9cae

File tree

2 files changed

+56
-20
lines changed

2 files changed

+56
-20
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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3480,7 +3480,25 @@ export function attach(
34803480
// Measure this Suspense node. In general we shouldn't do this until we have
34813481
// inserted the new children but since we know this is a FiberInstance we'll
34823482
// just use the Fiber anyway.
3483-
newSuspenseNode.rects = measureInstance(newInstance);
3483+
// Fallbacks get attributed to the parent so we only measure if we're
3484+
// showing primary content.
3485+
if (OffscreenComponent === -1) {
3486+
const isTimedOut = fiber.memoizedState !== null;
3487+
if (!isTimedOut) {
3488+
newSuspenseNode.rects = measureInstance(newInstance);
3489+
}
3490+
} else {
3491+
const contentFiber = fiber.child;
3492+
if (contentFiber === null) {
3493+
throw new Error(
3494+
'There should always be an Offscreen Fiber child in a Suspense boundary.',
3495+
);
3496+
}
3497+
const isTimedOut = fiber.memoizedState !== null;
3498+
if (!isTimedOut) {
3499+
newSuspenseNode.rects = measureInstance(newInstance);
3500+
}
3501+
}
34843502
recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);
34853503
}
34863504
insertChild(newInstance);
@@ -3514,7 +3532,25 @@ export function attach(
35143532
// Measure this Suspense node. In general we shouldn't do this until we have
35153533
// inserted the new children but since we know this is a FiberInstance we'll
35163534
// just use the Fiber anyway.
3517-
newSuspenseNode.rects = measureInstance(newInstance);
3535+
// Fallbacks get attributed to the parent so we only measure if we're
3536+
// showing primary content.
3537+
if (OffscreenComponent === -1) {
3538+
const isTimedOut = fiber.memoizedState !== null;
3539+
if (!isTimedOut) {
3540+
newSuspenseNode.rects = measureInstance(newInstance);
3541+
}
3542+
} else {
3543+
const contentFiber = fiber.child;
3544+
if (contentFiber === null) {
3545+
throw new Error(
3546+
'There should always be an Offscreen Fiber child in a Suspense boundary.',
3547+
);
3548+
}
3549+
const isTimedOut = fiber.memoizedState !== null;
3550+
if (!isTimedOut) {
3551+
newSuspenseNode.rects = measureInstance(newInstance);
3552+
}
3553+
}
35183554
}
35193555
insertChild(newInstance);
35203556
if (__DEBUG__) {

0 commit comments

Comments
 (0)