[Devtools] Ensure initial read of useFormStatus returns `NotPending…

…Transition` (#28728)

packages/react-art/src/ReactFiberConfigART.js

@@ -16,6 +16,8 @@ import {
   DefaultEventPriority,
   NoEventPriority,
 } from 'react-reconciler/src/ReactEventPriorities';
+import type {ReactContext} from 'shared/ReactTypes';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 export {default as rendererVersion} from 'shared/ReactVersion';
 export const rendererPackageName = 'react-art';
@@ -28,6 +30,8 @@ if (__DEV__) {
   Object.freeze(NO_CONTEXT);
 }
 
+export type TransitionStatus = mixed;
+
 /** Helper Methods */
 
 function addEventListeners(instance, type, listener) {
@@ -488,4 +492,12 @@ export function waitForCommitToBeReady() {
 }
 
 export const NotPendingTransition = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 export function resetFormInstance() {}

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

@@ -119,7 +119,12 @@ describe('ReactHooksInspectionIntegration', () => {
         isStateEditable: false,
         name: 'FormStatus',
         subHooks: [],
-        value: null,
+        value: {
+          action: null,
+          data: null,
+          method: null,
+          pending: false,
+        },
       },
       {
         debugInfo: null,

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -14,7 +14,7 @@ import type {
   IntersectionObserverOptions,
   ObserveVisibleRectsCallback,
 } from 'react-reconciler/src/ReactTestSelectors';
-import type {ReactScopeInstance} from 'shared/ReactTypes';
+import type {ReactContext, ReactScopeInstance} from 'shared/ReactTypes';
 import type {AncestorInfoDev} from './validateDOMNesting';
 import type {FormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 import type {
@@ -32,6 +32,7 @@ import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostCo
 
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 export {
   setCurrentUpdatePriority,
@@ -3564,6 +3565,14 @@ function insertStylesheetIntoRoot(
 }
 
 export const NotPendingTransition: TransitionStatus = NotPending;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 
 export type FormInstance = HTMLFormElement;
 export function resetFormInstance(form: FormInstance): void {

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -60,6 +60,8 @@ import {
   enableFabricCompleteRootInCommitPhase,
   passChildrenWhenCloningPersistedNodes,
 } from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
 
 export {default as rendererVersion} from 'shared/ReactVersion'; // TODO: Consider exporting the react-native version.
 export const rendererPackageName = 'react-native-renderer';
@@ -544,6 +546,14 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 
 export type FormInstance = Instance;
 export function resetFormInstance(form: Instance): void {}

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -32,6 +32,9 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {
   getInspectorDataForViewTag,
   getInspectorDataForViewAtPoint,
@@ -561,6 +564,14 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 
 export type FormInstance = Instance;
 export function resetFormInstance(form: Instance): void {}

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -178,14 +178,14 @@ import {
   isPrimaryRenderer,
   getResource,
   createHoistableInstance,
+  HostTransitionContext,
 } from './ReactFiberConfig';
 import type {SuspenseInstance} from './ReactFiberConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {
   pushHostContext,
   pushHostContainer,
   getRootHostContainer,
-  HostTransitionContext,
 } from './ReactFiberHostContext';
 import {
   suspenseStackCursor,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -28,6 +28,7 @@ import type {Flags} from './ReactFiberFlags';
 import type {TransitionStatus} from './ReactFiberConfig';
 
 import {
+  HostTransitionContext,
   NotPendingTransition as NoPendingHostTransition,
   setCurrentUpdatePriority,
   getCurrentUpdatePriority,
@@ -156,7 +157,6 @@ import {
   peekEntangledActionThenable,
   chainThenableValue,
 } from './ReactFiberAsyncAction';
-import {HostTransitionContext} from './ReactFiberHostContext';
 import {requestTransitionLane} from './ReactFiberRootScheduler';
 import {isCurrentTreeHidden} from './ReactFiberHiddenContext';
 import {requestCurrentTransition} from './ReactFiberTransition';
@@ -3276,8 +3276,7 @@ function useHostTransitionStatus(): TransitionStatus {
   if (!enableAsyncActions) {
     throw new Error('Not implemented.');
   }
-  const status: TransitionStatus | null = readContext(HostTransitionContext);
-  return status !== null ? status : NoPendingHostTransition;
+  return readContext(HostTransitionContext);
 }
 
 function mountId(): string {

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -9,21 +9,17 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack';
-import type {
-  Container,
-  HostContext,
-  TransitionStatus,
-} from './ReactFiberConfig';
+import type {Container, HostContext} from './ReactFiberConfig';
 import type {Hook} from './ReactFiberHooks';
-import type {ReactContext} from 'shared/ReactTypes';
 
 import {
   getChildHostContext,
   getRootHostContext,
+  HostTransitionContext,
+  NotPendingTransition,
   isPrimaryRenderer,
 } from './ReactFiberConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
-import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {enableAsyncActions} from 'shared/ReactFeatureFlags';
 
 const contextStackCursor: StackCursor<HostContext | null> = createCursor(null);
@@ -38,21 +34,6 @@ const rootInstanceStackCursor: StackCursor<Container | null> =
 const hostTransitionProviderCursor: StackCursor<Fiber | null> =
   createCursor(null);
 
-// TODO: This should initialize to NotPendingTransition, a constant
-// imported from the fiber config. However, because of a cycle in the module
-// graph, that value isn't defined during this module's initialization. I can't
-// think of a way to work around this without moving that value out of the
-// fiber config. For now, the "no provider" case is handled when reading,
-// inside useHostTransitionStatus.
-export const HostTransitionContext: ReactContext<TransitionStatus | null> = {
-  $$typeof: REACT_CONTEXT_TYPE,
-  Provider: (null: any),
-  Consumer: (null: any),
-  _currentValue: null,
-  _currentValue2: null,
-  _threadCount: 0,
-};
-
 function requiredContext<Value>(c: Value | null): Value {
   if (__DEV__) {
     if (c === null) {
@@ -150,13 +131,13 @@ function popHostContext(fiber: Fiber): void {
       pop(hostTransitionProviderCursor, fiber);
 
       // When popping the transition provider, we reset the context value back
-      // to `null`. We can do this because you're not allowd to nest forms. If
+      // to `NotPendingTransition`. We can do this because you're not allowed to nest forms. If
       // we allowed for multiple nested host transition providers, then we'd
       // need to reset this to the parent provider's status.
       if (isPrimaryRenderer) {
-        HostTransitionContext._currentValue = null;
+        HostTransitionContext._currentValue = NotPendingTransition;
       } else {
-        HostTransitionContext._currentValue2 = null;
+        HostTransitionContext._currentValue2 = NotPendingTransition;
       }
     }
   }

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -20,7 +20,7 @@ import type {SharedQueue} from './ReactFiberClassUpdateQueue';
 import type {TransitionStatus} from './ReactFiberConfig';
 import type {Hook} from './ReactFiberHooks';
 
-import {isPrimaryRenderer} from './ReactFiberConfig';
+import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
 import {
   ContextProvider,
@@ -48,10 +48,7 @@ import {
   enableAsyncActions,
   enableRenderableContext,
 } from 'shared/ReactFeatureFlags';
-import {
-  getHostTransitionProvider,
-  HostTransitionContext,
-} from './ReactFiberHostContext';
+import {getHostTransitionProvider} from './ReactFiberHostContext';
 import isArray from '../../shared/isArray';
 import {enableContextProfiling} from '../../shared/ReactFeatureFlags';
 

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -83,6 +83,7 @@ export const startSuspendingCommit = $$$config.startSuspendingCommit;
 export const suspendInstance = $$$config.suspendInstance;
 export const waitForCommitToBeReady = $$$config.waitForCommitToBeReady;
 export const NotPendingTransition = $$$config.NotPendingTransition;
+export const HostTransitionContext = $$$config.HostTransitionContext;
 export const resetFormInstance = $$$config.resetFormInstance;
 export const bindToConsole = $$$config.bindToConsole;
 

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -7,7 +7,10 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import isArray from 'shared/isArray';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {
   DefaultEventPriority,
   NoEventPriority,
@@ -352,6 +355,14 @@ export function waitForCommitToBeReady(): null {
 }
 
 export const NotPendingTransition: TransitionStatus = null;
+export const HostTransitionContext: ReactContext<TransitionStatus> = {
+  $$typeof: REACT_CONTEXT_TYPE,
+  Provider: (null: any),
+  Consumer: (null: any),
+  _currentValue: NotPendingTransition,
+  _currentValue2: NotPendingTransition,
+  _threadCount: 0,
+};
 
 export type FormInstance = Instance;
 export function resetFormInstance(form: Instance): void {}