Response to PR feedback:

1. Moved mutableSources root option to hydrationOptions object
2. Only initialize root mutableSourceEagerHydrationData if supportsHydration config is true
3. Lazily initialize mutableSourceEagerHydrationData on root object

Author: Brian Vaughn

packages/react-dom/src/client/ReactDOMRoot.js

@@ -24,9 +24,9 @@ export type RootOptions = {
   hydrationOptions?: {
     onHydrated?: (suspenseNode: Comment) => void,
     onDeleted?: (suspenseNode: Comment) => void,
+    mutableSources?: Array<MutableSource<any>>,
     ...
   },
-  mutableSources?: Array<MutableSource<any>>,
   ...
 };
 
@@ -126,7 +126,11 @@ function createRootImpl(
   const hydrate = options != null && options.hydrate === true;
   const hydrationCallbacks =
     (options != null && options.hydrationOptions) || null;
-  const mutableSources = (options != null && options.mutableSources) || null;
+  const mutableSources =
+    (options != null &&
+      options.hydrationOptions != null &&
+      options.hydrationOptions.mutableSources) ||
+    null;
   const root = createContainer(container, tag, hydrate, hydrationCallbacks);
   markContainerAsRoot(root.current, container);
   const containerNodeType = container.nodeType;

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -127,6 +127,7 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
+  supportsHydration,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldSuspend} from './ReactFiberReconciler';
@@ -1076,14 +1077,18 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
 
-    const mutableSourceEagerHydrationData =
-      root.mutableSourceEagerHydrationData;
-    for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-      const mutableSource = ((mutableSourceEagerHydrationData[
-        i
-      ]: any): MutableSource<any>);
-      const version = mutableSourceEagerHydrationData[i + 1];
-      setWorkInProgressVersion(mutableSource, version);
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
+        }
+      }
     }
 
     const child = mountChildFibers(

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -115,6 +115,7 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
+  supportsHydration,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldSuspend} from './ReactFiberReconciler';
@@ -1043,14 +1044,18 @@ function updateHostRoot(current, workInProgress, renderExpirationTime) {
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
 
-    const mutableSourceEagerHydrationData =
-      root.mutableSourceEagerHydrationData;
-    for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-      const mutableSource = ((mutableSourceEagerHydrationData[
-        i
-      ]: any): MutableSource<any>);
-      const version = mutableSourceEagerHydrationData[i + 1];
-      setWorkInProgressVersion(mutableSource, version);
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
+        }
+      }
     }
 
     const child = mountChildFibers(

packages/react-reconciler/src/ReactFiberRoot.new.js

@@ -10,7 +10,7 @@
 import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout} from './ReactFiberHostConfig';
+import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
 import {
   NoLanes,
@@ -51,7 +51,9 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
-  this.mutableSourceEagerHydrationData = [];
+  if (supportsHydration) {
+    this.mutableSourceEagerHydrationData = null;
+  }
 
   if (enableSchedulerTracing) {
     this.interactionThreadID = unstable_getThreadID();

packages/react-reconciler/src/ReactFiberRoot.old.js

@@ -11,7 +11,7 @@ import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {ExpirationTime} from './ReactFiberExpirationTime.old';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout} from './ReactFiberHostConfig';
+import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
 import {NoWork} from './ReactFiberExpirationTime.old';
 import {
@@ -45,7 +45,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.lastPingedTime = NoWork;
   this.lastExpiredTime = NoWork;
   this.mutableSourceLastPendingUpdateTime = NoWork;
-  this.mutableSourceEagerHydrationData = [];
+
+  if (supportsHydration) {
+    this.mutableSourceEagerHydrationData = null;
+  }
 
   if (enableSchedulerTracing) {
     this.interactionThreadID = unstable_getThreadID();

packages/react-reconciler/src/ReactInternalTypes.js

@@ -249,9 +249,9 @@ type BaseFiberRootProperties = {|
   mutableSourceLastPendingUpdateTime: ExpirationTime,
 
   // Used by useMutableSource hook to avoid tearing during hydrtaion.
-  mutableSourceEagerHydrationData: Array<
+  mutableSourceEagerHydrationData?: Array<
     MutableSource<any> | MutableSourceVersion,
-  >,
+  > | null,
 
   // Only used by new reconciler
 

packages/react-reconciler/src/ReactMutableSource.new.js

@@ -100,5 +100,9 @@ export function registerMutableSourceForHydration(
 
   // TODO Clear this data once all pending hydration work is finished.
   // Retaining it forever may interfere with GC.
-  root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  if (root.mutableSourceEagerHydrationData == null) {
+    root.mutableSourceEagerHydrationData = [mutableSource, version];
+  } else {
+    root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  }
 }

packages/react-reconciler/src/ReactMutableSource.old.js

@@ -130,5 +130,9 @@ export function registerMutableSourceForHydration(
 
   // TODO Clear this data once all pending hydration work is finished.
   // Retaining it forever may interfere with GC.
-  root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  if (root.mutableSourceEagerHydrationData == null) {
+    root.mutableSourceEagerHydrationData = [mutableSource, version];
+  } else {
+    root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  }
 }

packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js

@@ -159,7 +159,9 @@ describe('useMutableSourceHydration', () => {
 
     const root = ReactDOM.unstable_createRoot(container, {
       hydrate: true,
-      mutableSources: [mutableSource],
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
     });
     act(() => {
       root.render(<TestComponent />);
@@ -194,7 +196,9 @@ describe('useMutableSourceHydration', () => {
 
     const root = ReactDOM.unstable_createRoot(container, {
       hydrate: true,
-      mutableSources: [mutableSource],
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
     });
     expect(() => {
       act(() => {
@@ -244,7 +248,9 @@ describe('useMutableSourceHydration', () => {
 
     const root = ReactDOM.unstable_createRoot(container, {
       hydrate: true,
-      mutableSources: [mutableSource],
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
     });
     expect(() => {
       act(() => {
@@ -295,7 +301,9 @@ describe('useMutableSourceHydration', () => {
 
     const root = ReactDOM.unstable_createRoot(container, {
       hydrate: true,
-      mutableSources: [mutableSource],
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
     });
     expect(() => {
       act(() => {
@@ -361,7 +369,9 @@ describe('useMutableSourceHydration', () => {
 
     const root = ReactDOM.unstable_createRoot(container, {
       hydrate: true,
-      mutableSources: [mutableSource],
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
     });
     expect(() => {
       act(() => {