From 7daa703ba75f4d2a24240447f6afa7e34117b3c1 Mon Sep 17 00:00:00 2001 From: Mengdi Chen <mengdi@fb.com> Date: Thu, 16 Jun 2022 16:05:48 -0400 Subject: [PATCH 1/5] [DevTools] fix useDeferredValue to match reconciler change --- packages/react-debug-tools/src/ReactDebugHooks.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 3657ed2db059a..cff48e9113691 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -310,15 +310,11 @@ function useTransition(): [ } function useDeferredValue<T>(value: T): T { - // useDeferredValue() composes multiple hooks internally. - // Advance the current hook index the same number of times - // so that subsequent hooks have the right memoized state. - nextHook(); // State - nextHook(); // Effect + const hook = nextHook(); hookLog.push({ primitive: 'DeferredValue', stackError: new Error(), - value, + value: hook !== null ? hook.memoizedState[0] : value, }); return value; } From 60a8c3b5b319752d36d952a640d94388c6b37b55 Mon Sep 17 00:00:00 2001 From: Mengdi Chen <mengdi@fb.com> Date: Thu, 16 Jun 2022 17:34:09 -0400 Subject: [PATCH 2/5] fixup --- packages/react-debug-tools/src/ReactDebugHooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index cff48e9113691..940873725cb2f 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -314,7 +314,7 @@ function useDeferredValue<T>(value: T): T { hookLog.push({ primitive: 'DeferredValue', stackError: new Error(), - value: hook !== null ? hook.memoizedState[0] : value, + value: hook !== null ? hook.memoizedState : value, }); return value; } From c136ff26089e26ac115c30c7ca68bae46dc08f39 Mon Sep 17 00:00:00 2001 From: Mengdi Chen <mengdi@fb.com> Date: Thu, 16 Jun 2022 18:09:18 -0400 Subject: [PATCH 3/5] update test to catch original issue --- .../ReactHooksInspectionIntegration-test.js | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index e57f084975d63..5455c55006a25 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -569,13 +569,14 @@ describe('ReactHooksInspectionIntegration', () => { ]); }); - it('should support composite useDeferredValue hook', () => { + it('should support useDeferredValue hook', () => { function Foo(props) { React.useDeferredValue('abc', { timeoutMs: 500, }); - const [state] = React.useState(() => 'hello', []); - return <div>{state}</div>; + const memoizedValue = React.useMemo(() => 1, []); + React.useMemo(() => 2, []); + return <div>{memoizedValue}</div>; } const renderer = ReactTestRenderer.create(<Foo />); const childFiber = renderer.root.findByType(Foo)._currentFiber(); @@ -590,11 +591,18 @@ describe('ReactHooksInspectionIntegration', () => { }, { id: 1, - isStateEditable: true, - name: 'State', - value: 'hello', + isStateEditable: false, + name: 'Memo', + value: 1, subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 2, + subHooks: [], + } ]); }); From eff36c1c1f33b84aadb179c43e7b70cfc914fdd5 Mon Sep 17 00:00:00 2001 From: Mengdi Chen <mengdi@fb.com> Date: Thu, 16 Jun 2022 18:23:13 -0400 Subject: [PATCH 4/5] fix lint --- .../src/__tests__/ReactHooksInspectionIntegration-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index 5455c55006a25..a860131020628 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -602,7 +602,7 @@ describe('ReactHooksInspectionIntegration', () => { name: 'Memo', value: 2, subHooks: [], - } + }, ]); }); From 34466947e5782e31afcf4133dd427f75e4506dbc Mon Sep 17 00:00:00 2001 From: Mengdi Chen <mengdi@fb.com> Date: Fri, 17 Jun 2022 14:26:34 -0400 Subject: [PATCH 5/5] add safer tests for other composite hooks --- .../ReactHooksInspectionIntegration-test.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index a860131020628..db1a015efc2ff 100644 --- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js +++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js @@ -546,6 +546,7 @@ describe('ReactHooksInspectionIntegration', () => { function Foo(props) { React.useTransition(); const memoizedValue = React.useMemo(() => 'hello', []); + React.useMemo(() => 'not used', []); return <div>{memoizedValue}</div>; } const renderer = ReactTestRenderer.create(<Foo />); @@ -566,6 +567,13 @@ describe('ReactHooksInspectionIntegration', () => { value: 'hello', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); @@ -1020,6 +1028,7 @@ describe('ReactHooksInspectionIntegration', () => { () => {}, ); React.useMemo(() => 'memo', []); + React.useMemo(() => 'not used', []); return <div />; } const renderer = ReactTestRenderer.create(<Foo />); @@ -1040,6 +1049,13 @@ describe('ReactHooksInspectionIntegration', () => { value: 'memo', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); @@ -1051,6 +1067,7 @@ describe('ReactHooksInspectionIntegration', () => { () => 'snapshot', ); React.useMemo(() => 'memo', []); + React.useMemo(() => 'not used', []); return value; } @@ -1072,6 +1089,13 @@ describe('ReactHooksInspectionIntegration', () => { value: 'memo', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); });