diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 3657ed2db059a..940873725cb2f 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(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 : value, }); return value; } diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js index e57f084975d63..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
{memoizedValue}
; } const renderer = ReactTestRenderer.create(); @@ -566,16 +567,24 @@ describe('ReactHooksInspectionIntegration', () => { value: 'hello', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); - 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
{state}
; + const memoizedValue = React.useMemo(() => 1, []); + React.useMemo(() => 2, []); + return
{memoizedValue}
; } const renderer = ReactTestRenderer.create(); const childFiber = renderer.root.findByType(Foo)._currentFiber(); @@ -590,9 +599,16 @@ 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: [], }, ]); @@ -1012,6 +1028,7 @@ describe('ReactHooksInspectionIntegration', () => { () => {}, ); React.useMemo(() => 'memo', []); + React.useMemo(() => 'not used', []); return
; } const renderer = ReactTestRenderer.create(); @@ -1032,6 +1049,13 @@ describe('ReactHooksInspectionIntegration', () => { value: 'memo', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); @@ -1043,6 +1067,7 @@ describe('ReactHooksInspectionIntegration', () => { () => 'snapshot', ); React.useMemo(() => 'memo', []); + React.useMemo(() => 'not used', []); return value; } @@ -1064,6 +1089,13 @@ describe('ReactHooksInspectionIntegration', () => { value: 'memo', subHooks: [], }, + { + id: 2, + isStateEditable: false, + name: 'Memo', + value: 'not used', + subHooks: [], + }, ]); }); });