[DevTools] fix useDeferredValue to match reconciler change (#24742)
* [DevTools] fix useDeferredValue to match reconciler change * fixup * update test to catch original issue * fix lint * add safer tests for other composite hooks
Mengdi Chen committed
Jun 17, 2022 at 14:43 UTC
72ebc703ac8abacd44fdeb1e3d66eb28b75e5a5b
2 files changed
+40
-12
packages/react-debug-tools/src/ReactDebugHooks.js
+2
-6
@@ -310,15 +310,11 @@ function useTransition(): [
310
}
311
312
function useDeferredValue<T>(value: T): T {
313
- // useDeferredValue() composes multiple hooks internally.
314
- // Advance the current hook index the same number of times
315
- // so that subsequent hooks have the right memoized state.
316
- nextHook(); // State
317
- nextHook(); // Effect
313
+ const hook = nextHook();
314
hookLog.push({
315
primitive: 'DeferredValue',
316
stackError: new Error(),
321
- value,
317
+ value: hook !== null ? hook.memoizedState : value,
318
});
319
return value;
320
}
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+38
-6
@@ -546,6 +546,7 @@ describe('ReactHooksInspectionIntegration', () => {
546
function Foo(props) {
547
React.useTransition();
548
const memoizedValue = React.useMemo(() => 'hello', []);
549
+ React.useMemo(() => 'not used', []);
550
return <div>{memoizedValue}</div>;
551
}
552
const renderer = ReactTestRenderer.create(<Foo />);
@@ -566,16 +567,24 @@ describe('ReactHooksInspectionIntegration', () => {
567
value: 'hello',
568
subHooks: [],
569
},
570
+ {
571
+ id: 2,
572
+ isStateEditable: false,
573
+ name: 'Memo',
574
+ value: 'not used',
575
+ subHooks: [],
576
+ },
577
]);
578
});
579
572
- it('should support composite useDeferredValue hook', () => {
580
+ it('should support useDeferredValue hook', () => {
581
function Foo(props) {
582
React.useDeferredValue('abc', {
583
timeoutMs: 500,
584
});
577
- const [state] = React.useState(() => 'hello', []);
578
- return <div>{state}</div>;
585
+ const memoizedValue = React.useMemo(() => 1, []);
586
+ React.useMemo(() => 2, []);
587
+ return <div>{memoizedValue}</div>;
588
}
589
const renderer = ReactTestRenderer.create(<Foo />);
590
const childFiber = renderer.root.findByType(Foo)._currentFiber();
@@ -590,9 +599,16 @@ describe('ReactHooksInspectionIntegration', () => {
599
},
600
{
601
id: 1,
593
- isStateEditable: true,
594
- name: 'State',
595
- value: 'hello',
602
+ isStateEditable: false,
603
+ name: 'Memo',
604
+ value: 1,
605
+ subHooks: [],
606
+ },
607
+ {
608
+ id: 2,
609
+ isStateEditable: false,
610
+ name: 'Memo',
611
+ value: 2,
612
subHooks: [],
613
},
614
]);
@@ -1012,6 +1028,7 @@ describe('ReactHooksInspectionIntegration', () => {
1028
() => {},
1029
);
1030
React.useMemo(() => 'memo', []);
1031
+ React.useMemo(() => 'not used', []);
1032
return <div />;
1033
}
1034
const renderer = ReactTestRenderer.create(<Foo />);
@@ -1032,6 +1049,13 @@ describe('ReactHooksInspectionIntegration', () => {
1049
value: 'memo',
1050
subHooks: [],
1051
},
1052
+ {
1053
+ id: 2,
1054
+ isStateEditable: false,
1055
+ name: 'Memo',
1056
+ value: 'not used',
1057
+ subHooks: [],
1058
+ },
1059
]);
1060
});
1061
@@ -1043,6 +1067,7 @@ describe('ReactHooksInspectionIntegration', () => {
1067
() => 'snapshot',
1068
);
1069
React.useMemo(() => 'memo', []);
1070
+ React.useMemo(() => 'not used', []);
1071
return value;
1072
}
1073
@@ -1064,6 +1089,13 @@ describe('ReactHooksInspectionIntegration', () => {
1089
value: 'memo',
1090
subHooks: [],
1091
},
1092
+ {
1093
+ id: 2,
1094
+ isStateEditable: false,
1095
+ name: 'Memo',
1096
+ value: 'not used',
1097
+ subHooks: [],
1098
+ },
1099
]);
1100
});
1101
});