From 72ebc703ac8abacd44fdeb1e3d66eb28b75e5a5b Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Fri, 17 Jun 2022 14:43:10 -0400
Subject: [PATCH] [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
---
 .../react-debug-tools/src/ReactDebugHooks.js  |  8 +---
 .../ReactHooksInspectionIntegration-test.js   | 44 ++++++++++++++++---
 2 files changed, 40 insertions(+), 12 deletions(-)

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<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 : 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 <div>{memoizedValue}</div>;
     }
     const renderer = ReactTestRenderer.create(<Foo />);
@@ -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 <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,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 <div />;
     }
     const renderer = ReactTestRenderer.create(<Foo />);
@@ -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: [],
+      },
     ]);
   });
 });