[Fiber] Track SuspendedState on stack instead of global (#34486)

Stacked on #34481.

We currently track the suspended state temporarily with a global which
is safe as long as we always read it during a sync pass. However, we
sometimes read it in closures and then we have to be carefully to pass
the right one since it's possible another commit on a different root has
started at that point. This avoids this footgun.

Another reason to do this is that I want to read it in
`startViewTransition` which is in an async gap after which point it's no
longer safe. So I have to pass that through the `commitRoot` bound
function.

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

@@ -2081,6 +2081,7 @@ function forceLayout(ownerDocument: Document) {
 }
 
 export function startViewTransition(
+  suspendedState: null | SuspendedState,
   rootContainer: Container,
   transitionTypes: null | TransitionTypes,
   mutationCallback: () => void,
@@ -2443,6 +2444,7 @@ function animateGesture(
 }
 
 export function startGestureTransition(
+  suspendedState: null | SuspendedState,
   rootContainer: Container,
   timeline: GestureTimeline,
   rangeStart: number,
@@ -5904,18 +5906,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 +5931,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 +5967,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 +6051,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 +6078,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

@@ -664,6 +664,7 @@ export function hasInstanceAffectedParent(
 }
 
 export function startViewTransition(
+  suspendedState: null | SuspendedState,
   rootContainer: Container,
   transitionTypes: null | TransitionTypes,
   mutationCallback: () => void,
@@ -684,6 +685,7 @@ export function startViewTransition(
 export type RunningViewTransition = null;
 
 export function startGestureTransition(
+  suspendedState: null | SuspendedState,
   rootContainer: Container,
   timeline: GestureTimeline,
   rangeStart: number,
@@ -778,17 +780,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
     },