Pass SuspendedState as an argument instead of global state

This is safer since some calls need this to be closed over anyway.

This will let us persist it longer like into the commit phase.

Author: sebmarkbage

packages/react-art/src/ReactFiberConfigART.js

@@ -609,11 +609,13 @@ export function preloadInstance(type, props) {
   return true;
 }
 
-export function startSuspendingCommit() {}
+export function startSuspendingCommit() {
+  return null;
+}
 
-export function suspendInstance(instance, type, props) {}
+export function suspendInstance(state, instance, type, props) {}
 
-export function suspendOnActiveViewTransition(container) {}
+export function suspendOnActiveViewTransition(state, container) {}
 
 export function waitForCommitToBeReady(timeoutOffset) {
   return null;

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

@@ -5904,18 +5904,17 @@ export function preloadResource(resource: Resource): boolean {
   return true;
 }
 
-type SuspendedState = {
+export opaque type SuspendedState = {
   stylesheets: null | Map<StylesheetResource, HoistableRoot>,
   count: number, // suspensey css and active view transitions
   imgCount: number, // suspensey images
   imgBytes: number, // number of bytes we estimate needing to download
   waitingForImages: boolean, // false when we're no longer blocking on images
   unsuspend: null | (() => void),
 };
-let suspendedState: null | SuspendedState = null;
 
-export function startSuspendingCommit(): void {
-  suspendedState = {
+export function startSuspendingCommit(): SuspendedState {
+  return {
     stylesheets: null,
     count: 0,
     imgCount: 0,
@@ -5930,19 +5929,14 @@ export function startSuspendingCommit(): void {
 }
 
 export function suspendInstance(
+  state: SuspendedState,
   instance: Instance,
   type: Type,
   props: Props,
 ): void {
   if (!enableSuspenseyImages && !enableViewTransition) {
     return;
   }
-  if (suspendedState === null) {
-    throw new Error(
-      'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
-    );
-  }
-  const state = suspendedState;
   if (
     // $FlowFixMe[prop-missing]
     typeof instance.decode === 'function' &&
@@ -5971,16 +5965,11 @@ export function suspendInstance(
 }
 
 export function suspendResource(
+  state: SuspendedState,
   hoistableRoot: HoistableRoot,
   resource: Resource,
   props: any,
 ): void {
-  if (suspendedState === null) {
-    throw new Error(
-      'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
-    );
-  }
-  const state = suspendedState;
   if (resource.type === 'stylesheet') {
     if (typeof props.media === 'string') {
       // If we don't currently match media we avoid suspending on this resource
@@ -6060,13 +6049,10 @@ export function suspendResource(
   }
 }
 
-export function suspendOnActiveViewTransition(rootContainer: Container): void {
-  if (suspendedState === null) {
-    throw new Error(
-      'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
-    );
-  }
-  const state = suspendedState;
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  rootContainer: Container,
+): void {
   const ownerDocument =
     rootContainer.nodeType === DOCUMENT_NODE
       ? rootContainer
@@ -6090,16 +6076,9 @@ const SUSPENSEY_IMAGE_TIME_ESTIMATE = 500;
 let estimatedBytesWithinLimit: number = 0;
 
 export function waitForCommitToBeReady(
+  state: SuspendedState,
   timeoutOffset: number,
 ): null | ((() => void) => () => void) {
-  if (suspendedState === null) {
-    throw new Error(
-      'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
-    );
-  }
-
-  const state = suspendedState;
-
   if (state.stylesheets && state.count === 0) {
     // We are not currently blocked but we have not inserted all stylesheets.
     // If this insertion happens and loads or errors synchronously then we can

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

@@ -602,17 +602,28 @@ export function preloadInstance(
   return true;
 }
 
-export function startSuspendingCommit(): void {}
+export opaque type SuspendedState = null;
+
+export function startSuspendingCommit(): SuspendedState {
+  return null;
+}
 
 export function suspendInstance(
+  state: SuspendedState,
   instance: Instance,
   type: Type,
   props: Props,
 ): void {}
 
-export function suspendOnActiveViewTransition(container: Container): void {}
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  container: Container,
+): void {}
 
-export function waitForCommitToBeReady(timeoutOffset: number): null {
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null {
   return null;
 }
 

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

@@ -778,17 +778,28 @@ export function preloadInstance(
   return true;
 }
 
-export function startSuspendingCommit(): void {}
+export opaque type SuspendedState = null;
+
+export function startSuspendingCommit(): SuspendedState {
+  return null;
+}
 
 export function suspendInstance(
+  state: SuspendedState,
   instance: Instance,
   type: Type,
   props: Props,
 ): void {}
 
-export function suspendOnActiveViewTransition(container: Container): void {}
+export function suspendOnActiveViewTransition(
+  state: SuspendedState,
+  container: Container,
+): void {}
 
-export function waitForCommitToBeReady(timeoutOffset: number): null {
+export function waitForCommitToBeReady(
+  state: SuspendedState,
+  timeoutOffset: number,
+): null {
   return null;
 }
 

packages/react-noop-renderer/src/createReactNoop.js

@@ -90,6 +90,8 @@ type SuspenseyCommitSubscription = {
   commit: null | (() => void),
 };
 
+export opaque type SuspendedState = SuspenseyCommitSubscription;
+
 export type TransitionStatus = mixed;
 
 export type FormInstance = Instance;
@@ -311,17 +313,17 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     'pending' | 'fulfilled',
   > | null = null;
 
-  // Represents a subscription for all the suspensey things that block a
-  // particular commit. Once they've all loaded, the commit phase can proceed.
-  let suspenseyCommitSubscription: SuspenseyCommitSubscription | null = null;
-
-  function startSuspendingCommit(): void {
-    // This is where we might suspend on things that aren't associated with a
-    // particular node, like document.fonts.ready.
-    suspenseyCommitSubscription = null;
+  function startSuspendingCommit(): SuspendedState {
+    // Represents a subscription for all the suspensey things that block a
+    // particular commit. Once they've all loaded, the commit phase can proceed.
+    return {
+      pendingCount: 0,
+      commit: null,
+    };
   }
 
   function suspendInstance(
+    state: SuspendedState,
     instance: Instance,
     type: string,
     props: Props,
@@ -338,20 +340,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (record.status === 'fulfilled') {
         // Already loaded.
       } else if (record.status === 'pending') {
-        if (suspenseyCommitSubscription === null) {
-          suspenseyCommitSubscription = {
-            pendingCount: 1,
-            commit: null,
-          };
-        } else {
-          suspenseyCommitSubscription.pendingCount++;
-        }
+        state.pendingCount++;
         // Stash the subscription on the record. In `resolveSuspenseyThing`,
         // we'll use this fire the commit once all the things have loaded.
         if (record.subscriptions === null) {
           record.subscriptions = [];
         }
-        record.subscriptions.push(suspenseyCommitSubscription);
+        record.subscriptions.push(state);
       }
     } else {
       throw new Error(
@@ -362,15 +357,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   }
 
   function waitForCommitToBeReady(
+    state: SuspendedState,
     timeoutOffset: number,
   ): ((commit: () => mixed) => () => void) | null {
-    const subscription = suspenseyCommitSubscription;
-    if (subscription !== null) {
-      suspenseyCommitSubscription = null;
+    if (state.pendingCount > 0) {
       return (commit: () => void) => {
-        subscription.commit = commit;
+        state.commit = commit;
         const cancelCommit = () => {
-          subscription.commit = null;
+          state.commit = null;
         };
         return cancelCommit;
       };
@@ -693,13 +687,16 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     startSuspendingCommit,
     suspendInstance,
 
-    suspendResource(resource: mixed): void {
+    suspendResource(state: SuspendedState, resource: mixed): void {
       throw new Error(
         'Resources are not implemented for React Noop yet. This method should not be called',
       );
     },
 
-    suspendOnActiveViewTransition(container: Container): void {
+    suspendOnActiveViewTransition(
+      state: SuspendedState,
+      container: Container,
+    ): void {
       // Not implemented
     },