fix[react-devtools/ReactDebugHooks]: support unstable prefixes in hooks and useContextWithBailout

Author: hoxyq

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

@@ -20,6 +20,7 @@ import type {
   Dependencies,
   Fiber,
   Dispatcher as DispatcherType,
+  ContextDependencyWithSelect,
 } from 'react-reconciler/src/ReactInternalTypes';
 import type {TransitionStatus} from 'react-reconciler/src/ReactFiberConfig';
 
@@ -37,7 +38,6 @@ import {
   REACT_CONTEXT_TYPE,
 } from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
-import type {ContextDependencyWithSelect} from '../../react-reconciler/src/ReactInternalTypes';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals;
 
@@ -76,7 +76,10 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
     try {
       // Use all hooks here to add them to the hook log.
       Dispatcher.useContext(({_currentValue: null}: any));
-      Dispatcher.useState(null);
+      Dispatcher.unstable_useContextWithBailout(
+        ({_currentValue: null}: any),
+        null,
+      );
       Dispatcher.useReducer((s: mixed, a: mixed) => s, null);
       Dispatcher.useRef(null);
       if (typeof Dispatcher.useCacheRefresh === 'function') {
@@ -280,6 +283,22 @@ function useContext<T>(context: ReactContext<T>): T {
   return value;
 }
 
+function unstable_useContextWithBailout<T>(
+  context: ReactContext<T>,
+  select: (T => Array<mixed>) | null,
+): T {
+  const value = readContext(context);
+  hookLog.push({
+    displayName: context.displayName || null,
+    primitive: 'ContextWithBailout',
+    stackError: new Error(),
+    value: value,
+    debugInfo: null,
+    dispatcherHookName: 'ContextWithBailout',
+  });
+  return value;
+}
+
 function useState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -753,6 +772,7 @@ const Dispatcher: DispatcherType = {
   useCacheRefresh,
   useCallback,
   useContext,
+  unstable_useContextWithBailout,
   useEffect,
   useImperativeHandle,
   useDebugValue,
@@ -954,6 +974,11 @@ function parseHookName(functionName: void | string): string {
   } else {
     startIndex += 1;
   }
+
+  if (functionName.slice(startIndex).startsWith('unstable_')) {
+    startIndex += 'unstable_'.length;
+  }
+
   if (functionName.slice(startIndex, startIndex + 3) === 'use') {
     if (functionName.length - startIndex === 3) {
       return 'Use';