Devtools: Ensure component control flow is consistent with commit when using useDeferredValue

Author: Sebastian Silbermann

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -461,14 +461,15 @@ function useTransition(): [
 
 function useDeferredValue<T>(value: T, initialValue?: T): T {
   const hook = nextHook();
+  const prevValue = hook !== null ? hook.memoizedState : value;
   hookLog.push({
     displayName: null,
     primitive: 'DeferredValue',
     stackError: new Error(),
-    value: hook !== null ? hook.memoizedState : value,
+    value: prevValue,
     debugInfo: null,
   });
-  return value;
+  return prevValue;
 }
 
 function useId(): string {

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -1348,6 +1348,20 @@ describe('ReactHooksInspectionIntegration', () => {
           "subHooks": [],
           "value": false,
         },
+        {
+          "debugInfo": null,
+          "hookSource": {
+            "columnNumber": 0,
+            "fileName": "**",
+            "functionName": "Foo",
+            "lineNumber": 0,
+          },
+          "id": null,
+          "isStateEditable": false,
+          "name": "Context",
+          "subHooks": [],
+          "value": "provided",
+        },
         {
           "debugInfo": null,
           "hookSource": {