diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index edbef05e259d1..c54e591321dee 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/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,6 +76,13 @@ function getPrimitiveStackCache(): Map> { try { // Use all hooks here to add them to the hook log. Dispatcher.useContext(({_currentValue: null}: any)); + if (typeof Dispatcher.unstable_useContextWithBailout === 'function') { + // This type check is for Flow only. + Dispatcher.unstable_useContextWithBailout( + ({_currentValue: null}: any), + null, + ); + } Dispatcher.useState(null); Dispatcher.useReducer((s: mixed, a: mixed) => s, null); Dispatcher.useRef(null); @@ -280,6 +287,22 @@ function useContext(context: ReactContext): T { return value; } +function unstable_useContextWithBailout( + context: ReactContext, + select: (T => Array) | 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( initialState: (() => S) | S, ): [S, Dispatch>] { @@ -753,6 +776,7 @@ const Dispatcher: DispatcherType = { useCacheRefresh, useCallback, useContext, + unstable_useContextWithBailout, useEffect, useImperativeHandle, useDebugValue, @@ -954,6 +978,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';