From 23830ea2a19bc14f5e7fa7198f9371130f0f8382 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@meta.com>
Date: Mon, 12 Aug 2024 16:32:40 -0700
Subject: [PATCH 01/40] Unit Test for `findNodeHandle` Error Behavior (#30669)

## Summary

As promised on https://github.com/facebook/react/pull/29627, this
creates a unit test for the `findNodeHandle` error that prevents
developers from calling it within render methods.

## How did you test this change?

```
$ yarn test ReactFabric-test.internal.js
```
---
 .../__tests__/ReactFabric-test.internal.js    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index d55be5efd24bfc..03f0cd0a6c0f3c 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -1306,6 +1306,40 @@ describe('ReactFabric', () => {
     );
   });
 
+  it('findNodeHandle errors when called from render', async () => {
+    class TestComponent extends React.Component {
+      render() {
+        ReactFabric.findNodeHandle(this);
+        return null;
+      }
+    }
+    await expect(async () => {
+      await act(() => {
+        ReactFabric.render(<TestComponent />, 11, null, true);
+      });
+    }).toErrorDev([
+      'TestComponent is accessing findNodeHandle inside its render(). ' +
+        'render() should be a pure function of props and state. It should ' +
+        'never access something that requires stale data from the previous ' +
+        'render, such as refs. Move this logic to componentDidMount and ' +
+        'componentDidUpdate instead.',
+    ]);
+  });
+
+  it("findNodeHandle doesn't error when called outside render", async () => {
+    class TestComponent extends React.Component {
+      render() {
+        return null;
+      }
+      componentDidMount() {
+        ReactFabric.findNodeHandle(this);
+      }
+    }
+    await act(() => {
+      ReactFabric.render(<TestComponent />, 11, null, true);
+    });
+  });
+
   it('should no-op if calling sendAccessibilityEvent on unmounted refs', async () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},

From d48603a52564675ce02152fff245e38b6816da47 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope1@gmail.com>
Date: Tue, 13 Aug 2024 11:31:44 -0400
Subject: [PATCH 02/40] Fix unstable_useContextWithBailout incorrect dispatcher
 assignment (#30673)

Fixing a mistaken copy from another dispatcher property assignment
---
 packages/react-reconciler/src/ReactFiberHooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 3ba251b620713c..6e9e9b2c86ede9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -4839,7 +4839,7 @@ if (__DEV__) {
       };
   }
   if (enableContextProfiling) {
-    (HooksDispatcherOnUpdateInDEV: Dispatcher).unstable_useContextWithBailout =
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).unstable_useContextWithBailout =
       function <T>(
         context: ReactContext<T>,
         select: (T => Array<mixed>) | null,

From e865fe0722f889126b818d462a73026d7d0b6867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 13 Aug 2024 15:18:24 -0400
Subject: [PATCH 03/40] [DevTools] Unmount instance by walking the instance
 tree instead of the fiber tree (#30665)

There was a comment that it's not safe to walk the unmounted fiber tree
which I'm not sure is correct or not but we need to walk the instance
tree to be able to clean up virtual instances anyway. We already walk
the instance tree to clean up "remaining instances".

This is also simpler because we don't need to special case Suspense
boundaries. We simply clean up whatever branch we had before.

The ultimate goal is to also walk the instance tree for updates so we
don't need a fiber to instance map.
---
 .../src/backend/fiber/renderer.js             | 119 ++++++------------
 1 file changed, 35 insertions(+), 84 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index d1bb0429e7c48f..3125bc060413a4 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -1148,8 +1148,9 @@ export function attach(
 
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
-      currentRootID = getFiberInstanceThrows(root.current).id;
-      unmountFiberRecursively(root.current);
+      const rootInstance = getFiberInstanceThrows(root.current);
+      currentRootID = rootInstance.id;
+      unmountInstanceRecursively(rootInstance);
       flushPendingEvents(root);
       currentRootID = -1;
     });
@@ -2183,7 +2184,8 @@ export function attach(
     return fiberInstance;
   }
 
-  function recordUnmount(fiber: Fiber): null | FiberInstance {
+  function recordUnmount(fiberInstance: FiberInstance): void {
+    const fiber = fiberInstance.data;
     if (__DEBUG__) {
       debug('recordUnmount()', fiber, null);
     }
@@ -2200,25 +2202,13 @@ export function attach(
       }
     }
 
-    const fiberInstance = getFiberInstanceUnsafe(fiber);
-    if (fiberInstance === null) {
-      // If we've never seen this Fiber, it might be inside of a legacy render Suspense fragment (so the store is not even aware of it).
-      // In that case we can just ignore it or it will cause errors later on.
-      // One example of this is a Lazy component that never resolves before being unmounted.
-      //
-      // This also might indicate a Fast Refresh force-remount scenario.
-      //
-      // TODO: This is fragile and can obscure actual bugs.
-      return null;
-    }
-
     const id = fiberInstance.id;
     const isRoot = fiber.tag === HostRoot;
     if (isRoot) {
       // Roots must be removed only after all children have been removed.
       // So we track it separately.
       pendingUnmountedRootID = id;
-    } else if (!shouldFilterFiber(fiber)) {
+    } else {
       // To maintain child-first ordering,
       // we'll push it into one of these queues,
       // and later arrange them in the correct order.
@@ -2232,7 +2222,6 @@ export function attach(
       idToRootMap.delete(id);
       idToTreeBaseDurationMap.delete(id);
     }
-    return fiberInstance;
   }
 
   // Running state of the remaining children from the previous version of this parent that
@@ -2308,10 +2297,7 @@ export function attach(
   function unmountRemainingChildren() {
     let child = remainingReconcilingChildren;
     while (child !== null) {
-      if (child.kind === FIBER_INSTANCE) {
-        unmountFiberRecursively(child.data);
-      }
-      removeChild(child);
+      unmountInstanceRecursively(child);
       child = remainingReconcilingChildren;
     }
   }
@@ -2434,69 +2420,33 @@ export function attach(
 
   // We use this to simulate unmounting for Suspense trees
   // when we switch from primary to fallback, or deleting a subtree.
-  function unmountFiberRecursively(fiber: Fiber) {
+  function unmountInstanceRecursively(instance: DevToolsInstance) {
     if (__DEBUG__) {
-      debug('unmountFiberRecursively()', fiber, null);
+      if (instance.kind === FIBER_INSTANCE) {
+        debug('unmountInstanceRecursively()', instance.data, null);
+      }
     }
 
-    let fiberInstance = null;
-
-    const shouldIncludeInTree = !shouldFilterFiber(fiber);
     const stashedParent = reconcilingParent;
     const stashedPrevious = previouslyReconciledSibling;
     const stashedRemaining = remainingReconcilingChildren;
-    if (shouldIncludeInTree) {
-      fiberInstance = getFiberInstanceThrows(fiber);
-      // Push a new DevTools instance parent while reconciling this subtree.
-      reconcilingParent = fiberInstance;
-      previouslyReconciledSibling = null;
-      // Move all the children of this instance to the remaining set.
-      // We'll move them back one by one, and anything that remains is deleted.
-      remainingReconcilingChildren = fiberInstance.firstChild;
-      fiberInstance.firstChild = null;
-    }
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = instance;
+    previouslyReconciledSibling = null;
+    // Move all the children of this instance to the remaining set.
+    remainingReconcilingChildren = instance.firstChild;
     try {
-      // We might meet a nested Suspense on our way.
-      const isTimedOutSuspense =
-        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-
-      if (fiber.tag === HostHoistable) {
-        releaseHostResource(fiber, fiber.memoizedState);
-      }
-
-      let child = fiber.child;
-      if (isTimedOutSuspense) {
-        // If it's showing fallback tree, let's traverse it instead.
-        const primaryChildFragment = fiber.child;
-        const fallbackChildFragment = primaryChildFragment
-          ? primaryChildFragment.sibling
-          : null;
-        // Skip over to the real Fiber child.
-        child = fallbackChildFragment ? fallbackChildFragment.child : null;
-      }
-
-      unmountChildrenRecursively(child);
+      // Unmount the remaining set.
+      unmountRemainingChildren();
     } finally {
-      if (shouldIncludeInTree) {
-        reconcilingParent = stashedParent;
-        previouslyReconciledSibling = stashedPrevious;
-        remainingReconcilingChildren = stashedRemaining;
-      }
-    }
-    if (fiberInstance !== null) {
-      recordUnmount(fiber);
-      removeChild(fiberInstance);
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
     }
-  }
-
-  function unmountChildrenRecursively(firstChild: null | Fiber) {
-    let child: null | Fiber = firstChild;
-    while (child !== null) {
-      // Record simulated unmounts children-first.
-      // We skip nodes without return because those are real unmounts.
-      unmountFiberRecursively(child);
-      child = child.sibling;
+    if (instance.kind === FIBER_INSTANCE) {
+      recordUnmount(instance);
     }
+    removeChild(instance);
   }
 
   function recordProfilingDurations(fiber: Fiber) {
@@ -2843,7 +2793,8 @@ export function attach(
       } else if (!prevDidTimeout && nextDidTimeOut) {
         // Primary -> Fallback:
         // 1. Hide primary set
-        unmountChildrenRecursively(prevFiber.child);
+        // We simply don't re-add the fallback children and let
+        // unmountRemainingChildren() handle it.
         // 2. Mount fallback set
         const nextFiberChild = nextFiber.child;
         const nextFallbackChildSet = nextFiberChild
@@ -3053,19 +3004,19 @@ export function attach(
     const current = root.current;
     const alternate = current.alternate;
 
-    const existingRoot =
+    let rootInstance =
       fiberToFiberInstanceMap.get(current) ||
       (alternate && fiberToFiberInstanceMap.get(alternate));
-    if (!existingRoot) {
-      const newRoot = createFiberInstance(current);
-      idToDevToolsInstanceMap.set(newRoot.id, newRoot);
-      fiberToFiberInstanceMap.set(current, newRoot);
+    if (!rootInstance) {
+      rootInstance = createFiberInstance(current);
+      idToDevToolsInstanceMap.set(rootInstance.id, rootInstance);
+      fiberToFiberInstanceMap.set(current, rootInstance);
       if (alternate) {
-        fiberToFiberInstanceMap.set(alternate, newRoot);
+        fiberToFiberInstanceMap.set(alternate, rootInstance);
       }
-      currentRootID = newRoot.id;
+      currentRootID = rootInstance.id;
     } else {
-      currentRootID = existingRoot.id;
+      currentRootID = rootInstance.id;
     }
 
     // Before the traversals, remember to start tracking
@@ -3123,7 +3074,7 @@ export function attach(
       } else if (wasMounted && !isMounted) {
         // Unmount an existing root.
         removeRootPseudoKey(currentRootID);
-        unmountFiberRecursively(alternate);
+        unmountInstanceRecursively(rootInstance);
       }
     } else {
       // Mount a new root.

From 082a690cc3ed6e27f62ed6e4ac655dec5c828708 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 13 Aug 2024 15:18:34 -0400
Subject: [PATCH 04/40] [DevTools] Compute new reordered child set from the
 instance tree (#30668)

This is already filtered and simply just all the ids in the linked list.

Same principle as #30665.
---
 .../src/backend/fiber/renderer.js             | 69 +++++--------------
 1 file changed, 16 insertions(+), 53 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 3125bc060413a4..0e80ef642a3acd 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -2516,24 +2516,28 @@ export function attach(
     }
   }
 
-  function recordResetChildren(
-    parentInstance: DevToolsInstance,
-    childSet: Fiber,
-  ) {
+  function recordResetChildren(parentInstance: DevToolsInstance) {
     if (__DEBUG__) {
-      debug('recordResetChildren()', childSet, parentInstance);
+      if (
+        parentInstance.firstChild !== null &&
+        parentInstance.firstChild.kind === FIBER_INSTANCE
+      ) {
+        debug(
+          'recordResetChildren()',
+          parentInstance.firstChild.data,
+          parentInstance,
+        );
+      }
     }
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
     const nextChildren: Array<number> = [];
 
-    // This is a naive implementation that shallowly recourses children.
-    // We might want to revisit this if it proves to be too inefficient.
-    let child: null | Fiber = childSet;
+    let child: null | DevToolsInstance = parentInstance.firstChild;
     while (child !== null) {
-      findReorderedChildrenRecursively(child, nextChildren);
-      child = child.sibling;
+      nextChildren.push(child.id);
+      child = child.nextSibling;
     }
 
     const numChildren = nextChildren.length;
@@ -2549,38 +2553,6 @@ export function attach(
     }
   }
 
-  function findReorderedChildrenRecursively(
-    fiber: Fiber,
-    nextChildren: Array<number>,
-  ) {
-    if (!shouldFilterFiber(fiber)) {
-      nextChildren.push(getFiberIDThrows(fiber));
-    } else {
-      let child = fiber.child;
-      const isTimedOutSuspense =
-        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
-      if (isTimedOutSuspense) {
-        // Special case: if Suspense mounts in a timed-out state,
-        // get the fallback child from the inner fragment,
-        // and skip over the primary child.
-        const primaryChildFragment = fiber.child;
-        const fallbackChildFragment = primaryChildFragment
-          ? primaryChildFragment.sibling
-          : null;
-        const fallbackChild = fallbackChildFragment
-          ? fallbackChildFragment.child
-          : null;
-        if (fallbackChild !== null) {
-          child = fallbackChild;
-        }
-      }
-      while (child !== null) {
-        findReorderedChildrenRecursively(child, nextChildren);
-        child = child.sibling;
-      }
-    }
-  }
-
   // Returns whether closest unfiltered fiber parent needs to reset its child list.
   function updateChildrenRecursively(
     nextFirstChild: null | Fiber,
@@ -2865,17 +2837,8 @@ export function attach(
         // We need to crawl the subtree for closest non-filtered Fibers
         // so that we can display them in a flat children set.
         if (shouldIncludeInTree) {
-          // Normally, search for children from the rendered child.
-          let nextChildSet = nextFiber.child;
-          if (nextDidTimeOut) {
-            // Special case: timed-out Suspense renders the fallback set.
-            const nextFiberChild = nextFiber.child;
-            nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;
-          }
-          if (nextChildSet != null) {
-            if (reconcilingParent !== null) {
-              recordResetChildren(reconcilingParent, nextChildSet);
-            }
+          if (reconcilingParent !== null) {
+            recordResetChildren(reconcilingParent);
           }
           // We've handled the child order change for this Fiber.
           // Since it's included, there's no need to invalidate parent child order.

From a601d1da3647ed9a20d9f83b87c8019492f24215 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Tue, 13 Aug 2024 16:35:56 -0400
Subject: [PATCH 05/40] [compiler] Allow lets to be hoisted

ghstack-source-id: 02f4698bd98705a855deb0d4bc30b9829afdddc0
Pull Request resolved: https://github.com/facebook/react/pull/30674
---
 .../src/HIR/BuildHIR.ts                       | 16 ++++-
 .../src/HIR/HIR.ts                            |  8 ++-
 .../src/HIR/PrintHIR.ts                       |  3 +
 .../ReactiveScopes/CodegenReactiveFunction.ts | 23 +++++++
 .../ReactiveScopes/PruneHoistedContexts.ts    | 25 +++++--
 .../ValidateLocalsNotReassignedAfterRender.ts | 10 +++
 ...rences-variable-its-assigned-to.expect.md} |  2 +-
 ...on-references-variable-its-assigned-to.js} |  0
 ...r.mutate-captured-arg-separately.expect.md | 31 ---------
 .../error.mutate-captured-arg-separately.js   | 10 ---
 ...ences-later-variable-declaration.expect.md |  2 +-
 ...oisting-nested-let-declaration-2.expect.md | 62 ++++++++++++++++++
 .../hoisting-nested-let-declaration-2.js      | 17 +++++
 .../hoisting-nested-let-declaration.expect.md | 65 +++++++++++++++++++
 .../hoisting-nested-let-declaration.js        | 21 ++++++
 .../hoisting-simple-let-declaration.expect.md | 51 +++++++++++++++
 .../hoisting-simple-let-declaration.js        | 14 ++++
 .../mutate-captured-arg-separately.expect.md  | 56 ++++++++++++++++
 .../mutate-captured-arg-separately.js         | 16 +++++
 19 files changed, 381 insertions(+), 51 deletions(-)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-function-expression-references-variable-its-assigned-to.expect.md => error.function-expression-references-variable-its-assigned-to.expect.md} (59%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-function-expression-references-variable-its-assigned-to.js => error.function-expression-references-variable-its-assigned-to.js} (100%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
index b9bddff6a58b51..d5c7d9e3f41931 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -439,8 +439,11 @@ function lowerStatement(
               loc: id.parentPath.node.loc ?? GeneratedSource,
             });
             continue;
-          } else if (binding.kind !== 'const' && binding.kind !== 'var') {
-            // Avoid double errors on var declarations, which we do not plan to support anyways
+          } else if (
+            binding.kind !== 'const' &&
+            binding.kind !== 'var' &&
+            binding.kind !== 'let'
+          ) {
             builder.errors.push({
               severity: ErrorSeverity.Todo,
               reason: 'Handle non-const declarations for hoisting',
@@ -463,10 +466,17 @@ function lowerStatement(
             reactive: false,
             loc: id.node.loc ?? GeneratedSource,
           };
+          const kind =
+            // Avoid double errors on var declarations, which we do not plan to support anyways
+            binding.kind === 'const' || binding.kind === 'var'
+              ? InstructionKind.HoistedConst
+              : binding.kind === 'let'
+                ? InstructionKind.HoistedLet
+                : assertExhaustive(binding.kind, 'Unexpected binding kind');
           lowerValueToTemporary(builder, {
             kind: 'DeclareContext',
             lvalue: {
-              kind: InstructionKind.HoistedConst,
+              kind,
               place,
             },
             loc: id.node.loc ?? GeneratedSource,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index f249329e0c9f94..1e807d6d2a5d0e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -741,6 +741,9 @@ export enum InstructionKind {
 
   // hoisted const declarations
   HoistedConst = 'HoistedConst',
+
+  // hoisted const declarations
+  HoistedLet = 'HoistedLet',
 }
 
 function _staticInvariantInstructionValueHasLocation(
@@ -858,7 +861,10 @@ export type InstructionValue =
   | {
       kind: 'DeclareContext';
       lvalue: {
-        kind: InstructionKind.Let | InstructionKind.HoistedConst;
+        kind:
+          | InstructionKind.Let
+          | InstructionKind.HoistedConst
+          | InstructionKind.HoistedLet;
         place: Place;
       };
       loc: SourceLocation;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
index fd17822af0a7ef..59f067787359f4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
@@ -760,6 +760,9 @@ export function printLValue(lval: LValue): string {
     case InstructionKind.HoistedConst: {
       return `HoistedConst ${lvalue}$`;
     }
+    case InstructionKind.HoistedLet: {
+      return `HoistedLet ${lvalue}$`;
+    }
     default: {
       assertExhaustive(lval.kind, `Unexpected lvalue kind \`${lval.kind}\``);
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index bd3e97f23aba79..624a4b604d66f9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -994,6 +994,13 @@ function codegenTerminal(
             loc: iterableItem.loc,
             suggestions: null,
           });
+        case InstructionKind.HoistedLet:
+          CompilerError.invariant(false, {
+            reason: 'Unexpected HoistedLet variable in for..in collection',
+            description: null,
+            loc: iterableItem.loc,
+            suggestions: null,
+          });
         default:
           assertExhaustive(
             iterableItem.value.lvalue.kind,
@@ -1089,6 +1096,13 @@ function codegenTerminal(
             loc: iterableItem.loc,
             suggestions: null,
           });
+        case InstructionKind.HoistedLet:
+          CompilerError.invariant(false, {
+            reason: 'Unexpected HoistedLet variable in for..of collection',
+            description: null,
+            loc: iterableItem.loc,
+            suggestions: null,
+          });
         default:
           assertExhaustive(
             iterableItem.value.lvalue.kind,
@@ -1289,6 +1303,15 @@ function codegenInstructionNullable(
       case InstructionKind.Catch: {
         return t.emptyStatement();
       }
+      case InstructionKind.HoistedLet: {
+        CompilerError.invariant(false, {
+          reason:
+            'Expected HoistedLet to have been pruned in PruneHoistedContexts',
+          description: null,
+          loc: instr.loc,
+          suggestions: null,
+        });
+      }
       case InstructionKind.HoistedConst: {
         CompilerError.invariant(false, {
           reason:
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
index 8608b32298503e..1df211afc3ae46 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneHoistedContexts.ts
@@ -23,11 +23,11 @@ import {
  * original instruction kind.
  */
 export function pruneHoistedContexts(fn: ReactiveFunction): void {
-  const hoistedIdentifiers: HoistedIdentifiers = new Set();
+  const hoistedIdentifiers: HoistedIdentifiers = new Map();
   visitReactiveFunction(fn, new Visitor(), hoistedIdentifiers);
 }
 
-type HoistedIdentifiers = Set<DeclarationId>;
+type HoistedIdentifiers = Map<DeclarationId, InstructionKind>;
 
 class Visitor extends ReactiveFunctionTransform<HoistedIdentifiers> {
   override transformInstruction(
@@ -39,7 +39,21 @@ class Visitor extends ReactiveFunctionTransform<HoistedIdentifiers> {
       instruction.value.kind === 'DeclareContext' &&
       instruction.value.lvalue.kind === 'HoistedConst'
     ) {
-      state.add(instruction.value.lvalue.place.identifier.declarationId);
+      state.set(
+        instruction.value.lvalue.place.identifier.declarationId,
+        InstructionKind.Const,
+      );
+      return {kind: 'remove'};
+    }
+
+    if (
+      instruction.value.kind === 'DeclareContext' &&
+      instruction.value.lvalue.kind === 'HoistedLet'
+    ) {
+      state.set(
+        instruction.value.lvalue.place.identifier.declarationId,
+        InstructionKind.Let,
+      );
       return {kind: 'remove'};
     }
 
@@ -47,6 +61,9 @@ class Visitor extends ReactiveFunctionTransform<HoistedIdentifiers> {
       instruction.value.kind === 'StoreContext' &&
       state.has(instruction.value.lvalue.place.identifier.declarationId)
     ) {
+      const kind = state.get(
+        instruction.value.lvalue.place.identifier.declarationId,
+      )!;
       return {
         kind: 'replace',
         value: {
@@ -57,7 +74,7 @@ class Visitor extends ReactiveFunctionTransform<HoistedIdentifiers> {
               ...instruction.value,
               lvalue: {
                 ...instruction.value.lvalue,
-                kind: InstructionKind.Const,
+                kind,
               },
               type: null,
               kind: 'StoreLocal',
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
index 2dab01f86e8384..0ea1814349f7f1 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateLocalsNotReassignedAfterRender.ts
@@ -130,6 +130,16 @@ function getContextReassignment(
              */
             contextVariables.add(value.lvalue.place.identifier.id);
           }
+          const reassignment = reassigningFunctions.get(
+            value.value.identifier.id,
+          );
+          if (reassignment !== undefined) {
+            reassigningFunctions.set(
+              value.lvalue.place.identifier.id,
+              reassignment,
+            );
+            reassigningFunctions.set(lvalue.identifier.id, reassignment);
+          }
           break;
         }
         default: {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-variable-its-assigned-to.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
similarity index 59%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-variable-its-assigned-to.expect.md
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
index c06ecc085f8e73..76ac6d77a27741 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-variable-its-assigned-to.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.expect.md
@@ -18,7 +18,7 @@ function Component() {
   1 | function Component() {
   2 |   let callback = () => {
 > 3 |     callback = null;
-    |     ^^^^^^^^^^^^^^^ Todo: Handle non-const declarations for hoisting. variable "callback" declared with let (3:3)
+    |     ^^^^^^^^ InvalidReact: Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. Variable `callback` cannot be reassigned after render (3:3)
   4 |   };
   5 |   return <div onClick={callback} />;
   6 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-variable-its-assigned-to.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-variable-its-assigned-to.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.function-expression-references-variable-its-assigned-to.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.expect.md
deleted file mode 100644
index ecfbdf64952554..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.expect.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-## Input
-
-```javascript
-// Let's not support identifiers defined after use for now.
-function component(a) {
-  let y = function () {
-    m(x);
-  };
-
-  let x = {a};
-  m(x);
-  return y;
-}
-
-```
-
-
-## Error
-
-```
-  2 | function component(a) {
-  3 |   let y = function () {
-> 4 |     m(x);
-    |     ^^^^ Todo: Handle non-const declarations for hoisting. variable "x" declared with let (4:4)
-  5 |   };
-  6 |
-  7 |   let x = {a};
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.js
deleted file mode 100644
index 22ea3e823317dd..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-captured-arg-separately.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Let's not support identifiers defined after use for now.
-function component(a) {
-  let y = function () {
-    m(x);
-  };
-
-  let x = {a};
-  m(x);
-  return y;
-}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
index 174139eaae9e30..d53d6b9ea4f33a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md
@@ -20,7 +20,7 @@ function Component() {
   1 | function Component() {
   2 |   let callback = () => {
 > 3 |     onClick = () => {};
-    |     ^^^^^^^^^^^^^^^^^^ Todo: Handle non-const declarations for hoisting. variable "onClick" declared with let (3:3)
+    |     ^^^^^^^ InvalidReact: Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. Variable `onClick` cannot be reassigned after render (3:3)
   4 |   };
   5 |   let onClick;
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
new file mode 100644
index 00000000000000..fe0c6618f51adb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    let foo = () => {
+      items.push(bar());
+    };
+    let bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting(cond) {
+  const $ = _c(2);
+  let items;
+  if ($[0] !== cond) {
+    items = [];
+    if (cond) {
+      const foo = () => {
+        items.push(bar());
+      };
+
+      let bar = _temp;
+      foo();
+    }
+    $[0] = cond;
+    $[1] = items;
+  } else {
+    items = $[1];
+  }
+  return items;
+}
+function _temp() {
+  return true;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) [true]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js
new file mode 100644
index 00000000000000..27b8a8fff60105
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration-2.js
@@ -0,0 +1,17 @@
+function hoisting(cond) {
+  let items = [];
+  if (cond) {
+    let foo = () => {
+      items.push(bar());
+    };
+    let bar = () => true;
+    foo();
+  }
+  return items;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [true],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
new file mode 100644
index 00000000000000..faf7a064d748f4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  let qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const qux = () => {
+      let result;
+
+      result = foo();
+      return result;
+    };
+
+    let foo = () => bar + baz;
+
+    let bar = 3;
+    const baz = 2;
+    t0 = qux();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js
new file mode 100644
index 00000000000000..c4c8f2aa4c2938
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-nested-let-declaration.js
@@ -0,0 +1,21 @@
+function hoisting() {
+  let qux = () => {
+    let result;
+    {
+      result = foo();
+    }
+    return result;
+  };
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  const baz = 2;
+  return qux(); // OK: called outside of TDZ
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
new file mode 100644
index 00000000000000..8974664b0515f5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+function hoisting() {
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  let baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function hoisting() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const foo = () => bar + baz;
+
+    let bar = 3;
+    let baz = 2;
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
+
+```
+      
+### Eval output
+(kind: ok) 5
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js
new file mode 100644
index 00000000000000..b9a02619f5c9aa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-simple-let-declaration.js
@@ -0,0 +1,14 @@
+function hoisting() {
+  let foo = () => {
+    return bar + baz;
+  };
+  let bar = 3;
+  let baz = 2;
+  return foo(); // OK: called outside of TDZ for bar/baz
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: hoisting,
+  params: [],
+  isComponent: false,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
new file mode 100644
index 00000000000000..f3f21f8f6222b7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function component(a) {
+  let y = function () {
+    m(x);
+  };
+
+  let x = {a};
+  m(x);
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{name: 'Jason'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function component(a) {
+  const $ = _c(2);
+  let y;
+  if ($[0] !== a) {
+    y = function () {
+      m(x);
+    };
+
+    let x = { a };
+    m(x);
+    $[0] = a;
+    $[1] = y;
+  } else {
+    y = $[1];
+  }
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{ name: "Jason" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js
new file mode 100644
index 00000000000000..9985aea7f2fc50
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-captured-arg-separately.js
@@ -0,0 +1,16 @@
+function component(a) {
+  let y = function () {
+    m(x);
+  };
+
+  let x = {a};
+  m(x);
+  return y;
+}
+
+function m(x) {}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: component,
+  params: [{name: 'Jason'}],
+};

From f6d1df6648a8912ea30550507a9d400802dcdff4 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 13 Aug 2024 13:42:10 -0700
Subject: [PATCH 06/40] [Flight] erroring after abort should not result in
 unhandled rejection (#30675)

When I implemented the ability to abort synchronoulsy in flight I made
it possible for erroring async server components to cause an unhandled
rejection error. In the current implementation if you abort during the
synchronous phase of a Function Component and then throw an error in the
synchronous phase React will not attach any promise handlers because it
short circuits the thenable treatment and throws an AbortSigil instead.
This change updates the rendering logic to ignore the rejecting
component.
---
 .../src/__tests__/ReactFlightDOM-test.js      | 69 +++++++++++++++++++
 .../react-server/src/ReactFlightServer.js     | 31 +++++----
 2 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index cd0bb994a7aa6f..77a2241734d3ef 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -2485,4 +2485,73 @@ describe('ReactFlightDOM', () => {
       </div>,
     );
   });
+
+  it('can error synchronously after aborting without an unhandled rejection error', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+
+    async function ComponentThatAborts() {
+      abortRef.current();
+      throw new Error('boom');
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'The render was aborted by the server without a reason.',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      'The render was aborted by the server without a reason.',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index f680a3d97e1fc0..10ceee8075bd32 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -997,6 +997,8 @@ function callWithDebugContextInDEV<A, T>(
   }
 }
 
+const voidHandler = () => {};
+
 function renderFunctionComponent<Props>(
   request: Request,
   task: Task,
@@ -1101,6 +1103,14 @@ function renderFunctionComponent<Props>(
   }
 
   if (request.status === ABORTING) {
+    if (
+      typeof result === 'object' &&
+      result !== null &&
+      typeof result.then === 'function' &&
+      !isClientReference(result)
+    ) {
+      result.then(voidHandler, voidHandler);
+    }
     // If we aborted during rendering we should interrupt the render but
     // we don't need to provide an error because the renderer will encode
     // the abort error as the reason.
@@ -1120,18 +1130,15 @@ function renderFunctionComponent<Props>(
         // If the thenable resolves to an element, then it was in a static position,
         // the return value of a Server Component. That doesn't need further validation
         // of keys. The Server Component itself would have had a key.
-        thenable.then(
-          resolvedValue => {
-            if (
-              typeof resolvedValue === 'object' &&
-              resolvedValue !== null &&
-              resolvedValue.$$typeof === REACT_ELEMENT_TYPE
-            ) {
-              resolvedValue._store.validated = 1;
-            }
-          },
-          () => {},
-        );
+        thenable.then(resolvedValue => {
+          if (
+            typeof resolvedValue === 'object' &&
+            resolvedValue !== null &&
+            resolvedValue.$$typeof === REACT_ELEMENT_TYPE
+          ) {
+            resolvedValue._store.validated = 1;
+          }
+        }, voidHandler);
       }
       if (thenable.status === 'fulfilled') {
         return thenable.value;

From 8e60bacd08215bd23f0bf05dde407cd133885aa1 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Tue, 13 Aug 2024 16:57:45 -0400
Subject: [PATCH 07/40] [compiler] Reordering of logical expressions

ghstack-source-id: ad484f97451c65a2642618bfb9d540d6a53a19a6
Pull Request resolved: https://github.com/facebook/react/pull/30678
---
 .../src/HIR/BuildHIR.ts                       | 15 +++++++
 .../compiler/logical-reorder.flow.expect.md   | 39 +++++++++++++++++++
 .../fixtures/compiler/logical-reorder.flow.js | 12 ++++++
 3 files changed, 66 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
index d5c7d9e3f41931..8ed71b5e62a7ef 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -2847,6 +2847,21 @@ function isReorderableExpression(
         allowLocalIdentifiers,
       );
     }
+    case 'LogicalExpression': {
+      const logical = expr as NodePath<t.LogicalExpression>;
+      return (
+        isReorderableExpression(
+          builder,
+          logical.get('left'),
+          allowLocalIdentifiers,
+        ) &&
+        isReorderableExpression(
+          builder,
+          logical.get('right'),
+          allowLocalIdentifiers,
+        )
+      );
+    }
     case 'ConditionalExpression': {
       const conditional = expr as NodePath<t.ConditionalExpression>;
       return (
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md
new file mode 100644
index 00000000000000..f07193ea9102be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.expect.md
@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+//@flow
+
+const foo = undefined;
+
+component C(...{scope = foo ?? null}: any) {
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{scope: undefined}],
+};
+
+```
+
+## Code
+
+```javascript
+const foo = undefined;
+
+function C(t0) {
+  const { scope: t1 } = t0;
+  const scope = t1 === undefined ? (foo ?? null) : t1;
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{ scope: undefined }],
+};
+
+```
+      
+### Eval output
+(kind: ok) null
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js
new file mode 100644
index 00000000000000..48b7b1d04f5053
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-reorder.flow.js
@@ -0,0 +1,12 @@
+//@flow
+
+const foo = undefined;
+
+component C(...{scope = foo ?? null}: any) {
+  return scope;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{scope: undefined}],
+};

From 2a540194adde100c1af2b57b346e62eee760524c Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 13 Aug 2024 20:59:45 -0700
Subject: [PATCH 08/40] [Flight] do not emit error after abort (#30683)

When synchronously aborting in a non-async Function Component if you
throw after aborting the task would error rather than abort because
React never observed the AbortSignal.

Using a sigil to throw after aborting during render isn't effective b/c
the user code itself could throw so insteead we just read the request
status. This is ok b/c we don't expect any tasks to still be pending
after the currently running task finishes.

However I found one instance where that wasn't true related to
serializing thenables which I've fixed so we may find other cases. If we
do, though it's almost certainly a bug in our task bookkeeping so we
should just fix it if it comes up.

I also updated `abort` to not set the status to ABORTING unless the
status was OPEN. we don't want to ever leave CLOSED or CLOSING status
---
 .../src/__tests__/ReactFlightDOM-test.js      | 96 +++++++++++++++++++
 .../react-server/src/ReactFlightServer.js     | 23 +++--
 2 files changed, 110 insertions(+), 9 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 77a2241734d3ef..718ddf6c5716c0 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -2554,4 +2554,100 @@ describe('ReactFlightDOM', () => {
       </div>,
     );
   });
+
+  it('can error synchronously after aborting in a synchronous Component', async () => {
+    const rejectError = new Error('bam!');
+    const rejectedPromise = Promise.reject(rejectError);
+    rejectedPromise.catch(() => {});
+    rejectedPromise.status = 'rejected';
+    rejectedPromise.reason = rejectError;
+
+    const resolvedValue = <p>hello world</p>;
+    const resolvedPromise = Promise.resolve(resolvedValue);
+    resolvedPromise.status = 'fulfilled';
+    resolvedPromise.value = resolvedValue;
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+          <Suspense fallback={<p>loading too...</p>}>
+            {rejectedPromise}
+          </Suspense>
+          <Suspense fallback={<p>loading three...</p>}>
+            {resolvedPromise}
+          </Suspense>
+        </div>
+      );
+    }
+
+    const abortRef = {current: null};
+
+    // This test is specifically asserting that this works with Sync Server Component
+    function ComponentThatAborts() {
+      abortRef.current();
+      throw new Error('boom');
+    }
+
+    const {writable: flightWritable, readable: flightReadable} =
+      getTestStream();
+
+    await serverAct(() => {
+      const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(
+        <App />,
+        webpackMap,
+        {
+          onError(e) {
+            console.error(e);
+          },
+        },
+      );
+      abortRef.current = abort;
+      pipe(flightWritable);
+    });
+
+    assertConsoleErrorDev([
+      'The render was aborted by the server without a reason.',
+      'bam!',
+    ]);
+
+    const response =
+      ReactServerDOMClient.createFromReadableStream(flightReadable);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+    assertConsoleErrorDev([
+      'The render was aborted by the server without a reason.',
+      'bam!',
+    ]);
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+        <p>loading too...</p>
+        <p>hello world</p>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 10ceee8075bd32..6c9536d95acf76 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -382,8 +382,6 @@ export type Request = {
   didWarnForKey: null | WeakSet<ReactComponentInfo>,
 };
 
-const AbortSigil = {};
-
 const {
   TaintRegistryObjects,
   TaintRegistryValues,
@@ -594,6 +592,8 @@ function serializeThenable(
         const digest = logRecoverableError(request, x, null);
         emitErrorChunk(request, newTask.id, digest, x);
       }
+      newTask.status = ERRORED;
+      request.abortableTasks.delete(newTask);
       return newTask.id;
     }
     default: {
@@ -650,10 +650,10 @@ function serializeThenable(
         logPostpone(request, postponeInstance.message, newTask);
         emitPostponeChunk(request, newTask.id, postponeInstance);
       } else {
-        newTask.status = ERRORED;
         const digest = logRecoverableError(request, reason, newTask);
         emitErrorChunk(request, newTask.id, digest, reason);
       }
+      newTask.status = ERRORED;
       request.abortableTasks.delete(newTask);
       enqueueFlush(request);
     },
@@ -1114,7 +1114,8 @@ function renderFunctionComponent<Props>(
     // If we aborted during rendering we should interrupt the render but
     // we don't need to provide an error because the renderer will encode
     // the abort error as the reason.
-    throw AbortSigil;
+    // eslint-disable-next-line no-throw-literal
+    throw null;
   }
 
   if (
@@ -1616,7 +1617,8 @@ function renderElement(
           // lazy initializers are user code and could abort during render
           // we don't wan to return any value resolved from the lazy initializer
           // if it aborts so we interrupt rendering here
-          throw AbortSigil;
+          // eslint-disable-next-line no-throw-literal
+          throw null;
         }
         return renderElement(
           request,
@@ -2183,7 +2185,7 @@ function renderModel(
       }
     }
 
-    if (thrownValue === AbortSigil) {
+    if (request.status === ABORTING) {
       task.status = ABORTED;
       const errorId: number = (request.fatalError: any);
       if (wasReactNode) {
@@ -2357,7 +2359,8 @@ function renderModelDestructive(
           // lazy initializers are user code and could abort during render
           // we don't wan to return any value resolved from the lazy initializer
           // if it aborts so we interrupt rendering here
-          throw AbortSigil;
+          // eslint-disable-next-line no-throw-literal
+          throw null;
         }
         if (__DEV__) {
           const debugInfo: ?ReactDebugInfo = lazy._debugInfo;
@@ -3690,7 +3693,7 @@ function retryTask(request: Request, task: Task): void {
       }
     }
 
-    if (x === AbortSigil) {
+    if (request.status === ABORTING) {
       request.abortableTasks.delete(task);
       task.status = ABORTED;
       const errorId: number = (request.fatalError: any);
@@ -3909,7 +3912,9 @@ export function stopFlowing(request: Request): void {
 // This is called to early terminate a request. It creates an error at all pending tasks.
 export function abort(request: Request, reason: mixed): void {
   try {
-    request.status = ABORTING;
+    if (request.status === OPEN) {
+      request.status = ABORTING;
+    }
     const abortableTasks = request.abortableTasks;
     // We have tasks to abort. We'll emit one error row and then emit a reference
     // to that row from every row that's still remaining.

From fbfe08de6126f04777da805a493e819989151edf Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Wed, 14 Aug 2024 13:35:06 +0100
Subject: [PATCH 09/40] fix[react-devtools/InspectedElement]: fixed border
 stylings when some of the panels are not rendered (#30676)

Alternative to https://github.com/facebook/react/pull/30667.

Basically wrap every section in a `div` with the same class, and only
apply `border-bottom` for every instance, except for the last child. We
are paying some cost by having more divs, but thats more explicit.
---
 .../Components/InspectedElementContextTree.js |   2 +-
 .../InspectedElementErrorsAndWarningsTree.js  |   2 +-
 .../Components/InspectedElementHooksTree.css  |   7 +-
 .../Components/InspectedElementHooksTree.js   |   4 +-
 .../Components/InspectedElementPropsTree.js   |   4 +-
 .../InspectedElementSharedStyles.css          |   7 --
 .../InspectedElementSourcePanel.css           |   5 -
 .../Components/InspectedElementSourcePanel.js |   2 +-
 .../Components/InspectedElementStateTree.js   |   2 +-
 .../InspectedElementStyleXPlugin.js           |   2 +-
 .../InspectedElementSuspenseToggle.js         |   2 +-
 .../views/Components/InspectedElementView.css |  12 +-
 .../views/Components/InspectedElementView.js  | 114 ++++++++++--------
 13 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 5e7276b1698a75..044a6d9b48d119 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -60,7 +60,7 @@ export default function InspectedElementContextTree({
     return null;
   } else {
     return (
-      <div className={styles.InspectedElementTree}>
+      <div>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>
             {hasLegacyContext ? 'legacy context' : 'context'}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 4e192d027e8dfa..48b81103cfea22 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -136,7 +136,7 @@ function Tree({
     return null;
   }
   return (
-    <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
+    <div className={className}>
       <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
         <div className={sharedStyles.Header}>{label}</div>
         <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index 09cb48c06b959d..066b29c66a42e5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -1,8 +1,3 @@
-.HooksTreeView {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .Hook {
 }
 
@@ -85,4 +80,4 @@
 
 .ToggleError {
   color: var(--color-error-text);
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 5fd1a0a1ee779e..c782199122091b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -80,9 +80,7 @@ export function InspectedElementHooksTree({
     return null;
   } else {
     return (
-      <div
-        className={styles.HooksTreeView}
-        data-testname="InspectedElementHooksTree">
+      <div data-testname="InspectedElementHooksTree">
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
           {typeof hookNamesModuleLoader === 'function' &&
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index f0bc91afb3fdab..808824816d122e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -63,9 +63,7 @@ export default function InspectedElementPropsTree({
   const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
 
   return (
-    <div
-      className={styles.InspectedElementTree}
-      data-testname="InspectedElementPropsTree">
+    <div data-testname="InspectedElementPropsTree">
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>props</div>
         {!isEmpty && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
index 1d8f6071544a89..e9916d467cfa86 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
@@ -1,10 +1,3 @@
-.InspectedElementTree {
-  padding: 0.25rem;
-}
-.InspectedElementTree:first-of-type {
-  border-top: none;
-}
-
 .HeaderRow {
   display: flex;
   align-items: center;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
index 0fab548c8c4579..444e070c37e77f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css
@@ -1,8 +1,3 @@
-.Source {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .SourceHeaderRow {
   display: flex;
   align-items: center;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
index b051e94ee20cce..a5f0c7c8695500 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js
@@ -28,7 +28,7 @@ function InspectedElementSourcePanel({
   symbolicatedSourcePromise,
 }: Props): React.Node {
   return (
-    <div className={styles.Source} data-testname="InspectedElementView-Source">
+    <div data-testname="InspectedElementView-Source">
       <div className={styles.SourceHeaderRow}>
         <div className={styles.SourceHeader}>source</div>
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index 76e02856b220d5..b8fe8a89a30223 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -53,7 +53,7 @@ export default function InspectedElementStateTree({
   const handleCopy = () => copy(serializeDataForCopy(((state: any): Object)));
 
   return (
-    <div className={styles.InspectedElementTree}>
+    <div>
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>state</div>
         {!isEmpty && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
index e4f9c4c4d7160e..828b11a50c5bfc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -43,7 +43,7 @@ export default function InspectedElementStyleXPlugin({
   const {resolvedStyles, sources} = styleXPlugin;
 
   return (
-    <div className={sharedStyles.InspectedElementTree}>
+    <div>
       <div className={sharedStyles.HeaderRow}>
         <div className={sharedStyles.Header}>stylex</div>
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index 4b60af34dfb6ff..3b445505cbcc99 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -51,7 +51,7 @@ export default function InspectedElementSuspenseToggle({
   };
 
   return (
-    <div className={styles.InspectedElementTree}>
+    <div>
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>suspense</div>
       </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
index ac8e2729661eaa..57dc15d8b3d9f6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css
@@ -1,8 +1,3 @@
-.Owners {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .OwnersHeader {
   font-family: var(--font-family-sans);
 }
@@ -25,9 +20,12 @@
   line-height: var(--line-height-data);
 }
 
-.InspectedElementBadgesContainer:not(:empty) {
+.InspectedElementSection:not(:empty) {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-border);
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid var(--color-border);
+  }
 }
 
 .Owner {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index f3427410b49b9f..8eec411492976b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -71,71 +71,87 @@ export default function InspectedElementView({
   return (
     <Fragment>
       <div className={styles.InspectedElement}>
-        <div className={styles.InspectedElementBadgesContainer}>
+        <div className={styles.InspectedElementSection}>
           <InspectedElementBadges
             hocDisplayNames={element.hocDisplayNames}
             compiledWithForget={element.compiledWithForget}
           />
         </div>
 
-        <InspectedElementPropsTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
-
-        <InspectedElementSuspenseToggle
-          bridge={bridge}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementPropsTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementStateTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementSuspenseToggle
+            bridge={bridge}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementHooksTree
-          bridge={bridge}
-          element={element}
-          hookNames={hookNames}
-          inspectedElement={inspectedElement}
-          parseHookNames={parseHookNames}
-          store={store}
-          toggleParseHookNames={toggleParseHookNames}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementStateTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <InspectedElementContextTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementHooksTree
+            bridge={bridge}
+            element={element}
+            hookNames={hookNames}
+            inspectedElement={inspectedElement}
+            parseHookNames={parseHookNames}
+            store={store}
+            toggleParseHookNames={toggleParseHookNames}
+          />
+        </div>
 
-        {enableStyleXFeatures && (
-          <InspectedElementStyleXPlugin
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementContextTree
             bridge={bridge}
             element={element}
             inspectedElement={inspectedElement}
             store={store}
           />
+        </div>
+
+        {enableStyleXFeatures && (
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementStyleXPlugin
+              bridge={bridge}
+              element={element}
+              inspectedElement={inspectedElement}
+              store={store}
+            />
+          </div>
         )}
 
-        <InspectedElementErrorsAndWarningsTree
-          bridge={bridge}
-          element={element}
-          inspectedElement={inspectedElement}
-          store={store}
-        />
+        <div className={styles.InspectedElementSection}>
+          <InspectedElementErrorsAndWarningsTree
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        </div>
 
-        <NativeStyleEditor />
+        <div className={styles.InspectedElementSection}>
+          <NativeStyleEditor />
+        </div>
 
         {showRenderedBy && (
           <div
-            className={styles.Owners}
+            className={styles.InspectedElementSection}
             data-testname="InspectedElementView-Owners">
             <div className={styles.OwnersHeader}>rendered by</div>
 
@@ -162,10 +178,12 @@ export default function InspectedElementView({
         )}
 
         {source != null && (
-          <InspectedElementSourcePanel
-            source={source}
-            symbolicatedSourcePromise={symbolicatedSourcePromise}
-          />
+          <div className={styles.InspectedElementSection}>
+            <InspectedElementSourcePanel
+              source={source}
+              symbolicatedSourcePromise={symbolicatedSourcePromise}
+            />
+          </div>
         )}
       </div>
     </Fragment>

From 0ad0fac1dc11db8d5a6831987fb0324cd6d59498 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope1@gmail.com>
Date: Wed, 14 Aug 2024 11:04:42 -0400
Subject: [PATCH 10/40] Fix unstable_useContextWithBailout dispatcher
 assignment (#30692)

One more copy pasta fix

Assignments are unique now
```
% cat packages/react-reconciler/src/ReactFiberHooks.js | grep .unstable_useContextWithBailout
function unstable_useContextWithBailout<T>(
  (ContextOnlyDispatcher: Dispatcher).unstable_useContextWithBailout =
  (HooksDispatcherOnMount: Dispatcher).unstable_useContextWithBailout =
    unstable_useContextWithBailout;
  (HooksDispatcherOnUpdate: Dispatcher).unstable_useContextWithBailout =
    unstable_useContextWithBailout;
  (HooksDispatcherOnRerender: Dispatcher).unstable_useContextWithBailout =
    unstable_useContextWithBailout;
    (HooksDispatcherOnMountInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (HooksDispatcherOnUpdateInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (HooksDispatcherOnRerenderInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).unstable_useContextWithBailout =
        return unstable_useContextWithBailout(context, select);
```
---
 packages/react-reconciler/src/ReactFiberHooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 6e9e9b2c86ede9..f72056f674a867 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -4622,7 +4622,7 @@ if (__DEV__) {
       };
   }
   if (enableContextProfiling) {
-    (HooksDispatcherOnUpdateInDEV: Dispatcher).unstable_useContextWithBailout =
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).unstable_useContextWithBailout =
       function <T>(
         context: ReactContext<T>,
         select: (T => Array<mixed>) | null,

From 49496d493797d4df1b9496f64a6103d9a7d23968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Aug 2024 11:16:51 -0400
Subject: [PATCH 11/40] [DevTools] Support Server Components in Tree (#30684)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This adds VirtualInstances to the tree. Each Fiber has a list of its
parent Server Components in `_debugInfo`. The algorithm is that when we
enter a set of fibers, we actually traverse level 0 of all the
`_debugInfo` in each fiber. Then level 1 of each `_debugInfo` and so on.
It would be simpler if `_debugInfo` only contained Server Component
since then we could just look at the index in the array but it actually
contains other data as well which leads to multiple passes but we don't
expect it to have a lot of levels before hitting a reified fiber.
Finally when we hit the end a traverse the fiber itself.

This lets us match consecutive `ReactComponentInfo` that are all the
same at the same level. This creates a single VirtualInstance for each
sequence. This lets the same Server Component instance that's a parent
to multiple children appear as a single Instance instead of one per
Fiber.

Since a Server Component's result can be rendered in more than one place
there's not a 1:1 mapping though. If it is in different parents or if
the sequence is interrupted, then it gets split into two different
instances with the same `ReactComponentInfo` data.

The real interesting case is what happens during updates because this
algorithm means that a Fiber can become reparented during an update to
end up in a different VirtualInstance. The ideal would maybe be that the
frontend could deal with this reparenting but instead I basically just
unmount the previous instance (and its children) and mount a new
instance which leads to some interesting scenarios. This is inline with
the strategy I was intending to pursue anyway where instances are
reconciled against the previous children of the same parent instead of
the `fiberToFiberInstance` map - which would let us get rid of that map.
In that case the model is resilient to Fiber being in more than one
place at a time.

However this unmount/remount does mean that we can lose selection when
this happens. We could maybe do something like using the tracked path
like I did for component filters. Ideally it's a weird edge case though
because you'd typically not have it. The main case that it happens now
is for reorders of list of server components. In that case basically all
the children move between server components while the server components
themselves stay in place. We should really include the key in server
components so that we can reconcile them using the key to handle
reorders which would solve the common case anyway.

I convert the name to the `Env(Name)` pattern which allows the
Environment Name to be used as a badge.

<img width="1105" alt="Screenshot 2024-08-13 at 9 55 29 PM"
src="https://github.com/user-attachments/assets/323c20ba-b655-4ee8-84fa-8233f55d2999">

(Screenshot is with #30667. I haven't tried it with the alternative
fix.)

---------

Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>
---
 .../src/__tests__/inspectedElement-test.js    |  31 +
 .../src/__tests__/store-test.js               | 276 +++++++
 .../src/backend/fiber/renderer.js             | 673 +++++++++++++++---
 .../src/frontend/types.js                     |  16 +-
 packages/react-devtools-shared/src/utils.js   |   2 +
 5 files changed, 912 insertions(+), 86 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index a4cc492c83efc3..c77013aba3e71e 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -3150,4 +3150,35 @@ describe('InspectedElement', () => {
                <Child> ⚠
     `);
   });
+
+  // @reactVersion > 18.2
+  it('should inspect server components', async () => {
+    const ChildPromise = Promise.resolve(<div />);
+    ChildPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const Parent = () => ChildPromise;
+
+    await utils.actAsync(() => {
+      modernRender(<Parent />);
+    });
+
+    const inspectedElement = await inspectElementAtIndex(1);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 3,
+        "owners": null,
+        "props": null,
+        "rootType": "createRoot()",
+        "state": null,
+      }
+    `);
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index dea60778d5884f..2d3b6ed0cc0ee0 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -2212,4 +2212,280 @@ describe('Store', () => {
         `);
     });
   });
+
+  // @reactVersion > 18.2
+  it('does not show server components without any children reified children', async () => {
+    // A Server Component that doesn't render into anything on the client doesn't show up.
+    const ServerPromise = Promise.resolve(null);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => ServerPromise;
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <App>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('does show a server component that renders into a filtered node', async () => {
+    const ServerPromise = Promise.resolve(<div />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => ServerPromise;
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <ServerComponent> [Server]
+    `);
+  });
+
+  it('can render the same server component twice', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = () => (
+      <>
+        {ServerPromise}
+        <ClientComponent />
+        {ServerPromise}
+      </>
+    );
+
+    await actAsync(() => render(<App />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+            <ClientComponent>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('collapses multiple parent server components into one', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const ServerPromise2 = Promise.resolve(<ClientComponent />);
+    ServerPromise2._debugInfo = [
+      {
+        name: 'ServerComponent2',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) => (
+      <>
+        {ServerPromise}
+        {ServerPromise}
+        {ServerPromise2}
+        {initial ? null : ServerPromise2}
+      </>
+    );
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+          ▾ <ServerComponent2> [Server]
+              <ClientComponent>
+    `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+          ▾ <ServerComponent2> [Server]
+              <ClientComponent>
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('can reparent a child when the server components change', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerAB',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const ServerPromise2 = Promise.resolve(<ClientComponent />);
+    ServerPromise2._debugInfo = [
+      {
+        name: 'ServerA',
+        env: 'Server',
+        owner: null,
+      },
+      {
+        name: 'ServerB',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) => (initial ? ServerPromise : ServerPromise2);
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerAB> [Server]
+              <ClientComponent>
+    `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerA> [Server]
+            ▾ <ServerB> [Server]
+                <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('splits a server component parent when a different child appears between', async () => {
+    function ClientComponent() {
+      return <div />;
+    }
+    const ServerPromise = Promise.resolve(<ClientComponent />);
+    ServerPromise._debugInfo = [
+      {
+        name: 'ServerComponent',
+        env: 'Server',
+        owner: null,
+      },
+    ];
+    const App = ({initial}) =>
+      initial ? (
+        <>
+          {ServerPromise}
+          {null}
+          {ServerPromise}
+        </>
+      ) : (
+        <>
+          {ServerPromise}
+          <ClientComponent />
+          {ServerPromise}
+        </>
+      );
+
+    await actAsync(() => render(<App initial={true} />));
+    // Initially the Server Component only appears once because the children
+    // are consecutive.
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+              <ClientComponent>
+    `);
+
+    // Later the same instance gets split into two when it is no longer
+    // consecutive so we need two virtual instances to represent two parents.
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+            <ClientComponent>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent>
+    `);
+  });
+
+  // @reactVersion > 18.2
+  it('can reorder keyed components', async () => {
+    function ClientComponent({text}) {
+      return <div>{text}</div>;
+    }
+    function getServerComponent(key) {
+      const ServerPromise = Promise.resolve(
+        <ClientComponent key={key} text={key} />,
+      );
+      ServerPromise._debugInfo = [
+        {
+          name: 'ServerComponent',
+          env: 'Server',
+          owner: null,
+          // TODO: Ideally the debug info should include the "key" too to
+          // preserve the virtual identity of the server component when
+          // reordered. Atm only the children of it gets reparented.
+        },
+      ];
+      return ServerPromise;
+    }
+    const set1 = ['A', 'B', 'C'].map(getServerComponent);
+    const set2 = ['B', 'A', 'D'].map(getServerComponent);
+
+    const App = ({initial}) => (initial ? set1 : set2);
+
+    await actAsync(() => render(<App initial={true} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="A">
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="B">
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="C">
+      `);
+
+    await actAsync(() => render(<App initial={false} />));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="B">
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="A">
+          ▾ <ServerComponent> [Server]
+              <ClientComponent key="D">
+      `);
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 0e80ef642a3acd..18aaf33a065cad 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -26,6 +26,7 @@ import {
   ElementTypeSuspense,
   ElementTypeSuspenseList,
   ElementTypeTracingMarker,
+  ElementTypeVirtual,
   StrictMode,
 } from 'react-devtools-shared/src/frontend/types';
 import {
@@ -134,7 +135,7 @@ import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 
 // Kinds
 const FIBER_INSTANCE = 0;
-// const VIRTUAL_INSTANCE = 1;
+const VIRTUAL_INSTANCE = 1;
 
 // Flags
 const FORCE_SUSPENSE_FALLBACK = /*    */ 0b001;
@@ -197,6 +198,24 @@ type VirtualInstance = {
   data: ReactComponentInfo,
 };
 
+function createVirtualInstance(
+  debugEntry: ReactComponentInfo,
+): VirtualInstance {
+  return {
+    kind: VIRTUAL_INSTANCE,
+    id: getUID(),
+    parent: null,
+    firstChild: null,
+    previousSibling: null,
+    nextSibling: null,
+    flags: 0,
+    componentStack: null,
+    errors: null,
+    warnings: null,
+    data: debugEntry,
+  };
+}
+
 type DevToolsInstance = FiberInstance | VirtualInstance;
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
@@ -1423,10 +1442,14 @@ export function attach(
       }
     }
 
-    fiberToFiberInstanceMap.delete(fiber);
+    if (fiberToFiberInstanceMap.get(fiber) === fiberInstance) {
+      fiberToFiberInstanceMap.delete(fiber);
+    }
     const {alternate} = fiber;
     if (alternate !== null) {
-      fiberToFiberInstanceMap.delete(alternate);
+      if (fiberToFiberInstanceMap.get(alternate) === fiberInstance) {
+        fiberToFiberInstanceMap.delete(alternate);
+      }
     }
   }
 
@@ -2064,15 +2087,17 @@ export function attach(
         throw new Error('The root should have been registered at this point');
       }
       fiberInstance = entry;
-    } else if (
-      fiberToFiberInstanceMap.has(fiber) ||
-      (fiber.alternate !== null && fiberToFiberInstanceMap.has(fiber.alternate))
-    ) {
-      throw new Error('Did not expect to see this fiber being mounted twice.');
     } else {
       fiberInstance = createFiberInstance(fiber);
     }
+    // If this already exists behind a different FiberInstance, we intentionally
+    // override it here to claim the fiber as part of this new instance.
+    // E.g. if it was part of a reparenting.
     fiberToFiberInstanceMap.set(fiber, fiberInstance);
+    const alternate = fiber.alternate;
+    if (alternate !== null && fiberToFiberInstanceMap.has(alternate)) {
+      fiberToFiberInstanceMap.set(alternate, fiberInstance);
+    }
     idToDevToolsInstanceMap.set(fiberInstance.id, fiberInstance);
 
     const id = fiberInstance.id;
@@ -2081,20 +2106,21 @@ export function attach(
       debug('recordMount()', fiber, parentInstance);
     }
 
-    const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
-    // Adding a new field here would require a bridge protocol version bump (a backwads breaking change).
-    // Instead let's re-purpose a pre-existing field to carry more information.
-    let profilingFlags = 0;
-    if (isProfilingSupported) {
-      profilingFlags = PROFILING_FLAG_BASIC_SUPPORT;
-      if (typeof injectProfilingHooks === 'function') {
-        profilingFlags |= PROFILING_FLAG_TIMELINE_SUPPORT;
+    if (isRoot) {
+      const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
+
+      // Adding a new field here would require a bridge protocol version bump (a backwads breaking change).
+      // Instead let's re-purpose a pre-existing field to carry more information.
+      let profilingFlags = 0;
+      if (isProfilingSupported) {
+        profilingFlags = PROFILING_FLAG_BASIC_SUPPORT;
+        if (typeof injectProfilingHooks === 'function') {
+          profilingFlags |= PROFILING_FLAG_TIMELINE_SUPPORT;
+        }
       }
-    }
 
-    if (isRoot) {
       // Set supportsStrictMode to false for production renderer builds
       const isProductionBuildOfRenderer = renderer.bundleType === 0;
 
@@ -2184,6 +2210,53 @@ export function attach(
     return fiberInstance;
   }
 
+  function recordVirtualMount(
+    instance: VirtualInstance,
+    parentInstance: DevToolsInstance | null,
+  ): void {
+    const id = instance.id;
+
+    idToDevToolsInstanceMap.set(id, instance);
+
+    const isProfilingSupported = false; // TODO: Support Tree Base Duration Based on Children.
+
+    const key = null; // TODO: Track keys on ReactComponentInfo;
+    const env = instance.data.env;
+    let displayName = instance.data.name || '';
+    if (typeof env === 'string') {
+      // We model environment as an HoC name for now.
+      displayName = env + '(' + displayName + ')';
+    }
+    const elementType = ElementTypeVirtual;
+    // TODO: Support Virtual Owners. To do this we need to find a matching
+    // virtual instance which is not a super cheap parent traversal and so
+    // we should ideally only do that lazily. We should maybe change the
+    // frontend to get it lazily.
+    const ownerID: number = 0;
+    const parentID = parentInstance ? parentInstance.id : 0;
+
+    const displayNameStringID = getStringID(displayName);
+
+    // This check is a guard to handle a React element that has been modified
+    // in such a way as to bypass the default stringification of the "key" property.
+    const keyString = key === null ? null : String(key);
+    const keyStringID = getStringID(keyString);
+
+    pushOperation(TREE_OPERATION_ADD);
+    pushOperation(id);
+    pushOperation(elementType);
+    pushOperation(parentID);
+    pushOperation(ownerID);
+    pushOperation(displayNameStringID);
+    pushOperation(keyStringID);
+
+    if (isProfilingSupported) {
+      idToRootMap.set(id, currentRootID);
+      // TODO: Include tree base duration of children somehow.
+      // recordProfilingDurations(...);
+    }
+  }
+
   function recordUnmount(fiberInstance: FiberInstance): void {
     const fiber = fiberInstance.data;
     if (__DEBUG__) {
@@ -2261,6 +2334,15 @@ export function attach(
 
   function removeChild(instance: DevToolsInstance): void {
     if (instance.parent === null) {
+      if (remainingReconcilingChildren === instance) {
+        throw new Error(
+          'Remaining children should not have items with no parent',
+        );
+      } else if (instance.nextSibling !== null) {
+        throw new Error('A deleted instance should not have next siblings');
+      } else if (instance.previousSibling !== null) {
+        throw new Error('A deleted instance should not have previous siblings');
+      }
       // Already deleted.
       return;
     }
@@ -2302,17 +2384,142 @@ export function attach(
     }
   }
 
-  function mountChildrenRecursively(
+  function mountVirtualInstanceRecursively(
+    virtualInstance: VirtualInstance,
     firstChild: Fiber,
+    lastChild: null | Fiber, // non-inclusive
     traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): void {
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = virtualInstance;
+    previouslyReconciledSibling = null;
+    remainingReconcilingChildren = null;
+    try {
+      mountVirtualChildrenRecursively(
+        firstChild,
+        lastChild,
+        traceNearestHostComponentUpdate,
+        virtualLevel + 1,
+      );
+    } finally {
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
+    }
+  }
+
+  function recordVirtualUnmount(instance: VirtualInstance) {
+    if (trackedPathMatchFiber !== null) {
+      // We're in the process of trying to restore previous selection.
+      // TODO: Handle virtual instances on the tracked path.
+    }
+
+    const id = instance.id;
+    pendingRealUnmountedIDs.push(id);
+
+    const isProfilingSupported = false; // TODO: Profiling support.
+    if (isProfilingSupported) {
+      idToRootMap.delete(id);
+      idToTreeBaseDurationMap.delete(id);
+    }
+  }
+
+  function mountVirtualChildrenRecursively(
+    firstChild: Fiber,
+    lastChild: null | Fiber, // non-inclusive
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
   ): void {
     // Iterate over siblings rather than recursing.
     // This reduces the chance of stack overflow for wide trees (e.g. lists with many items).
     let fiber: Fiber | null = firstChild;
-    while (fiber !== null) {
-      mountFiberRecursively(fiber, traceNearestHostComponentUpdate);
+    let previousVirtualInstance: null | VirtualInstance = null;
+    let previousVirtualInstanceFirstFiber: Fiber = firstChild;
+    while (fiber !== null && fiber !== lastChild) {
+      let level = 0;
+      if (fiber._debugInfo) {
+        for (let i = 0; i < fiber._debugInfo.length; i++) {
+          const debugEntry = fiber._debugInfo[i];
+          if (typeof debugEntry.name !== 'string') {
+            // Not a Component. Some other Debug Info.
+            continue;
+          }
+          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          if (level === virtualLevel) {
+            if (
+              previousVirtualInstance === null ||
+              // Consecutive children with the same debug entry as a parent gets
+              // treated as if they share the same virtual instance.
+              previousVirtualInstance.data !== debugEntry
+            ) {
+              if (previousVirtualInstance !== null) {
+                // Mount any previous children that should go into the previous parent.
+                mountVirtualInstanceRecursively(
+                  previousVirtualInstance,
+                  previousVirtualInstanceFirstFiber,
+                  fiber,
+                  traceNearestHostComponentUpdate,
+                  virtualLevel,
+                );
+              }
+              previousVirtualInstance = createVirtualInstance(componentInfo);
+              recordVirtualMount(previousVirtualInstance, reconcilingParent);
+              insertChild(previousVirtualInstance);
+              previousVirtualInstanceFirstFiber = fiber;
+            }
+            level++;
+            break;
+          } else {
+            level++;
+          }
+        }
+      }
+      if (level === virtualLevel) {
+        if (previousVirtualInstance !== null) {
+          // If we were working on a virtual instance and this is not a virtual
+          // instance, then we end the sequence and mount any previous children
+          // that should go into the previous virtual instance.
+          mountVirtualInstanceRecursively(
+            previousVirtualInstance,
+            previousVirtualInstanceFirstFiber,
+            fiber,
+            traceNearestHostComponentUpdate,
+            virtualLevel,
+          );
+          previousVirtualInstance = null;
+        }
+        // We've reached the end of the virtual levels, but not beyond,
+        // and now continue with the regular fiber.
+        mountFiberRecursively(fiber, traceNearestHostComponentUpdate);
+      }
       fiber = fiber.sibling;
     }
+    if (previousVirtualInstance !== null) {
+      // Mount any previous children that should go into the previous parent.
+      mountVirtualInstanceRecursively(
+        previousVirtualInstance,
+        previousVirtualInstanceFirstFiber,
+        null,
+        traceNearestHostComponentUpdate,
+        virtualLevel,
+      );
+    }
+  }
+
+  function mountChildrenRecursively(
+    firstChild: Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): void {
+    mountVirtualChildrenRecursively(
+      firstChild,
+      null,
+      traceNearestHostComponentUpdate,
+      0, // first level
+    );
   }
 
   function mountFiberRecursively(
@@ -2435,6 +2642,7 @@ export function attach(
     previouslyReconciledSibling = null;
     // Move all the children of this instance to the remaining set.
     remainingReconcilingChildren = instance.firstChild;
+    instance.firstChild = null;
     try {
       // Unmount the remaining set.
       unmountRemainingChildren();
@@ -2445,6 +2653,8 @@ export function attach(
     }
     if (instance.kind === FIBER_INSTANCE) {
       recordUnmount(instance);
+    } else {
+      recordVirtualUnmount(instance);
     }
     removeChild(instance);
   }
@@ -2553,57 +2763,196 @@ export function attach(
     }
   }
 
-  // Returns whether closest unfiltered fiber parent needs to reset its child list.
-  function updateChildrenRecursively(
-    nextFirstChild: null | Fiber,
+  function updateVirtualInstanceRecursively(
+    virtualInstance: VirtualInstance,
+    nextFirstChild: Fiber,
+    nextLastChild: null | Fiber, // non-inclusive
     prevFirstChild: null | Fiber,
     traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
+  ): void {
+    const stashedParent = reconcilingParent;
+    const stashedPrevious = previouslyReconciledSibling;
+    const stashedRemaining = remainingReconcilingChildren;
+    // Push a new DevTools instance parent while reconciling this subtree.
+    reconcilingParent = virtualInstance;
+    previouslyReconciledSibling = null;
+    // Move all the children of this instance to the remaining set.
+    // We'll move them back one by one, and anything that remains is deleted.
+    remainingReconcilingChildren = virtualInstance.firstChild;
+    virtualInstance.firstChild = null;
+    try {
+      if (
+        updateVirtualChildrenRecursively(
+          nextFirstChild,
+          nextLastChild,
+          prevFirstChild,
+          traceNearestHostComponentUpdate,
+          virtualLevel + 1,
+        )
+      ) {
+        recordResetChildren(virtualInstance);
+      }
+    } finally {
+      unmountRemainingChildren();
+      reconcilingParent = stashedParent;
+      previouslyReconciledSibling = stashedPrevious;
+      remainingReconcilingChildren = stashedRemaining;
+    }
+  }
+
+  function updateVirtualChildrenRecursively(
+    nextFirstChild: Fiber,
+    nextLastChild: null | Fiber, // non-inclusive
+    prevFirstChild: null | Fiber,
+    traceNearestHostComponentUpdate: boolean,
+    virtualLevel: number, // the nth level of virtual instances
   ): boolean {
     let shouldResetChildren = false;
     // If the first child is different, we need to traverse them.
     // Each next child will be either a new child (mount) or an alternate (update).
-    let nextChild = nextFirstChild;
+    let nextChild: null | Fiber = nextFirstChild;
     let prevChildAtSameIndex = prevFirstChild;
-    while (nextChild) {
-      // We already know children will be referentially different because
-      // they are either new mounts or alternates of previous children.
-      // Schedule updates and mounts depending on whether alternates exist.
-      // We don't track deletions here because they are reported separately.
-      if (prevChildAtSameIndex === nextChild) {
-        // This set is unchanged. We're just going through it to place all the
-        // children again.
-        if (
-          updateFiberRecursively(
-            nextChild,
-            nextChild,
-            traceNearestHostComponentUpdate,
-          )
-        ) {
-          throw new Error('Updating the same fiber should not cause reorder');
+    let previousVirtualInstance: null | VirtualInstance = null;
+    let previousVirtualInstanceWasMount: boolean = false;
+    let previousVirtualInstanceNextFirstFiber: Fiber = nextFirstChild;
+    let previousVirtualInstancePrevFirstFiber: null | Fiber = prevFirstChild;
+    while (nextChild !== null && nextChild !== nextLastChild) {
+      let level = 0;
+      if (nextChild._debugInfo) {
+        for (let i = 0; i < nextChild._debugInfo.length; i++) {
+          const debugEntry = nextChild._debugInfo[i];
+          if (typeof debugEntry.name !== 'string') {
+            // Not a Component. Some other Debug Info.
+            continue;
+          }
+          const componentInfo: ReactComponentInfo = (debugEntry: any);
+          if (level === virtualLevel) {
+            if (
+              previousVirtualInstance === null ||
+              // Consecutive children with the same debug entry as a parent gets
+              // treated as if they share the same virtual instance.
+              previousVirtualInstance.data !== componentInfo
+            ) {
+              if (previousVirtualInstance !== null) {
+                // Mount any previous children that should go into the previous parent.
+                if (previousVirtualInstanceWasMount) {
+                  mountVirtualInstanceRecursively(
+                    previousVirtualInstance,
+                    previousVirtualInstanceNextFirstFiber,
+                    nextChild,
+                    traceNearestHostComponentUpdate,
+                    virtualLevel,
+                  );
+                } else {
+                  updateVirtualInstanceRecursively(
+                    previousVirtualInstance,
+                    previousVirtualInstanceNextFirstFiber,
+                    nextChild,
+                    previousVirtualInstancePrevFirstFiber,
+                    traceNearestHostComponentUpdate,
+                    virtualLevel,
+                  );
+                }
+              }
+              const firstRemainingChild = remainingReconcilingChildren;
+              if (
+                firstRemainingChild !== null &&
+                firstRemainingChild.kind === VIRTUAL_INSTANCE &&
+                firstRemainingChild.data.name === componentInfo.name &&
+                firstRemainingChild.data.env === componentInfo.env
+              ) {
+                // If the previous children had a virtual instance in the same slot
+                // with the same name, then we claim it and reuse it for this update.
+                // Update it with the latest entry.
+                firstRemainingChild.data = componentInfo;
+                moveChild(firstRemainingChild);
+                previousVirtualInstance = firstRemainingChild;
+                previousVirtualInstanceWasMount = false;
+              } else {
+                // Otherwise we create a new instance.
+                const newVirtualInstance = createVirtualInstance(componentInfo);
+                recordVirtualMount(newVirtualInstance, reconcilingParent);
+                insertChild(newVirtualInstance);
+                previousVirtualInstance = newVirtualInstance;
+                previousVirtualInstanceWasMount = true;
+                shouldResetChildren = true;
+              }
+              // Existing children might be reparented into this new virtual instance.
+              // TODO: This will cause the front end to error which needs to be fixed.
+              previousVirtualInstanceNextFirstFiber = nextChild;
+              previousVirtualInstancePrevFirstFiber = prevChildAtSameIndex;
+            }
+            level++;
+            break;
+          } else {
+            level++;
+          }
         }
-      } else if (nextChild.alternate) {
-        const prevChild = nextChild.alternate;
-        if (
-          updateFiberRecursively(
-            nextChild,
-            prevChild,
-            traceNearestHostComponentUpdate,
-          )
-        ) {
-          // If a nested tree child order changed but it can't handle its own
-          // child order invalidation (e.g. because it's filtered out like host nodes),
-          // propagate the need to reset child order upwards to this Fiber.
-          shouldResetChildren = true;
+      }
+      if (level === virtualLevel) {
+        if (previousVirtualInstance !== null) {
+          // If we were working on a virtual instance and this is not a virtual
+          // instance, then we end the sequence and update any previous children
+          // that should go into the previous virtual instance.
+          if (previousVirtualInstanceWasMount) {
+            mountVirtualInstanceRecursively(
+              previousVirtualInstance,
+              previousVirtualInstanceNextFirstFiber,
+              nextChild,
+              traceNearestHostComponentUpdate,
+              virtualLevel,
+            );
+          } else {
+            updateVirtualInstanceRecursively(
+              previousVirtualInstance,
+              previousVirtualInstanceNextFirstFiber,
+              nextChild,
+              previousVirtualInstancePrevFirstFiber,
+              traceNearestHostComponentUpdate,
+              virtualLevel,
+            );
+          }
+          previousVirtualInstance = null;
         }
-        // However we also keep track if the order of the children matches
-        // the previous order. They are always different referentially, but
-        // if the instances line up conceptually we'll want to know that.
-        if (prevChild !== prevChildAtSameIndex) {
+        // We've reached the end of the virtual levels, but not beyond,
+        // and now continue with the regular fiber.
+        if (prevChildAtSameIndex === nextChild) {
+          // This set is unchanged. We're just going through it to place all the
+          // children again.
+          if (
+            updateFiberRecursively(
+              nextChild,
+              nextChild,
+              traceNearestHostComponentUpdate,
+            )
+          ) {
+            throw new Error('Updating the same fiber should not cause reorder');
+          }
+        } else if (nextChild.alternate) {
+          const prevChild = nextChild.alternate;
+          if (
+            updateFiberRecursively(
+              nextChild,
+              prevChild,
+              traceNearestHostComponentUpdate,
+            )
+          ) {
+            // If a nested tree child order changed but it can't handle its own
+            // child order invalidation (e.g. because it's filtered out like host nodes),
+            // propagate the need to reset child order upwards to this Fiber.
+            shouldResetChildren = true;
+          }
+          // However we also keep track if the order of the children matches
+          // the previous order. They are always different referentially, but
+          // if the instances line up conceptually we'll want to know that.
+          if (prevChild !== prevChildAtSameIndex) {
+            shouldResetChildren = true;
+          }
+        } else {
+          mountFiberRecursively(nextChild, traceNearestHostComponentUpdate);
           shouldResetChildren = true;
         }
-      } else {
-        mountFiberRecursively(nextChild, traceNearestHostComponentUpdate);
-        shouldResetChildren = true;
       }
       // Try the next child.
       nextChild = nextChild.sibling;
@@ -2613,6 +2962,26 @@ export function attach(
         prevChildAtSameIndex = prevChildAtSameIndex.sibling;
       }
     }
+    if (previousVirtualInstance !== null) {
+      if (previousVirtualInstanceWasMount) {
+        mountVirtualInstanceRecursively(
+          previousVirtualInstance,
+          previousVirtualInstanceNextFirstFiber,
+          null,
+          traceNearestHostComponentUpdate,
+          virtualLevel,
+        );
+      } else {
+        updateVirtualInstanceRecursively(
+          previousVirtualInstance,
+          previousVirtualInstanceNextFirstFiber,
+          null,
+          previousVirtualInstancePrevFirstFiber,
+          traceNearestHostComponentUpdate,
+          virtualLevel,
+        );
+      }
+    }
     // If we have no more children, but used to, they don't line up.
     if (prevChildAtSameIndex !== null) {
       shouldResetChildren = true;
@@ -2620,6 +2989,24 @@ export function attach(
     return shouldResetChildren;
   }
 
+  // Returns whether closest unfiltered fiber parent needs to reset its child list.
+  function updateChildrenRecursively(
+    nextFirstChild: null | Fiber,
+    prevFirstChild: null | Fiber,
+    traceNearestHostComponentUpdate: boolean,
+  ): boolean {
+    if (nextFirstChild === null) {
+      return prevFirstChild !== null;
+    }
+    return updateVirtualChildrenRecursively(
+      nextFirstChild,
+      null,
+      prevFirstChild,
+      traceNearestHostComponentUpdate,
+      0,
+    );
+  }
+
   // Returns whether closest unfiltered fiber parent needs to reset its child list.
   function updateFiberRecursively(
     nextFiber: Fiber,
@@ -2659,18 +3046,29 @@ export function attach(
     const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
     if (shouldIncludeInTree) {
       const entry = fiberToFiberInstanceMap.get(prevFiber);
-      if (entry === undefined) {
-        throw new Error(
-          'The previous version of the fiber should have already been registered.',
-        );
-      }
-      fiberInstance = entry;
-      // Register the new alternate in case it's not already in.
-      fiberToFiberInstanceMap.set(nextFiber, fiberInstance);
+      if (entry !== undefined && entry.parent === reconcilingParent) {
+        // Common case. Match in the same parent.
+        fiberInstance = entry;
+        // Register the new alternate in case it's not already in.
+        fiberToFiberInstanceMap.set(nextFiber, fiberInstance);
+
+        // Update the Fiber so we that we always keep the current Fiber on the data.
+        fiberInstance.data = nextFiber;
+        moveChild(fiberInstance);
+      } else {
+        // It's possible for a FiberInstance to be reparented when virtual parents
+        // get their sequence split or change structure with the same render result.
+        // In this case we unmount the and remount the FiberInstances.
+        // This might cause us to lose the selection but it's an edge case.
 
-      // Update the Fiber so we that we always keep the current Fiber on the data.
-      fiberInstance.data = nextFiber;
-      moveChild(fiberInstance);
+        // We let the previous instance remain in the "remaining queue" it is
+        // in to be deleted at the end since it'll have no match.
+
+        mountFiberRecursively(nextFiber, traceNearestHostComponentUpdate);
+
+        // Need to mark the parent set to remount the new instance.
+        return true;
+      }
 
       if (
         mostRecentlyInspectedElement !== null &&
@@ -3615,12 +4013,16 @@ export function attach(
       console.warn(`Could not find DevToolsInstance with id "${id}"`);
       return null;
     }
-    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
-      // TODO: Handle VirtualInstance.
-      return null;
+    if (devtoolsInstance.kind === VIRTUAL_INSTANCE) {
+      return inspectVirtualInstanceRaw(devtoolsInstance);
     }
-    const fiber =
-      findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
+    return inspectFiberInstanceRaw(devtoolsInstance);
+  }
+
+  function inspectFiberInstanceRaw(
+    fiberInstance: FiberInstance,
+  ): InspectedElement | null {
+    const fiber = findCurrentFiberUsingSlowPathByFiberInstance(fiberInstance);
     if (fiber == null) {
       return null;
     }
@@ -3823,8 +4225,10 @@ export function attach(
       const DidCapture = 0b000000000000000000010000000;
       isErrored =
         (fiber.flags & DidCapture) !== 0 ||
-        (devtoolsInstance.flags & FORCE_ERROR) !== 0;
-      targetErrorBoundaryID = isErrored ? id : getNearestErrorBoundaryID(fiber);
+        (fiberInstance.flags & FORCE_ERROR) !== 0;
+      targetErrorBoundaryID = isErrored
+        ? fiberInstance.id
+        : getNearestErrorBoundaryID(fiber);
     } else {
       targetErrorBoundaryID = getNearestErrorBoundaryID(fiber);
     }
@@ -3845,7 +4249,7 @@ export function attach(
     }
 
     return {
-      id,
+      id: fiberInstance.id,
 
       // Does the current renderer support editable hooks and function props?
       canEditHooks: typeof overrideHookState === 'function',
@@ -3872,7 +4276,7 @@ export function attach(
         (!isTimedOutSuspense ||
           // If it's showing fallback because we previously forced it to,
           // allow toggling it back to remove the fallback override.
-          (devtoolsInstance.flags & FORCE_SUSPENSE_FALLBACK) !== 0),
+          (fiberInstance.flags & FORCE_SUSPENSE_FALLBACK) !== 0),
 
       // Can view component source location.
       canViewSource,
@@ -3893,13 +4297,112 @@ export function attach(
       props: memoizedProps,
       state: showState ? memoizedState : null,
       errors:
-        devtoolsInstance.errors === null
+        fiberInstance.errors === null
+          ? []
+          : Array.from(fiberInstance.errors.entries()),
+      warnings:
+        fiberInstance.warnings === null
+          ? []
+          : Array.from(fiberInstance.warnings.entries()),
+
+      // List of owners
+      owners,
+
+      rootType,
+      rendererPackageName: renderer.rendererPackageName,
+      rendererVersion: renderer.version,
+
+      plugins,
+    };
+  }
+
+  function inspectVirtualInstanceRaw(
+    virtualInstance: VirtualInstance,
+  ): InspectedElement | null {
+    const canViewSource = false;
+
+    const key = null; // TODO: Track keys on ReactComponentInfo;
+    const props = null; // TODO: Track props on ReactComponentInfo;
+
+    const env = virtualInstance.data.env;
+    let displayName = virtualInstance.data.name || '';
+    if (typeof env === 'string') {
+      // We model environment as an HoC name for now.
+      displayName = env + '(' + displayName + ')';
+    }
+
+    // TODO: Support Virtual Owners.
+    const owners: null | Array<SerializedElement> = null;
+
+    let rootType = null;
+    let targetErrorBoundaryID = null;
+    let parent = virtualInstance.parent;
+    while (parent !== null) {
+      if (parent.kind === FIBER_INSTANCE) {
+        targetErrorBoundaryID = getNearestErrorBoundaryID(parent.data);
+        let current = parent.data;
+        while (current.return !== null) {
+          current = current.return;
+        }
+        const fiberRoot = current.stateNode;
+        if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+          rootType = fiberRoot._debugRootType;
+        }
+        break;
+      }
+      parent = parent.parent;
+    }
+
+    const plugins: Plugins = {
+      stylex: null,
+    };
+
+    // TODO: Support getting the source location from the owner stack.
+    const source = null;
+
+    return {
+      id: virtualInstance.id,
+
+      canEditHooks: false,
+      canEditFunctionProps: false,
+
+      canEditHooksAndDeletePaths: false,
+      canEditHooksAndRenamePaths: false,
+      canEditFunctionPropsDeletePaths: false,
+      canEditFunctionPropsRenamePaths: false,
+
+      canToggleError: supportsTogglingError && targetErrorBoundaryID != null,
+      isErrored: false,
+      targetErrorBoundaryID,
+
+      canToggleSuspense: supportsTogglingSuspense,
+
+      // Can view component source location.
+      canViewSource,
+      source,
+
+      // Does the component have legacy context attached to it.
+      hasLegacyContext: false,
+
+      key: key != null ? key : null,
+
+      displayName: displayName,
+      type: ElementTypeVirtual,
+
+      // Inspectable properties.
+      // TODO Review sanitization approach for the below inspectable values.
+      context: null,
+      hooks: null,
+      props: props,
+      state: null,
+      errors:
+        virtualInstance.errors === null
           ? []
-          : Array.from(devtoolsInstance.errors.entries()),
+          : Array.from(virtualInstance.errors.entries()),
       warnings:
-        devtoolsInstance.warnings === null
+        virtualInstance.warnings === null
           ? []
-          : Array.from(devtoolsInstance.warnings.entries()),
+          : Array.from(virtualInstance.warnings.entries()),
 
       // List of owners
       owners,
diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js
index b2e7357970d00a..05fa9e93333819 100644
--- a/packages/react-devtools-shared/src/frontend/types.js
+++ b/packages/react-devtools-shared/src/frontend/types.js
@@ -48,11 +48,25 @@ export const ElementTypeRoot = 11;
 export const ElementTypeSuspense = 12;
 export const ElementTypeSuspenseList = 13;
 export const ElementTypeTracingMarker = 14;
+export const ElementTypeVirtual = 15;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,
 // or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
+export type ElementType =
+  | 1
+  | 2
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15;
 
 // WARNING
 // The values below are referenced by ComponentFilters (which are saved via localStorage).
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index ffbc9e390d5a46..8e6f52f6c0f8aa 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -66,6 +66,7 @@ import {
   ElementTypeForwardRef,
   ElementTypeFunction,
   ElementTypeMemo,
+  ElementTypeVirtual,
 } from 'react-devtools-shared/src/frontend/types';
 import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
@@ -484,6 +485,7 @@ export function parseElementDisplayNameFromBackend(
     case ElementTypeForwardRef:
     case ElementTypeFunction:
     case ElementTypeMemo:
+    case ElementTypeVirtual:
       if (displayName.indexOf('(') >= 0) {
         const matches = displayName.match(/[^()]+/g);
         if (matches != null) {

From e0a0e65412cfa00e959fbef0f6c3a0c73725f0a3 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@vercel.com>
Date: Wed, 14 Aug 2024 19:22:44 +0200
Subject: [PATCH 12/40] Move `react-html` to `react-markup` (#30688)

---
 .../forks/ReactFlightClientConfig.markup.js   |  2 +-
 packages/react-html/npm/index.js              |  7 ----
 .../react-html/npm/react-html.react-server.js |  7 ----
 .../{react-html => react-markup}/README.md    | 10 +++---
 .../{react-html => react-markup}/index.js     |  2 +-
 packages/react-markup/npm/index.js            |  7 ++++
 .../npm/react-markup.react-server.js          |  7 ++++
 .../{react-html => react-markup}/package.json |  8 ++---
 .../react-markup.react-server.js}             |  2 +-
 .../src/ReactFizzConfigMarkup.js}             |  0
 .../src/ReactMarkupClient.js}                 |  2 +-
 .../src/ReactMarkupClient.stable.js}          |  2 +-
 .../ReactMarkupLegacyClientStreamConfig.js}   |  0
 .../src/ReactMarkupServer.js}                 |  2 +-
 .../src/ReactMarkupServer.stable.js}          |  2 +-
 .../src/__tests__/ReactMarkupClient-test.js}  | 28 +++++++--------
 .../src/__tests__/ReactMarkupServer-test.js}  | 36 +++++++++----------
 .../src/forks/ReactFiberConfig.markup.js      |  2 +-
 .../src/forks/ReactFizzConfig.markup.js       |  2 +-
 scripts/error-codes/codes.json                |  4 +--
 scripts/rollup/bundles.js                     | 12 +++----
 scripts/rollup/forks.js                       |  8 ++---
 scripts/shared/inlinedHostConfigs.js          |  6 ++--
 23 files changed, 79 insertions(+), 79 deletions(-)
 delete mode 100644 packages/react-html/npm/index.js
 delete mode 100644 packages/react-html/npm/react-html.react-server.js
 rename packages/{react-html => react-markup}/README.md (84%)
 rename packages/{react-html => react-markup}/index.js (83%)
 create mode 100644 packages/react-markup/npm/index.js
 create mode 100644 packages/react-markup/npm/react-markup.react-server.js
 rename packages/{react-html => react-markup}/package.json (81%)
 rename packages/{react-html/react-html.react-server.js => react-markup/react-markup.react-server.js} (83%)
 rename packages/{react-html/src/ReactFizzConfigHTML.js => react-markup/src/ReactFizzConfigMarkup.js} (100%)
 rename packages/{react-html/src/ReactHTMLClient.js => react-markup/src/ReactMarkupClient.js} (98%)
 rename packages/{react-html/src/ReactHTMLClient.stable.js => react-markup/src/ReactMarkupClient.stable.js} (80%)
 rename packages/{react-html/src/ReactHTMLLegacyClientStreamConfig.js => react-markup/src/ReactMarkupLegacyClientStreamConfig.js} (100%)
 rename packages/{react-html/src/ReactHTMLServer.js => react-markup/src/ReactMarkupServer.js} (99%)
 rename packages/{react-html/src/ReactHTMLServer.stable.js => react-markup/src/ReactMarkupServer.stable.js} (80%)
 rename packages/{react-html/src/__tests__/ReactHTMLClient-test.js => react-markup/src/__tests__/ReactMarkupClient-test.js} (88%)
 rename packages/{react-html/src/__tests__/ReactHTMLServer-test.js => react-markup/src/__tests__/ReactMarkupServer-test.js} (87%)

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
index 8e91e3a8062fd8..b8002483d81aaa 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
@@ -9,7 +9,7 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 
-export * from 'react-html/src/ReactHTMLLegacyClientStreamConfig.js';
+export * from 'react-markup/src/ReactMarkupLegacyClientStreamConfig.js';
 export * from 'react-client/src/ReactClientConsoleConfigPlain';
 
 export type ModuleLoading = null;
diff --git a/packages/react-html/npm/index.js b/packages/react-html/npm/index.js
deleted file mode 100644
index 753fdef93e42d8..00000000000000
--- a/packages/react-html/npm/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-html.production.js');
-} else {
-  module.exports = require('./cjs/react-html.development.js');
-}
diff --git a/packages/react-html/npm/react-html.react-server.js b/packages/react-html/npm/react-html.react-server.js
deleted file mode 100644
index be2af1e0c58382..00000000000000
--- a/packages/react-html/npm/react-html.react-server.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-html.react-server.production.js');
-} else {
-  module.exports = require('./cjs/react-html.react-server.development.js');
-}
diff --git a/packages/react-html/README.md b/packages/react-markup/README.md
similarity index 84%
rename from packages/react-html/README.md
rename to packages/react-markup/README.md
index c0794aac104c51..0498648303e8a5 100644
--- a/packages/react-html/README.md
+++ b/packages/react-markup/README.md
@@ -1,17 +1,17 @@
-# `react-html`
+# `react-markup`
 
 This package provides the ability to render standalone HTML from Server Components for use in embedded contexts such as e-mails and RSS/Atom feeds. It cannot use Client Components and does not hydrate. It is intended to be paired with the generic React package, which is shipped as `react` to npm.
 
 ## Installation
 
 ```sh
-npm install react react-html
+npm install react react-markup
 ```
 
 ## Usage
 
 ```js
-import { renderToMarkup } from 'react-html';
+import { renderToMarkup } from 'react-markup';
 import EmailTemplate from './my-email-template-component.js'
 
 async function action(email, name) {
@@ -27,6 +27,6 @@ Note that this is an async function that needs to be awaited - unlike the legacy
 
 ## API
 
-### `react-html`
+### `react-markup`
 
-See https://react.dev/reference/react-html
+See https://react.dev/reference/react-markup
diff --git a/packages/react-html/index.js b/packages/react-markup/index.js
similarity index 83%
rename from packages/react-html/index.js
rename to packages/react-markup/index.js
index 01e5f5e51b08c2..1e53a27a696146 100644
--- a/packages/react-html/index.js
+++ b/packages/react-markup/index.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactHTMLClient';
+export * from './src/ReactMarkupClient';
diff --git a/packages/react-markup/npm/index.js b/packages/react-markup/npm/index.js
new file mode 100644
index 00000000000000..e0f4dd058f640d
--- /dev/null
+++ b/packages/react-markup/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-markup.production.js');
+} else {
+  module.exports = require('./cjs/react-markup.development.js');
+}
diff --git a/packages/react-markup/npm/react-markup.react-server.js b/packages/react-markup/npm/react-markup.react-server.js
new file mode 100644
index 00000000000000..08e140b407ce05
--- /dev/null
+++ b/packages/react-markup/npm/react-markup.react-server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-markup.react-server.production.js');
+} else {
+  module.exports = require('./cjs/react-markup.react-server.development.js');
+}
diff --git a/packages/react-html/package.json b/packages/react-markup/package.json
similarity index 81%
rename from packages/react-html/package.json
rename to packages/react-markup/package.json
index 92dfc38512338a..f0b98c7a8ab679 100644
--- a/packages/react-html/package.json
+++ b/packages/react-markup/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-html",
+  "name": "react-markup",
   "version": "19.0.0",
   "private": true,
   "description": "React package generating embedded HTML markup such as e-mails using Server Components.",
@@ -7,7 +7,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
-    "directory": "packages/react-html"
+    "directory": "packages/react-markup"
   },
   "keywords": [
     "react"
@@ -24,12 +24,12 @@
     "LICENSE",
     "README.md",
     "index.js",
-    "react-html.react-server.js",
+    "react-markup.react-server.js",
     "cjs/"
   ],
   "exports": {
     ".": {
-      "react-server": "./react-html.react-server.js",
+      "react-server": "./react-markup.react-server.js",
       "default": "./index.js"
     },
     "./src/*": "./src/*",
diff --git a/packages/react-html/react-html.react-server.js b/packages/react-markup/react-markup.react-server.js
similarity index 83%
rename from packages/react-html/react-html.react-server.js
rename to packages/react-markup/react-markup.react-server.js
index fb30cd42008365..4b74acd707c142 100644
--- a/packages/react-html/react-html.react-server.js
+++ b/packages/react-markup/react-markup.react-server.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactHTMLServer';
+export * from './src/ReactMarkupServer';
diff --git a/packages/react-html/src/ReactFizzConfigHTML.js b/packages/react-markup/src/ReactFizzConfigMarkup.js
similarity index 100%
rename from packages/react-html/src/ReactFizzConfigHTML.js
rename to packages/react-markup/src/ReactFizzConfigMarkup.js
diff --git a/packages/react-html/src/ReactHTMLClient.js b/packages/react-markup/src/ReactMarkupClient.js
similarity index 98%
rename from packages/react-html/src/ReactHTMLClient.js
rename to packages/react-markup/src/ReactMarkupClient.js
index e12b76356ef02b..66b69df99bb18c 100644
--- a/packages/react-html/src/ReactHTMLClient.js
+++ b/packages/react-markup/src/ReactMarkupClient.js
@@ -23,7 +23,7 @@ import {
   createResumableState,
   createRenderState,
   createRootFormatContext,
-} from './ReactFizzConfigHTML';
+} from './ReactFizzConfigMarkup';
 
 type MarkupOptions = {
   identifierPrefix?: string,
diff --git a/packages/react-html/src/ReactHTMLClient.stable.js b/packages/react-markup/src/ReactMarkupClient.stable.js
similarity index 80%
rename from packages/react-html/src/ReactHTMLClient.stable.js
rename to packages/react-markup/src/ReactMarkupClient.stable.js
index 0874c2b7af8770..b4aec8f7600204 100644
--- a/packages/react-html/src/ReactHTMLClient.stable.js
+++ b/packages/react-markup/src/ReactMarkupClient.stable.js
@@ -8,4 +8,4 @@
  */
 
 // eslint-disable-next-line react-internal/prod-error-codes
-throw new Error('react-html should not get built in stable');
+throw new Error('react-markup should not get built in stable');
diff --git a/packages/react-html/src/ReactHTMLLegacyClientStreamConfig.js b/packages/react-markup/src/ReactMarkupLegacyClientStreamConfig.js
similarity index 100%
rename from packages/react-html/src/ReactHTMLLegacyClientStreamConfig.js
rename to packages/react-markup/src/ReactMarkupLegacyClientStreamConfig.js
diff --git a/packages/react-html/src/ReactHTMLServer.js b/packages/react-markup/src/ReactMarkupServer.js
similarity index 99%
rename from packages/react-html/src/ReactHTMLServer.js
rename to packages/react-markup/src/ReactMarkupServer.js
index b5238ca45fd73c..7cbab9d430ec6f 100644
--- a/packages/react-html/src/ReactHTMLServer.js
+++ b/packages/react-markup/src/ReactMarkupServer.js
@@ -41,7 +41,7 @@ import {
   createResumableState,
   createRenderState,
   createRootFormatContext,
-} from './ReactFizzConfigHTML';
+} from './ReactFizzConfigMarkup';
 
 type ReactMarkupNodeList =
   // This is the intersection of ReactNodeList and ReactClientValue minus
diff --git a/packages/react-html/src/ReactHTMLServer.stable.js b/packages/react-markup/src/ReactMarkupServer.stable.js
similarity index 80%
rename from packages/react-html/src/ReactHTMLServer.stable.js
rename to packages/react-markup/src/ReactMarkupServer.stable.js
index 0874c2b7af8770..b4aec8f7600204 100644
--- a/packages/react-html/src/ReactHTMLServer.stable.js
+++ b/packages/react-markup/src/ReactMarkupServer.stable.js
@@ -8,4 +8,4 @@
  */
 
 // eslint-disable-next-line react-internal/prod-error-codes
-throw new Error('react-html should not get built in stable');
+throw new Error('react-markup should not get built in stable');
diff --git a/packages/react-html/src/__tests__/ReactHTMLClient-test.js b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
similarity index 88%
rename from packages/react-html/src/__tests__/ReactHTMLClient-test.js
rename to packages/react-markup/src/__tests__/ReactMarkupClient-test.js
index 5fb0a55acc8d8f..186a1baf7b3b36 100644
--- a/packages/react-html/src/__tests__/ReactHTMLClient-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let React;
-let ReactHTML;
+let ReactMarkup;
 
 function normalizeCodeLocInfo(str) {
   return (
@@ -24,18 +24,18 @@ function normalizeCodeLocInfo(str) {
 if (!__EXPERIMENTAL__) {
   it('should not be built in stable', () => {
     try {
-      require('react-html');
+      require('react-markup');
     } catch (x) {
       return;
     }
-    throw new Error('Expected react-html not to exist in stable.');
+    throw new Error('Expected react-markup not to exist in stable.');
   });
 } else {
-  describe('ReactHTML', () => {
+  describe('ReactMarkup', () => {
     beforeEach(() => {
       jest.resetModules();
       React = require('react');
-      ReactHTML = require('react-html');
+      ReactMarkup = require('react-markup');
     });
 
     it('should be able to render a simple component', async () => {
@@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) {
         return <div>hello world</div>;
       }
 
-      const html = await ReactHTML.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToMarkup(<Component />);
       expect(html).toBe('<div>hello world</div>');
     });
 
@@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
         return <div>{'hello '.repeat(200)}world</div>;
       }
 
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         <html>
           <body>hello</body>
         </html>,
@@ -76,7 +76,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(<Component />);
+        await ReactMarkup.renderToMarkup(<Component />);
       }).rejects.toThrow();
     });
 
@@ -87,7 +87,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(<Component />);
+        await ReactMarkup.renderToMarkup(<Component />);
       }).rejects.toThrow();
     });
 
@@ -100,7 +100,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(<Component />);
+        await ReactMarkup.renderToMarkup(<Component />);
       }).rejects.toThrow();
     });
 
@@ -142,7 +142,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactHTML.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToMarkup(<Component />);
       const container = document.createElement('div');
       container.innerHTML = html;
 
@@ -176,7 +176,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactHTML.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToMarkup(<Component />);
       expect(html).toBe('<div>01</div>');
     });
 
@@ -199,7 +199,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(
+        await ReactMarkup.renderToMarkup(
           <div>
             <Foo />
           </div>,
diff --git a/packages/react-html/src/__tests__/ReactHTMLServer-test.js b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
similarity index 87%
rename from packages/react-html/src/__tests__/ReactHTMLServer-test.js
rename to packages/react-markup/src/__tests__/ReactMarkupServer-test.js
index 98678083d54d5d..350f765c1715ea 100644
--- a/packages/react-html/src/__tests__/ReactHTMLServer-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
@@ -13,7 +13,7 @@ global.TextDecoder = require('util').TextDecoder;
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
-let ReactHTML;
+let ReactMarkup;
 
 function normalizeCodeLocInfo(str) {
   return (
@@ -27,34 +27,34 @@ function normalizeCodeLocInfo(str) {
 if (!__EXPERIMENTAL__) {
   it('should not be built in stable', () => {
     try {
-      require('react-html');
+      require('react-markup');
     } catch (x) {
       return;
     }
-    throw new Error('Expected react-html not to exist in stable.');
+    throw new Error('Expected react-markup not to exist in stable.');
   });
 } else {
-  describe('ReactHTML', () => {
+  describe('ReactMarkup', () => {
     beforeEach(() => {
       jest.resetModules();
       // We run in the react-server condition.
       jest.mock('react', () => require('react/react.react-server'));
       if (__EXPERIMENTAL__) {
-        jest.mock('react-html', () =>
-          require('react-html/react-html.react-server'),
+        jest.mock('react-markup', () =>
+          require('react-markup/react-markup.react-server'),
         );
       }
 
       React = require('react');
       if (__EXPERIMENTAL__) {
-        ReactHTML = require('react-html');
+        ReactMarkup = require('react-markup');
       } else {
         try {
-          require('react-html/react-html.react-server');
+          require('react-markup/react-markup.react-server');
         } catch (x) {
           return;
         }
-        throw new Error('Expected react-html not to exist in stable.');
+        throw new Error('Expected react-markup not to exist in stable.');
       }
     });
 
@@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello world');
       }
 
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         React.createElement(Component),
       );
       expect(html).toBe('<div>hello world</div>');
@@ -76,14 +76,14 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello '.repeat(200) + 'world');
       }
 
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         // We can't use JSX because that's client-JSX in our tests.
         React.createElement(
           'html',
@@ -104,7 +104,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToMarkup(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -116,7 +116,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToMarkup(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -130,7 +130,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToMarkup(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -173,7 +173,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         React.createElement(Component),
       );
       const container = document.createElement('div');
@@ -204,7 +204,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, a, b);
       }
 
-      const html = await ReactHTML.renderToMarkup(
+      const html = await ReactMarkup.renderToMarkup(
         React.createElement(Component),
       );
       expect(html).toBe('<div>00</div>');
@@ -225,7 +225,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactHTML.renderToMarkup(
+        await ReactMarkup.renderToMarkup(
           React.createElement('div', null, React.createElement(Foo)),
           {
             onError(error, errorInfo) {
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js b/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js
index 9f70eeb70e5bce..88d0c020bbe025 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.markup.js
@@ -13,4 +13,4 @@ export * from 'react-dom-bindings/src/client/ReactFiberConfigDOM';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 
 // eslint-disable-next-line react-internal/prod-error-codes
-throw new Error('Fiber is not used in react-html');
+throw new Error('Fiber is not used in react-markup');
diff --git a/packages/react-server/src/forks/ReactFizzConfig.markup.js b/packages/react-server/src/forks/ReactFizzConfig.markup.js
index 15e35a2ef0b976..ed3fa90ff1532a 100644
--- a/packages/react-server/src/forks/ReactFizzConfig.markup.js
+++ b/packages/react-server/src/forks/ReactFizzConfig.markup.js
@@ -8,7 +8,7 @@
  */
 import type {Request} from 'react-server/src/ReactFizzServer';
 
-export * from 'react-html/src/ReactFizzConfigHTML.js';
+export * from 'react-markup/src/ReactFizzConfigMarkup.js';
 
 export * from 'react-client/src/ReactClientConsoleConfigPlain';
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index ba4fb4fa284280..b1286a7daf7c05 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -516,7 +516,7 @@
   "528": "Expected <link> not to update to be updated to a stylesheet with precedence. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
   "529": "Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
   "530": "The render was aborted by the server with a promise.",
-  "531": "react-html is not supported outside a React Server Components environment.",
+  "531": "react-markup is not supported outside a React Server Components environment.",
   "532": "Attempted to render a Client Component from renderToMarkup. This is not supported since it will never hydrate. Only render Server Components with renderToMarkup.",
   "533": "Attempted to render a Server Action from renderToMarkup. This is not supported since it varies by version of the app. Use a fixed URL for any forms instead.",
   "534": "renderToMarkup should not have emitted Client References. This is a bug in React.",
@@ -527,4 +527,4 @@
   "539": "Binary RSC chunks cannot be encoded as strings. This is a bug in the wiring of the React streams.",
   "540": "String chunks need to be passed in their original shape. Not split into smaller string chunks. This is a bug in the wiring of the React streams.",
   "541": "Compared context values must be arrays"
-}
\ No newline at end of file
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index d17db8976390e3..2b7841fc732f95 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -367,10 +367,10 @@ const bundles = [
   {
     bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
     moduleType: RENDERER,
-    entry: 'react-html/src/ReactHTMLServer.js',
-    name: 'react-html.react-server',
+    entry: 'react-markup/src/ReactMarkupServer.js',
+    name: 'react-markup.react-server',
     condition: 'react-server',
-    global: 'ReactHTML',
+    global: 'ReactMarkup',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
@@ -380,9 +380,9 @@ const bundles = [
   {
     bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
     moduleType: RENDERER,
-    entry: 'react-html/src/ReactHTMLClient.js',
-    name: 'react-html',
-    global: 'ReactHTML',
+    entry: 'react-markup/src/ReactMarkupClient.js',
+    name: 'react-markup',
+    global: 'ReactMarkup',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 9dcbc6c0b77a50..8539ce7f7cc03b 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -65,8 +65,8 @@ const forks = Object.freeze({
     if (entry === 'react/src/ReactServer.js') {
       return './packages/react/src/ReactSharedInternalsServer.js';
     }
-    if (entry === 'react-html/src/ReactHTMLServer.js') {
-      // Inside the ReactHTMLServer render we don't refer to any shared internals
+    if (entry === 'react-markup/src/ReactMarkupServer.js') {
+      // Inside the ReactMarkupServer render we don't refer to any shared internals
       // but instead use our own internal copy of the state because you cannot use
       // any of this state from a component anyway. E.g. you can't use a client hook.
       return './packages/react/src/ReactSharedInternalsClient.js';
@@ -100,8 +100,8 @@ const forks = Object.freeze({
       entry === 'react-dom/src/ReactDOMFB.js' ||
       entry === 'react-dom/src/ReactDOMTestingFB.js' ||
       entry === 'react-dom/src/ReactDOMServer.js' ||
-      entry === 'react-html/src/ReactHTMLClient.js' ||
-      entry === 'react-html/src/ReactHTMLServer.js'
+      entry === 'react-markup/src/ReactMarkupClient.js' ||
+      entry === 'react-markup/src/ReactMarkupServer.js'
     ) {
       if (
         bundleType === FB_WWW_DEV ||
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index b9d6b22f4f019a..ef27610f06471b 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -444,14 +444,14 @@ module.exports = [
   {
     shortName: 'markup',
     entryPoints: [
-      'react-html/src/ReactHTMLClient.js', // react-html
-      'react-html/src/ReactHTMLServer.js', // react-html/react-html.react-server
+      'react-markup/src/ReactMarkupClient.js', // react-markup
+      'react-markup/src/ReactMarkupServer.js', // react-markup/react-markup.react-server
     ],
     paths: [
       'react-dom',
       'react-dom/src/ReactDOMReactServer.js',
       'react-dom-bindings',
-      'react-html',
+      'react-markup',
       'shared/ReactDOMSharedInternals',
     ],
     isFlowTyped: true,

From 5c9243d1537ee7bc32f6f2a1e4bd35bbb491a0f5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@vercel.com>
Date: Wed, 14 Aug 2024 19:35:16 +0200
Subject: [PATCH 13/40] Rename `renderToMarkup` to `renderToHTML` (#30689)

---
 .../forks/ReactFlightClientConfig.markup.js    |  8 ++++----
 packages/react-markup/README.md                |  4 ++--
 .../react-markup/src/ReactFizzConfigMarkup.js  |  4 ++--
 packages/react-markup/src/ReactMarkupClient.js |  2 +-
 packages/react-markup/src/ReactMarkupServer.js |  4 ++--
 .../src/__tests__/ReactMarkupClient-test.js    | 18 +++++++++---------
 .../src/__tests__/ReactMarkupServer-test.js    | 18 +++++++++---------
 packages/react-server/src/ReactFizzHooks.js    |  2 +-
 .../forks/ReactFlightServerConfig.markup.js    | 12 ++++++------
 scripts/error-codes/codes.json                 | 14 +++++++-------
 10 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
index b8002483d81aaa..a90acefccba390 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.markup.js
@@ -25,7 +25,7 @@ export function prepareDestinationForModule(
   metadata: ClientReferenceMetadata,
 ) {
   throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
   );
 }
 
@@ -34,7 +34,7 @@ export function resolveClientReference<T>(
   metadata: ClientReferenceMetadata,
 ): ClientReference<T> {
   throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
   );
 }
 
@@ -43,7 +43,7 @@ export function resolveServerReference<T>(
   id: ServerReferenceId,
 ): ClientReference<T> {
   throw new Error(
-    'renderToMarkup should not have emitted Server References. This is a bug in React.',
+    'renderToHTML should not have emitted Server References. This is a bug in React.',
   );
 }
 
@@ -55,7 +55,7 @@ export function preloadModule<T>(
 
 export function requireModule<T>(metadata: ClientReference<T>): T {
   throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+    'renderToHTML should not have emitted Client References. This is a bug in React.',
   );
 }
 
diff --git a/packages/react-markup/README.md b/packages/react-markup/README.md
index 0498648303e8a5..103e656f8aa1e7 100644
--- a/packages/react-markup/README.md
+++ b/packages/react-markup/README.md
@@ -11,13 +11,13 @@ npm install react react-markup
 ## Usage
 
 ```js
-import { renderToMarkup } from 'react-markup';
+import { renderToHTML } from 'react-markup';
 import EmailTemplate from './my-email-template-component.js'
 
 async function action(email, name) {
   "use server";
   // ... in your server, e.g. a Server Action...
-  const htmlString = await renderToMarkup(<EmailTemplate name={name} />);
+  const htmlString = await renderToHTML(<EmailTemplate name={name} />);
   // ... send e-mail using some e-mail provider
   await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
 }
diff --git a/packages/react-markup/src/ReactFizzConfigMarkup.js b/packages/react-markup/src/ReactFizzConfigMarkup.js
index 0be7abe8bb0ad0..6b43d0bad39a71 100644
--- a/packages/react-markup/src/ReactFizzConfigMarkup.js
+++ b/packages/react-markup/src/ReactFizzConfigMarkup.js
@@ -95,14 +95,14 @@ export function pushStartInstance(
       const propValue = props[propKey];
       if (propKey === 'ref' && propValue != null) {
         throw new Error(
-          'Cannot pass ref in renderToMarkup because they will never be hydrated.',
+          'Cannot pass ref in renderToHTML because they will never be hydrated.',
         );
       }
       if (typeof propValue === 'function') {
         throw new Error(
           'Cannot pass event handlers (' +
             propKey +
-            ') in renderToMarkup because ' +
+            ') in renderToHTML because ' +
             'the HTML will never be hydrated so they can never get called.',
         );
       }
diff --git a/packages/react-markup/src/ReactMarkupClient.js b/packages/react-markup/src/ReactMarkupClient.js
index 66b69df99bb18c..4fb18e27c7d5bb 100644
--- a/packages/react-markup/src/ReactMarkupClient.js
+++ b/packages/react-markup/src/ReactMarkupClient.js
@@ -31,7 +31,7 @@ type MarkupOptions = {
   onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
 };
 
-export function renderToMarkup(
+export function renderToHTML(
   children: ReactNodeList,
   options?: MarkupOptions,
 ): Promise<string> {
diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js
index 7cbab9d430ec6f..c6d71e976b2560 100644
--- a/packages/react-markup/src/ReactMarkupServer.js
+++ b/packages/react-markup/src/ReactMarkupServer.js
@@ -71,11 +71,11 @@ type MarkupOptions = {
 
 function noServerCallOrFormAction() {
   throw new Error(
-    'renderToMarkup should not have emitted Server References. This is a bug in React.',
+    'renderToHTML should not have emitted Server References. This is a bug in React.',
   );
 }
 
-export function renderToMarkup(
+export function renderToHTML(
   children: ReactMarkupNodeList,
   options?: MarkupOptions,
 ): Promise<string> {
diff --git a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
index 186a1baf7b3b36..a9193474234bbf 100644
--- a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
@@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) {
         return <div>hello world</div>;
       }
 
-      const html = await ReactMarkup.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToHTML(<Component />);
       expect(html).toBe('<div>hello world</div>');
     });
 
@@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
         return <div>{'hello '.repeat(200)}world</div>;
       }
 
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         <html>
           <body>hello</body>
         </html>,
@@ -76,7 +76,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(<Component />);
+        await ReactMarkup.renderToHTML(<Component />);
       }).rejects.toThrow();
     });
 
@@ -87,7 +87,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(<Component />);
+        await ReactMarkup.renderToHTML(<Component />);
       }).rejects.toThrow();
     });
 
@@ -100,7 +100,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(<Component />);
+        await ReactMarkup.renderToHTML(<Component />);
       }).rejects.toThrow();
     });
 
@@ -142,7 +142,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToHTML(<Component />);
       const container = document.createElement('div');
       container.innerHTML = html;
 
@@ -176,7 +176,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToMarkup(<Component />);
+      const html = await ReactMarkup.renderToHTML(<Component />);
       expect(html).toBe('<div>01</div>');
     });
 
@@ -199,7 +199,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(
+        await ReactMarkup.renderToHTML(
           <div>
             <Foo />
           </div>,
diff --git a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
index 350f765c1715ea..169c4ba5e6c5b8 100644
--- a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
@@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello world');
       }
 
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>hello world</div>');
@@ -76,14 +76,14 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello '.repeat(200) + 'world');
       }
 
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         // We can't use JSX because that's client-JSX in our tests.
         React.createElement(
           'html',
@@ -104,7 +104,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToHTML(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -116,7 +116,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToHTML(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -130,7 +130,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(React.createElement(Component));
+        await ReactMarkup.renderToHTML(React.createElement(Component));
       }).rejects.toThrow();
     });
 
@@ -173,7 +173,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         React.createElement(Component),
       );
       const container = document.createElement('div');
@@ -204,7 +204,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, a, b);
       }
 
-      const html = await ReactMarkup.renderToMarkup(
+      const html = await ReactMarkup.renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>00</div>');
@@ -225,7 +225,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToMarkup(
+        await ReactMarkup.renderToHTML(
           React.createElement('div', null, React.createElement(Foo)),
           {
             onError(error, errorInfo) {
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 1c136c6b23ecde..5a33617d2186a0 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -804,7 +804,7 @@ function noop(): void {}
 
 function clientHookNotSupported() {
   throw new Error(
-    'Cannot use state or effect Hooks in renderToMarkup because ' +
+    'Cannot use state or effect Hooks in renderToHTML because ' +
       'this component will never be hydrated.',
   );
 }
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.markup.js b/packages/react-server/src/forks/ReactFlightServerConfig.markup.js
index 52a10506bd1406..12feb37ac56970 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.markup.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.markup.js
@@ -52,9 +52,9 @@ export function getClientReferenceKey(
   reference: ClientReference<any>,
 ): ClientReferenceKey {
   throw new Error(
-    'Attempted to render a Client Component from renderToMarkup. ' +
+    'Attempted to render a Client Component from renderToHTML. ' +
       'This is not supported since it will never hydrate. ' +
-      'Only render Server Components with renderToMarkup.',
+      'Only render Server Components with renderToHTML.',
   );
 }
 
@@ -63,9 +63,9 @@ export function resolveClientReferenceMetadata<T>(
   clientReference: ClientReference<T>,
 ): ClientReferenceMetadata {
   throw new Error(
-    'Attempted to render a Client Component from renderToMarkup. ' +
+    'Attempted to render a Client Component from renderToHTML. ' +
       'This is not supported since it will never hydrate. ' +
-      'Only render Server Components with renderToMarkup.',
+      'Only render Server Components with renderToHTML.',
   );
 }
 
@@ -74,7 +74,7 @@ export function getServerReferenceId<T>(
   serverReference: ServerReference<T>,
 ): ServerReferenceId {
   throw new Error(
-    'Attempted to render a Server Action from renderToMarkup. ' +
+    'Attempted to render a Server Action from renderToHTML. ' +
       'This is not supported since it varies by version of the app. ' +
       'Use a fixed URL for any forms instead.',
   );
@@ -85,7 +85,7 @@ export function getServerReferenceBoundArguments<T>(
   serverReference: ServerReference<T>,
 ): null | Array<ReactClientValue> {
   throw new Error(
-    'Attempted to render a Server Action from renderToMarkup. ' +
+    'Attempted to render a Server Action from renderToHTML. ' +
       'This is not supported since it varies by version of the app. ' +
       'Use a fixed URL for any forms instead.',
   );
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index b1286a7daf7c05..572ffd21fd8b5f 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -517,13 +517,13 @@
   "529": "Expected stylesheet with precedence to not be updated to a different kind of <link>. Check the `rel`, `href`, and `precedence` props of this component. Alternatively, check whether two different <link> components render in the same slot or share the same key.%s",
   "530": "The render was aborted by the server with a promise.",
   "531": "react-markup is not supported outside a React Server Components environment.",
-  "532": "Attempted to render a Client Component from renderToMarkup. This is not supported since it will never hydrate. Only render Server Components with renderToMarkup.",
-  "533": "Attempted to render a Server Action from renderToMarkup. This is not supported since it varies by version of the app. Use a fixed URL for any forms instead.",
-  "534": "renderToMarkup should not have emitted Client References. This is a bug in React.",
-  "535": "renderToMarkup should not have emitted Server References. This is a bug in React.",
-  "536": "Cannot pass ref in renderToMarkup because they will never be hydrated.",
-  "537": "Cannot pass event handlers (%s) in renderToMarkup because the HTML will never be hydrated so they can never get called.",
-  "538": "Cannot use state or effect Hooks in renderToMarkup because this component will never be hydrated.",
+  "532": "Attempted to render a Client Component from renderToHTML. This is not supported since it will never hydrate. Only render Server Components with renderToHTML.",
+  "533": "Attempted to render a Server Action from renderToHTML. This is not supported since it varies by version of the app. Use a fixed URL for any forms instead.",
+  "534": "renderToHTML should not have emitted Client References. This is a bug in React.",
+  "535": "renderToHTML should not have emitted Server References. This is a bug in React.",
+  "536": "Cannot pass ref in renderToHTML because they will never be hydrated.",
+  "537": "Cannot pass event handlers (%s) in renderToHTML because the HTML will never be hydrated so they can never get called.",
+  "538": "Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.",
   "539": "Binary RSC chunks cannot be encoded as strings. This is a bug in the wiring of the React streams.",
   "540": "String chunks need to be passed in their original shape. Not split into smaller string chunks. This is a bug in the wiring of the React streams.",
   "541": "Compared context values must be arrays"

From 179197a22a0c00bc30c1a44275e7b4b1b2cec019 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Wed, 14 Aug 2024 13:54:38 -0400
Subject: [PATCH 14/40] [compiler] Allow different dependencies from explicit
 memoization when dependency is a ref

Summary:
In theory, as I understand it, the result of a useRef will never change between renders, because we'll always provide the same ref value consistently. That means that memoization that depends on a ref value will never re-compute, so I think we could not infer it as a dependency in Forget. This diff, however, doesn't do that: it instead allows the validatePreserveExistingMemoizationGuarantees analysis to admit mismatches between explicit dependencies and implicit ones when the implicit dependency is a ref that doesn't exist in source.

ghstack-source-id: 685d859d1eed5d1e19dbbbfadc75be3875ddb6ea
Pull Request resolved: https://github.com/facebook/react/pull/30679
---
 .../src/HIR/HIR.ts                            |  7 ++-
 ...-callback-passed-to-jsx-indirect.expect.md | 53 +++++-------------
 ...ng-ref-in-callback-passed-to-jsx.expect.md | 34 +++--------
 ...-callback-passed-to-jsx-indirect.expect.md | 53 +++++-------------
 ...operty-in-callback-passed-to-jsx.expect.md | 34 +++--------
 .../allow-passing-refs-as-props.expect.md     |  9 ++-
 ...ow-ref-access-in-effect-indirect.expect.md | 37 ++++++------
 .../allow-ref-access-in-effect.expect.md      |  9 ++-
 ...access-in-unused-callback-nested.expect.md |  9 ++-
 .../capture-ref-for-later-mutation.expect.md  | 45 +++++++--------
 ...ve-use-memo-ref-missing-reactive.expect.md | 48 ++++++++++++++++
 ....preserve-use-memo-ref-missing-reactive.ts | 19 +++++++
 ...preserve-use-memo-ref-missing-ok.expect.md | 56 +++++++++++++++++++
 .../preserve-use-memo-ref-missing-ok.ts       | 17 ++++++
 .../compiler/react-namespace.expect.md        | 11 ++--
 ...-current-aliased-no-added-to-dep.expect.md | 17 ++----
 ...f-current-field-not-added-to-dep.expect.md | 17 ++----
 ...ent-field-write-not-added-to-dep.expect.md | 17 ++----
 .../ref-current-not-added-to-dep.expect.md    | 17 ++----
 ...t-optional-field-no-added-to-dep.expect.md | 17 ++----
 ...f-current-write-not-added-to-dep.expect.md | 17 ++----
 .../fixtures/compiler/ref-in-effect.expect.md |  9 ++-
 .../ref-like-name-in-useCallback-2.expect.md  |  9 ++-
 .../ref-like-name-in-useCallback.expect.md    |  9 ++-
 ...ng-same-ref-preserve-memoization.expect.md | 10 ++--
 ...ed-property-preserve-memoization.expect.md |  9 ++-
 ...Callback-set-ref-nested-property.expect.md |  9 ++-
 ...-value-dont-preserve-memoization.expect.md |  9 ++-
 ...t-ref-value-preserve-memoization.expect.md |  9 ++-
 29 files changed, 306 insertions(+), 310 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index 1e807d6d2a5d0e..84671712e93054 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -1616,7 +1616,12 @@ export function isDispatcherType(id: Identifier): boolean {
 }
 
 export function isStableType(id: Identifier): boolean {
-  return isSetStateType(id) || isSetActionStateType(id) || isDispatcherType(id);
+  return (
+    isSetStateType(id) ||
+    isSetActionStateType(id) ||
+    isDispatcherType(id) ||
+    isUseRefType(id)
+  );
 }
 
 export function isUseEffectHookType(id: Identifier): boolean {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
index 7e6dcaff76d104..70320c376274a5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
@@ -40,62 +40,37 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useRef } from "react";
 
 function Component() {
-  const $ = _c(10);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const setRef = () => {
       if (ref.current !== null) {
         ref.current = "";
       }
     };
+
+    t0 = () => {
+      setRef();
+    };
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const setRef = t0;
+  const onClick = t0;
   let t1;
-  if ($[1] !== setRef) {
-    t1 = () => {
-      setRef();
-    };
-    $[1] = setRef;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const onClick = t1;
-  let t2;
-  if ($[3] !== ref) {
-    t2 = <input ref={ref} />;
-    $[3] = ref;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== onClick) {
-    t3 = <button onClick={onClick} />;
-    $[5] = onClick;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== t2 || $[8] !== t3) {
-    t4 = (
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
       <>
-        {t2}
-        {t3}
+        <input ref={ref} />
+        <button onClick={onClick} />
       </>
     );
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
+    $[1] = t1;
   } else {
-    t4 = $[9];
+    t1 = $[1];
   }
-  return t4;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
index e28de25bf45f77..3b65ecfb8d1a71 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
@@ -36,7 +36,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useRef } from "react";
 
 function Component() {
-  const $ = _c(8);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -51,36 +51,18 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] !== ref) {
-    t1 = <input ref={ref} />;
-    $[1] = ref;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== onClick) {
-    t2 = <button onClick={onClick} />;
-    $[3] = onClick;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== t1 || $[6] !== t2) {
-    t3 = (
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
       <>
-        {t1}
-        {t2}
+        <input ref={ref} />
+        <button onClick={onClick} />
       </>
     );
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
+    $[1] = t1;
   } else {
-    t3 = $[7];
+    t1 = $[1];
   }
-  return t3;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
index d2ca8ec592d969..4c979728f685ca 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
@@ -40,62 +40,37 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useRef } from "react";
 
 function Component() {
-  const $ = _c(10);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const setRef = () => {
       if (ref.current !== null) {
         ref.current.value = "";
       }
     };
+
+    t0 = () => {
+      setRef();
+    };
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const setRef = t0;
+  const onClick = t0;
   let t1;
-  if ($[1] !== setRef) {
-    t1 = () => {
-      setRef();
-    };
-    $[1] = setRef;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  const onClick = t1;
-  let t2;
-  if ($[3] !== ref) {
-    t2 = <input ref={ref} />;
-    $[3] = ref;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== onClick) {
-    t3 = <button onClick={onClick} />;
-    $[5] = onClick;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== t2 || $[8] !== t3) {
-    t4 = (
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
       <>
-        {t2}
-        {t3}
+        <input ref={ref} />
+        <button onClick={onClick} />
       </>
     );
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
+    $[1] = t1;
   } else {
-    t4 = $[9];
+    t1 = $[1];
   }
-  return t4;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
index 17639b213994fb..0d8ac787e5c868 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
@@ -36,7 +36,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useRef } from "react";
 
 function Component() {
-  const $ = _c(8);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -51,36 +51,18 @@ function Component() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] !== ref) {
-    t1 = <input ref={ref} />;
-    $[1] = ref;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== onClick) {
-    t2 = <button onClick={onClick} />;
-    $[3] = onClick;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  let t3;
-  if ($[5] !== t1 || $[6] !== t2) {
-    t3 = (
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
       <>
-        {t1}
-        {t2}
+        <input ref={ref} />
+        <button onClick={onClick} />
       </>
     );
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
+    $[1] = t1;
   } else {
-    t3 = $[7];
+    t1 = $[1];
   }
-  return t3;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md
index 5c39260976128c..7ec38df94be7fe 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-as-props.expect.md
@@ -14,15 +14,14 @@ function Component(props) {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(2);
+  const $ = _c(1);
   const ref = useRef(null);
   let t0;
-  if ($[0] !== ref) {
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = <Foo ref={ref} />;
-    $[0] = ref;
-    $[1] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[1];
+    t0 = $[0];
   }
   return t0;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md
index e8ed54ef262e6e..7c1f5ad3727b80 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect-indirect.expect.md
@@ -46,7 +46,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useCallback, useEffect, useRef, useState } from "react";
 
 function Component() {
-  const $ = _c(9);
+  const $ = _c(7);
   const ref = useRef(null);
   const [state, setState] = useState(false);
   let t0;
@@ -60,47 +60,42 @@ function Component() {
   }
   const setRef = t0;
   let t1;
-  if ($[1] !== setRef) {
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = () => {
       setRef();
     };
-    $[1] = setRef;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = [];
-    $[3] = t2;
+    $[1] = t1;
+    $[2] = t2;
   } else {
-    t2 = $[3];
+    t1 = $[1];
+    t2 = $[2];
   }
   useEffect(t1, t2);
   let t3;
   let t4;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = () => {
       setState(true);
     };
     t4 = [];
-    $[4] = t3;
-    $[5] = t4;
+    $[3] = t3;
+    $[4] = t4;
   } else {
-    t3 = $[4];
-    t4 = $[5];
+    t3 = $[3];
+    t4 = $[4];
   }
   useEffect(t3, t4);
 
   const t5 = String(state);
   let t6;
-  if ($[6] !== t5 || $[7] !== ref) {
+  if ($[5] !== t5) {
     t6 = <Child key={t5} ref={ref} />;
-    $[6] = t5;
-    $[7] = ref;
-    $[8] = t6;
+    $[5] = t5;
+    $[6] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[6];
   }
   return t6;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md
index 7df88ea8f16f50..3bdf358611db60 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-effect.expect.md
@@ -42,7 +42,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useEffect, useRef, useState } from "react";
 
 function Component() {
-  const $ = _c(7);
+  const $ = _c(6);
   const ref = useRef(null);
   const [state, setState] = useState(false);
   let t0;
@@ -76,13 +76,12 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4 || $[5] !== ref) {
+  if ($[4] !== t4) {
     t5 = <Child key={t4} ref={ref} />;
     $[4] = t4;
-    $[5] = ref;
-    $[6] = t5;
+    $[5] = t5;
   } else {
-    t5 = $[6];
+    t5 = $[5];
   }
   return t5;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
index b992886f65e723..37a510b8c290a9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
@@ -44,7 +44,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRen
 import { useEffect, useRef, useState } from "react";
 
 function Component() {
-  const $ = _c(7);
+  const $ = _c(6);
   const ref = useRef(null);
   const [state, setState] = useState(false);
   let t0;
@@ -77,13 +77,12 @@ function Component() {
 
   const t4 = String(state);
   let t5;
-  if ($[4] !== t4 || $[5] !== ref) {
+  if ($[4] !== t4) {
     t5 = <Child key={t4} ref={ref} />;
     $[4] = t4;
-    $[5] = ref;
-    $[6] = t5;
+    $[5] = t5;
   } else {
-    t5 = $[6];
+    t5 = $[5];
   }
   return t5;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
index 0ed1de559a1cb6..52cea4b047c051 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
@@ -37,45 +37,42 @@ import { useRef } from "react";
 import { addOne } from "shared-runtime";
 
 function useKeyCommand() {
-  const $ = _c(7);
+  const $ = _c(6);
   const currentPosition = useRef(0);
   const handleKey = (direction) => () => {
     const position = currentPosition.current;
     const nextPosition = direction === "left" ? addOne(position) : position;
     currentPosition.current = nextPosition;
   };
-
-  const t0 = handleKey("left");
-  let t1;
-  if ($[0] !== t0) {
-    t1 = { handler: t0 };
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { handler: handleKey("left") };
     $[0] = t0;
-    $[1] = t1;
   } else {
-    t1 = $[1];
+    t0 = $[0];
   }
-  const moveLeft = t1;
+  const moveLeft = t0;
 
-  const t2 = handleKey("right");
-  let t3;
-  if ($[2] !== t2) {
-    t3 = { handler: t2 };
+  const t1 = handleKey("right");
+  let t2;
+  if ($[1] !== t1) {
+    t2 = { handler: t1 };
+    $[1] = t1;
     $[2] = t2;
-    $[3] = t3;
   } else {
-    t3 = $[3];
+    t2 = $[2];
   }
-  const moveRight = t3;
-  let t4;
-  if ($[4] !== moveLeft || $[5] !== moveRight) {
-    t4 = [moveLeft, moveRight];
-    $[4] = moveLeft;
-    $[5] = moveRight;
-    $[6] = t4;
+  const moveRight = t2;
+  let t3;
+  if ($[3] !== moveLeft || $[4] !== moveRight) {
+    t3 = [moveLeft, moveRight];
+    $[3] = moveLeft;
+    $[4] = moveRight;
+    $[5] = t3;
   } else {
-    t4 = $[6];
+    t3 = $[5];
   }
-  return t4;
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md
new file mode 100644
index 00000000000000..e639a347322263
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.expect.md
@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   7 |   const ref = cond ? ref1 : ref2;
+   8 |
+>  9 |   return useCallback(() => {
+     |                      ^^^^^^^
+> 10 |     if (ref != null) {
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 11 |       ref.current();
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 12 |     }
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 13 |   }, []);
+     | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (9:13)
+  14 | }
+  15 |
+  16 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts
new file mode 100644
index 00000000000000..8238e1b74d0e24
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.preserve-use-memo-ref-missing-reactive.ts
@@ -0,0 +1,19 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md
new file mode 100644
index 00000000000000..3625e2a6237d38
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo() {
+  const ref = useRef<undefined | (() => undefined)>();
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useRef } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref != null) {
+        ref.current();
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts
new file mode 100644
index 00000000000000..92175ce5bba67e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-ref-missing-ok.ts
@@ -0,0 +1,17 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo() {
+  const ref = useRef<undefined | (() => undefined)>();
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
index 8c422c07cda0bd..0afc5b651bb943 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md
@@ -29,7 +29,7 @@ import { c as _c } from "react/compiler-runtime";
 const FooContext = React.createContext({ current: null });
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(5);
   React.useContext(FooContext);
   const ref = React.useRef();
   const [x, setX] = React.useState(false);
@@ -53,13 +53,12 @@ function Component(props) {
     t1 = $[2];
   }
   let t2;
-  if ($[3] !== onClick || $[4] !== t1) {
+  if ($[3] !== t1) {
     t2 = <div onClick={onClick}>{t1}</div>;
-    $[3] = onClick;
-    $[4] = t1;
-    $[5] = t2;
+    $[3] = t1;
+    $[4] = t2;
   } else {
-    t2 = $[5];
+    t2 = $[4];
   }
   return t2;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md
index 9113cec24bf407..0c8583d402c421 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-no-added-to-dep.expect.md
@@ -20,28 +20,21 @@ function VideoTab() {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender false
 function VideoTab() {
-  const $ = _c(3);
+  const $ = _c(1);
   const ref = useRef();
   const t = ref.current;
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const x = () => {
       console.log(t);
     };
+
+    t0 = <VideoList videos={x} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const x = t0;
-  let t1;
-  if ($[1] !== x) {
-    t1 = <VideoList videos={x} />;
-    $[1] = x;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+  return t0;
 }
 
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md
index 6ca83bf4dcfca2..2d64bbd5ad51e5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-not-added-to-dep.expect.md
@@ -19,27 +19,20 @@ function VideoTab() {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender false
 function VideoTab() {
-  const $ = _c(3);
+  const $ = _c(1);
   const ref = useRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const x = () => {
       console.log(ref.current.x);
     };
+
+    t0 = <VideoList videos={x} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const x = t0;
-  let t1;
-  if ($[1] !== x) {
-    t1 = <VideoList videos={x} />;
-    $[1] = x;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+  return t0;
 }
 
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md
index bce9e7ab11638b..fab497b4aaaf26 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-field-write-not-added-to-dep.expect.md
@@ -27,7 +27,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useRef } from "react";
 
 function Component() {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = { text: { value: null } };
@@ -38,23 +38,16 @@ function Component() {
   const ref = useRef(t0);
   let t1;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = (e) => {
+    const inputChanged = (e) => {
       ref.current.text.value = e.target.value;
     };
+
+    t1 = <input onChange={inputChanged} />;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const inputChanged = t1;
-  let t2;
-  if ($[2] !== inputChanged) {
-    t2 = <input onChange={inputChanged} />;
-    $[2] = inputChanged;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md
index 9ace9ffc04582d..567b6329a7c40b 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep.expect.md
@@ -18,27 +18,20 @@ function VideoTab() {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function VideoTab() {
-  const $ = _c(3);
+  const $ = _c(1);
   const ref = useRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const x = () => {
       console.log(ref.current);
     };
+
+    t0 = <VideoList videos={x} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const x = t0;
-  let t1;
-  if ($[1] !== x) {
-    t1 = <VideoList videos={x} />;
-    $[1] = x;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+  return t0;
 }
 
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md
index d903df376e3fd8..85bb7b65c5af66 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-optional-field-no-added-to-dep.expect.md
@@ -18,27 +18,20 @@ function VideoTab() {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function VideoTab() {
-  const $ = _c(3);
+  const $ = _c(1);
   const ref = useRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const x = () => {
       ref.current?.x;
     };
+
+    t0 = <VideoList videos={x} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const x = t0;
-  let t1;
-  if ($[1] !== x) {
-    t1 = <VideoList videos={x} />;
-    $[1] = x;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+  return t0;
 }
 
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md
index 68762dba957ff5..f2feb9ef52a1a9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-write-not-added-to-dep.expect.md
@@ -18,27 +18,20 @@ function VideoTab() {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function VideoTab() {
-  const $ = _c(3);
+  const $ = _c(1);
   const ref = useRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const x = () => {
       ref.current = 1;
     };
+
+    t0 = <VideoList videos={x} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const x = t0;
-  let t1;
-  if ($[1] !== x) {
-    t1 = <VideoList videos={x} />;
-    $[1] = x;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+  return t0;
 }
 
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md
index 7f4aee831d9ee4..8c620a698cd15e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md
@@ -21,7 +21,7 @@ function Component(props) {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(3);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -45,12 +45,11 @@ function Component(props) {
   }
   useEffect(t1);
   let t2;
-  if ($[2] !== onChange) {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = <Foo onChange={onChange} />;
-    $[2] = onChange;
-    $[3] = t2;
+    $[2] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[2];
   }
   return t2;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md
index 98268f40bf5d74..c5f2f6a762850f 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback-2.expect.md
@@ -47,7 +47,7 @@ function useCustomRef() {
 function _temp() {}
 
 function Foo() {
-  const $ = _c(3);
+  const $ = _c(2);
   const ref = useCustomRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -60,12 +60,11 @@ function Foo() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] !== onClick) {
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = <button onClick={onClick} />;
-    $[1] = onClick;
-    $[2] = t1;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
   return t1;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md
index 57a1bec24a878f..fa81fd77d534f0 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-like-name-in-useCallback.expect.md
@@ -47,7 +47,7 @@ function useCustomRef() {
 function _temp() {}
 
 function Foo() {
-  const $ = _c(3);
+  const $ = _c(2);
   const customRef = useCustomRef();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -60,12 +60,11 @@ function Foo() {
   }
   const onClick = t0;
   let t1;
-  if ($[1] !== onClick) {
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = <button onClick={onClick} />;
-    $[1] = onClick;
-    $[2] = t1;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
   return t1;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md
index 1179df3096332e..12eee85f66bbf5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-multiple-callbacks-modifying-same-ref-preserve-memoization.expect.md
@@ -35,7 +35,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemo
 import { useCallback, useRef } from "react";
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(4);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = { inner: null };
@@ -65,13 +65,11 @@ function Component(props) {
   }
   const onReset = t2;
   let t3;
-  if ($[3] !== onChange || $[4] !== onReset) {
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = <input onChange={onChange} onReset={onReset} />;
-    $[3] = onChange;
-    $[4] = onReset;
-    $[5] = t3;
+    $[3] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[3];
   }
   return t3;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
index 302c5724b82050..864c746fcc0be4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-preserve-memoization.expect.md
@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemo
 import { useCallback, useRef } from "react";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(3);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = { inner: null };
@@ -51,12 +51,11 @@ function Component(props) {
   }
   const onChange = t1;
   let t2;
-  if ($[2] !== onChange) {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = <input onChange={onChange} />;
-    $[2] = onChange;
-    $[3] = t2;
+    $[2] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[2];
   }
   return t2;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md
index 7436107360ba64..77dbb0dcd516f7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property.expect.md
@@ -34,7 +34,7 @@ import { useCallback, useRef } from "react";
 // Identical to useCallback-set-ref-nested-property-preserve-memoization,
 // but with a different set of compiler flags
 function Component(t0) {
-  const $ = _c(4);
+  const $ = _c(3);
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = { inner: null };
@@ -54,12 +54,11 @@ function Component(t0) {
   }
   const onChange = t2;
   let t3;
-  if ($[2] !== onChange) {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = <input onChange={onChange} />;
-    $[2] = onChange;
-    $[3] = t3;
+    $[2] = t3;
   } else {
-    t3 = $[3];
+    t3 = $[2];
   }
   return t3;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md
index 2055108f1192a6..43d6f1d712a3d7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-dont-preserve-memoization.expect.md
@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemo
 import { useCallback, useRef } from "react";
 
 function Component(props) {
-  const $ = _c(3);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -44,12 +44,11 @@ function Component(props) {
   }
   const onChange = t0;
   let t1;
-  if ($[1] !== onChange) {
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = <input onChange={onChange} />;
-    $[1] = onChange;
-    $[2] = t1;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
   return t1;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md
index 2055108f1192a6..43d6f1d712a3d7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-value-preserve-memoization.expect.md
@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemo
 import { useCallback, useRef } from "react";
 
 function Component(props) {
-  const $ = _c(3);
+  const $ = _c(2);
   const ref = useRef(null);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -44,12 +44,11 @@ function Component(props) {
   }
   const onChange = t0;
   let t1;
-  if ($[1] !== onChange) {
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = <input onChange={onChange} />;
-    $[1] = onChange;
-    $[2] = t1;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
   return t1;
 }

From dd8e0ba857fcd546d677c7283d5f35a663bc8d02 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Wed, 14 Aug 2024 13:54:38 -0400
Subject: [PATCH 15/40] [compiler] Support for useTransition

Summary:
UseTransition is a builtin hook that returns a stable value, like useState. This PR represents that in Forget, and marks the startTransition function as stable.

ghstack-source-id: 0e76a64f2d0c86a4eb55c620922b4698250bb5c3
Pull Request resolved: https://github.com/facebook/react/pull/30681
---
 .../src/HIR/Globals.ts                        | 12 +++++
 .../src/HIR/HIR.ts                            |  9 +++-
 .../src/HIR/ObjectShape.ts                    | 22 ++++++++
 .../preserve-use-memo-transition.expect.md    | 52 +++++++++++++++++++
 .../preserve-use-memo-transition.ts           | 15 ++++++
 5 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
index 884372b986ea83..e9066f85b81933 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
@@ -18,6 +18,7 @@ import {
   BuiltInUseReducerId,
   BuiltInUseRefId,
   BuiltInUseStateId,
+  BuiltInUseTransitionId,
   ShapeRegistry,
   addFunction,
   addHook,
@@ -425,6 +426,17 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       BuiltInUseInsertionEffectHookId,
     ),
   ],
+  [
+    'useTransition',
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: null,
+      returnType: {kind: 'Object', shapeId: BuiltInUseTransitionId},
+      calleeEffect: Effect.Read,
+      hookKind: 'useTransition',
+      returnValueKind: ValueKind.Frozen,
+    }),
+  ],
   [
     'use',
     addFunction(
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index 84671712e93054..e61665ce4c6bb3 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -1601,6 +1601,12 @@ export function isUseActionStateType(id: Identifier): boolean {
   );
 }
 
+export function isStartTransitionType(id: Identifier): boolean {
+  return (
+    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInStartTransition'
+  );
+}
+
 export function isSetActionStateType(id: Identifier): boolean {
   return (
     id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetActionState'
@@ -1620,7 +1626,8 @@ export function isStableType(id: Identifier): boolean {
     isSetStateType(id) ||
     isSetActionStateType(id) ||
     isDispatcherType(id) ||
-    isUseRefType(id)
+    isUseRefType(id) ||
+    isStartTransitionType(id)
   );
 }
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
index 3d377dba59dc98..9554878578ca03 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
@@ -126,6 +126,7 @@ export type HookKind =
   | 'useInsertionEffect'
   | 'useMemo'
   | 'useCallback'
+  | 'useTransition'
   | 'Custom';
 
 /*
@@ -209,6 +210,8 @@ export const BuiltInUseOperatorId = 'BuiltInUseOperator';
 export const BuiltInUseReducerId = 'BuiltInUseReducer';
 export const BuiltInDispatchId = 'BuiltInDispatch';
 export const BuiltInUseContextHookId = 'BuiltInUseContextHook';
+export const BuiltInUseTransitionId = 'BuiltInUseTransition';
+export const BuiltInStartTransitionId = 'BuiltInStartTransition';
 
 // ShapeRegistry with default definitions for built-ins.
 export const BUILTIN_SHAPES: ShapeRegistry = new Map();
@@ -444,6 +447,25 @@ addObject(BUILTIN_SHAPES, BuiltInUseStateId, [
   ],
 ]);
 
+addObject(BUILTIN_SHAPES, BuiltInUseTransitionId, [
+  ['0', {kind: 'Primitive'}],
+  [
+    '1',
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: null,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInStartTransitionId,
+    ),
+  ],
+]);
+
 addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [
   ['0', {kind: 'Poly'}],
   [
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
new file mode 100644
index 00000000000000..941c37bc3f29fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [t, start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback, useTransition } from "react";
+
+function useFoo() {
+  const $ = _c(1);
+  const [t, start] = useTransition();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      start();
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts
new file mode 100644
index 00000000000000..a822d68dfc82d3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-memo-transition.ts
@@ -0,0 +1,15 @@
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useTransition} from 'react';
+
+function useFoo() {
+  const [t, start] = useTransition();
+
+  return useCallback(() => {
+    start();
+  }, []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};

From fca5d655d78917400a2722287351c20938166669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Aug 2024 15:48:05 -0400
Subject: [PATCH 16/40] [DevTools] Hide props section if it is null (#30696)

We use null as a marker that we don't know what the props are as opposed
to knowing that they're empty.
---
 .../views/Components/InspectedElementPropsTree.js        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 808824816d122e..942d2a2490b463 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -54,11 +54,14 @@ export default function InspectedElementPropsTree({
     type === ElementTypeClass || canEditFunctionPropsRenamePaths;
 
   const entries = props != null ? Object.entries(props) : null;
-  if (entries !== null) {
-    entries.sort(alphaSortEntries);
+  if (entries === null) {
+    // Skip the section for null props.
+    return null;
   }
 
-  const isEmpty = entries === null || entries.length === 0;
+  entries.sort(alphaSortEntries);
+
+  const isEmpty = entries.length === 0;
 
   const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
 

From d9eb1540e242a8679659f58719546320a2a28b2b Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:45:20 -0400
Subject: [PATCH 17/40] [fresh] Add failing test for useMemoCache reset case

During local development it's common to add or remove code which may
change the cache size between renders. Add a failing test to show that
currently (without the compiled fast refresh check) this issues a
warning and reuses the cache which may have stale values.

ghstack-source-id: efdcb017ba3bdadd88b1f8bb5523b1a9f6217eb5
Pull Request resolved: https://github.com/facebook/react/pull/30662
---
 .../__tests__/ReactFreshIntegration-test.js   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index c83e36f13a44bc..2115a15f67705e 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -1637,6 +1637,61 @@ describe('ReactFreshIntegration', () => {
       }
     });
 
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip('resets useMemoCache cache slots', async () => {
+      if (__DEV__) {
+        await render(`
+          const useMemoCache = require('react/compiler-runtime').c;
+          let cacheMisses = 0;
+          const cacheMiss = (id) => {
+            cacheMisses++;
+            return id;
+          };
+          export default function App(t0) {
+            const $ = useMemoCache(1);
+            const {reset1} = t0;
+            let t1;
+            if ($[0] !== reset1) {
+              $[0] = t1 = cacheMiss({reset1});
+            } else {
+              t1 = $[1];
+            }
+            return <h1>{cacheMisses}</h1>;
+          }
+        `);
+        const el = container.firstChild;
+        expect(el.textContent).toBe('1');
+        await patch(`
+          const useMemoCache = require('react/compiler-runtime').c;
+          let cacheMisses = 0;
+          const cacheMiss = (id) => {
+            cacheMisses++;
+            return id;
+          };
+          export default function App(t0) {
+            const $ = useMemoCache(2);
+            const {reset1, reset2} = t0;
+            let t1;
+            if ($[0] !== reset1) {
+              $[0] = t1 = cacheMiss({reset1});
+            } else {
+              t1 = $[1];
+            }
+            let t2;
+            if ($[1] !== reset2) {
+              $[1] = t2 = cacheMiss({reset2});
+            } else {
+              t2 = $[1];
+            }
+            return <h1>{cacheMisses}</h1>;
+          }
+        `);
+        expect(container.firstChild).toBe(el);
+        // cache size changed between refreshes
+        expect(el.textContent).toBe('2');
+      }
+    });
+
     describe('with inline requires', () => {
       beforeEach(() => {
         global.FakeModuleSystem = {};

From 7e8a06cf4c628be45171da52c1a8e97f9869b7ee Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 15 Aug 2024 01:02:29 +0100
Subject: [PATCH 18/40] [Fresh] Always reset useMemoCache on Fast Refresh
 (#30700)

Stacked on https://github.com/facebook/react/pull/30662.

Alternative to https://github.com/facebook/react/pull/30663 and
https://github.com/facebook/react/pull/30677.

During a Fast Refresh, we always want to evict the memo cache, same as
we do with normal `useMemo`. The mechanism used by `useMemo` and other
Hooks is this module-level variable:


https://github.com/facebook/react/blob/fca5d655d78917400a2722287351c20938166669/packages/react-reconciler/src/ReactFiberHooks.js#L304-L307

which has DEV-only behavior as if the dependencies are always different:


https://github.com/facebook/react/blob/fca5d655d78917400a2722287351c20938166669/packages/react-reconciler/src/ReactFiberHooks.js#L451-L460

The `useMemoCache` Hook doesn't use a dependency array but conceptually
I think we want the same behavior.

## Test Plan

The test passes.

---------

Co-authored-by: Lauren Tan <poteto@users.noreply.github.com>
---
 packages/react-reconciler/src/ReactFiberHooks.js               | 2 +-
 .../react-refresh/src/__tests__/ReactFreshIntegration-test.js  | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index f72056f674a867..abe15165203b83 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -1226,7 +1226,7 @@ function useMemoCache(size: number): Array<any> {
   updateQueue.memoCache = memoCache;
 
   let data = memoCache.data[memoCache.index];
-  if (data === undefined) {
+  if (data === undefined || (__DEV__ && ignorePreviousDependencies)) {
     data = memoCache.data[memoCache.index] = new Array(size);
     for (let i = 0; i < size; i++) {
       data[i] = REACT_MEMO_CACHE_SENTINEL;
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index 2115a15f67705e..cc9deb62360115 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -1637,8 +1637,7 @@ describe('ReactFreshIntegration', () => {
       }
     });
 
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('resets useMemoCache cache slots', async () => {
+    it('resets useMemoCache cache slots', async () => {
       if (__DEV__) {
         await render(`
           const useMemoCache = require('react/compiler-runtime').c;

From 8b08ee08a1f73031b2119286bd7d806eabb1708b Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 14 Aug 2024 18:10:40 -0700
Subject: [PATCH 19/40] [Flight] reorganize code for forked entrypoints
 (#30702)

This commit updates the file locations and bulid configurations for
flight in preparation for new static entrypoints. This follows a
structure similar to Fizz which has a unified build but exports methods
from different top level entrypoints. This PR doesn't actually add the
new top level entrypoints however, that will arrive in a later update.
---
 ...ReactFlightClientConfig.dom-browser-esm.js |  4 +-
 ...lightClientConfig.dom-browser-turbopack.js |  6 +-
 .../ReactFlightClientConfig.dom-browser.js    |  6 +-
 ...ctFlightClientConfig.dom-edge-turbopack.js |  6 +-
 ...eactFlightClientConfig.dom-edge-webpack.js |  6 +-
 .../ReactFlightClientConfig.dom-node-esm.js   |  4 +-
 ...ClientConfig.dom-node-turbopack-bundled.js |  6 +-
 ...ctFlightClientConfig.dom-node-turbopack.js |  4 +-
 ...eactFlightClientConfig.dom-node-webpack.js |  6 +-
 .../forks/ReactFlightClientConfig.dom-node.js |  4 +-
 .../react-server-dom-esm/client.browser.js    |  2 +-
 packages/react-server-dom-esm/client.node.js  |  2 +-
 .../react-server-dom-esm/npm/server.node.js   | 14 ++-
 packages/react-server-dom-esm/server.node.js  | 11 ++-
 .../ReactFlightClientConfigBundlerESM.js      |  0
 ...ReactFlightClientConfigTargetESMBrowser.js |  0
 .../ReactFlightClientConfigTargetESMServer.js |  0
 .../ReactFlightDOMClientBrowser.js            |  0
 .../{ => client}/ReactFlightDOMClientNode.js  |  0
 .../{ => server}/ReactFlightDOMServerNode.js  |  2 +-
 .../ReactFlightServerConfigESMBundler.js      |  7 +-
 .../server/react-flight-dom-server.node.js    | 19 ++++
 .../client.browser.js                         |  2 +-
 .../react-server-dom-turbopack/client.edge.js |  2 +-
 .../react-server-dom-turbopack/client.node.js |  2 +-
 .../client.node.unbundled.js                  |  2 +-
 .../npm/server.browser.js                     | 14 ++-
 .../npm/server.edge.js                        | 14 ++-
 .../npm/server.node.js                        | 15 ++-
 .../npm/server.node.unbundled.js              | 15 ++-
 .../server.browser.js                         | 11 ++-
 .../react-server-dom-turbopack/server.edge.js | 11 ++-
 .../react-server-dom-turbopack/server.node.js | 12 ++-
 .../server.node.unbundled.js                  | 12 ++-
 .../ReactFlightClientConfigBundlerNode.js     |  4 +-
 ...ReactFlightClientConfigBundlerTurbopack.js |  4 +-
 ...ightClientConfigBundlerTurbopackBrowser.js |  0
 ...lightClientConfigBundlerTurbopackServer.js |  0
 ...lightClientConfigTargetTurbopackBrowser.js |  0
 ...FlightClientConfigTargetTurbopackServer.js |  0
 .../ReactFlightDOMClientBrowser.js            |  0
 .../{ => client}/ReactFlightDOMClientEdge.js  |  0
 .../{ => client}/ReactFlightDOMClientNode.js  |  0
 .../ReactFlightDOMServerBrowser.js            |  2 +-
 .../{ => server}/ReactFlightDOMServerEdge.js  |  2 +-
 .../{ => server}/ReactFlightDOMServerNode.js  |  2 +-
 ...ReactFlightServerConfigTurbopackBundler.js |  6 +-
 .../server/react-flight-dom-server.browser.js | 19 ++++
 .../server/react-flight-dom-server.edge.js    | 19 ++++
 .../server/react-flight-dom-server.node.js    | 20 ++++
 .../react-flight-dom-server.node.unbundled.js | 20 ++++
 .../client.browser.js                         |  2 +-
 .../react-server-dom-webpack/client.edge.js   |  2 +-
 .../react-server-dom-webpack/client.node.js   |  2 +-
 .../client.node.unbundled.js                  |  2 +-
 .../npm/server.browser.js                     | 14 ++-
 .../npm/server.edge.js                        | 14 ++-
 .../npm/server.node.js                        | 15 ++-
 .../npm/server.node.unbundled.js              | 15 ++-
 .../server.browser.js                         | 11 ++-
 .../react-server-dom-webpack/server.edge.js   | 11 ++-
 .../react-server-dom-webpack/server.node.js   | 12 ++-
 .../server.node.unbundled.js                  | 12 ++-
 .../ReactFlightClientConfigBundlerNode.js     |  4 +-
 .../ReactFlightClientConfigBundlerWebpack.js  |  4 +-
 ...FlightClientConfigBundlerWebpackBrowser.js |  0
 ...tFlightClientConfigBundlerWebpackServer.js |  0
 ...tFlightClientConfigTargetWebpackBrowser.js |  0
 ...ctFlightClientConfigTargetWebpackServer.js |  0
 .../ReactFlightDOMClientBrowser.js            |  0
 .../{ => client}/ReactFlightDOMClientEdge.js  |  0
 .../{ => client}/ReactFlightDOMClientNode.js  |  0
 .../ReactFlightDOMServerBrowser.js            |  2 +-
 .../{ => server}/ReactFlightDOMServerEdge.js  |  2 +-
 .../{ => server}/ReactFlightDOMServerNode.js  |  2 +-
 .../ReactFlightServerConfigWebpackBundler.js  |  6 +-
 .../server/react-flight-dom-server.browser.js | 19 ++++
 .../server/react-flight-dom-server.edge.js    | 19 ++++
 .../server/react-flight-dom-server.node.js    | 20 ++++
 .../react-flight-dom-server.node.unbundled.js | 20 ++++
 ...ReactFlightServerConfig.dom-browser-esm.js |  2 +-
 ...lightServerConfig.dom-browser-turbopack.js |  2 +-
 .../ReactFlightServerConfig.dom-browser.js    |  2 +-
 ...ctFlightServerConfig.dom-edge-turbopack.js |  2 +-
 .../forks/ReactFlightServerConfig.dom-edge.js |  2 +-
 .../ReactFlightServerConfig.dom-node-esm.js   |  2 +-
 ...ctFlightServerConfig.dom-node-turbopack.js |  2 +-
 .../forks/ReactFlightServerConfig.dom-node.js |  2 +-
 scripts/rollup/bundles.js                     | 31 ++++--
 scripts/shared/inlinedHostConfigs.js          | 97 ++++++++++---------
 90 files changed, 526 insertions(+), 147 deletions(-)
 rename packages/react-server-dom-esm/src/{ => client}/ReactFlightClientConfigBundlerESM.js (100%)
 rename packages/react-server-dom-esm/src/{ => client}/ReactFlightClientConfigTargetESMBrowser.js (100%)
 rename packages/react-server-dom-esm/src/{ => client}/ReactFlightClientConfigTargetESMServer.js (100%)
 rename packages/react-server-dom-esm/src/{ => client}/ReactFlightDOMClientBrowser.js (100%)
 rename packages/react-server-dom-esm/src/{ => client}/ReactFlightDOMClientNode.js (100%)
 rename packages/react-server-dom-esm/src/{ => server}/ReactFlightDOMServerNode.js (99%)
 rename packages/react-server-dom-esm/src/{ => server}/ReactFlightServerConfigESMBundler.js (92%)
 create mode 100644 packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigBundlerNode.js (97%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigBundlerTurbopack.js (98%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigBundlerTurbopackBrowser.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigBundlerTurbopackServer.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigTargetTurbopackBrowser.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightClientConfigTargetTurbopackServer.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightDOMClientBrowser.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightDOMClientEdge.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => client}/ReactFlightDOMClientNode.js (100%)
 rename packages/react-server-dom-turbopack/src/{ => server}/ReactFlightDOMServerBrowser.js (98%)
 rename packages/react-server-dom-turbopack/src/{ => server}/ReactFlightDOMServerEdge.js (98%)
 rename packages/react-server-dom-turbopack/src/{ => server}/ReactFlightDOMServerNode.js (99%)
 rename packages/react-server-dom-turbopack/src/{ => server}/ReactFlightServerConfigTurbopackBundler.js (95%)
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigBundlerNode.js (97%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigBundlerWebpack.js (98%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigBundlerWebpackBrowser.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigBundlerWebpackServer.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigTargetWebpackBrowser.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightClientConfigTargetWebpackServer.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightDOMClientBrowser.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightDOMClientEdge.js (100%)
 rename packages/react-server-dom-webpack/src/{ => client}/ReactFlightDOMClientNode.js (100%)
 rename packages/react-server-dom-webpack/src/{ => server}/ReactFlightDOMServerBrowser.js (98%)
 rename packages/react-server-dom-webpack/src/{ => server}/ReactFlightDOMServerEdge.js (98%)
 rename packages/react-server-dom-webpack/src/{ => server}/ReactFlightDOMServerNode.js (99%)
 rename packages/react-server-dom-webpack/src/{ => server}/ReactFlightServerConfigWebpackBundler.js (95%)
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js

diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
index 7ae8d5f5cdc7d9..55358ab05d10d6 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-esm.js
@@ -9,7 +9,7 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
index 28e2489cf22bb0..c3c511554ee6d3 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-turbopack.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
index 3a5ec6800fd57a..41bb93db386e83 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = false;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
index c08af0a6531de5..ac6d0933b78183 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-turbopack.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
index db8da426862156..eb17f259d3e195 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
index bf2071d6fc8647..9a17b9269a9482 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js
@@ -9,7 +9,7 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigBundlerESM';
-export * from 'react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM';
+export * from 'react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
index 16f649249dd370..f4226a93d86bcc 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack-bundled.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
index 68047af97b9f8a..b6f2b77dd3686d 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-turbopack.js
@@ -9,7 +9,7 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode';
-export * from 'react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode';
+export * from 'react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
index 37a5322140a8a5..ccc12228d837fb 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js
@@ -9,8 +9,8 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
index 867612c0ac2d7e..3425787b6434a7 100644
--- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
+++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js
@@ -9,7 +9,7 @@
 
 export * from 'react-client/src/ReactFlightClientStreamConfigNode';
 export * from 'react-client/src/ReactClientConsoleConfigServer';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode';
-export * from 'react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode';
+export * from 'react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer';
 export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
 export const usedWithSSR = true;
diff --git a/packages/react-server-dom-esm/client.browser.js b/packages/react-server-dom-esm/client.browser.js
index 7d26c2771e50a4..945ceed7f394ab 100644
--- a/packages/react-server-dom-esm/client.browser.js
+++ b/packages/react-server-dom-esm/client.browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientBrowser';
+export * from './src/client/ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-esm/client.node.js b/packages/react-server-dom-esm/client.node.js
index 4f435353a20f0c..c2e364f42f133c 100644
--- a/packages/react-server-dom-esm/client.node.js
+++ b/packages/react-server-dom-esm/client.node.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-esm/npm/server.node.js b/packages/react-server-dom-esm/npm/server.node.js
index 0896fc96b3aca4..579ab59b34b7ae 100644
--- a/packages/react-server-dom-esm/npm/server.node.js
+++ b/packages/react-server-dom-esm/npm/server.node.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-esm-server.node.production.js');
+  s = require('./cjs/react-server-dom-esm-server.node.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-esm-server.node.development.js');
+  s = require('./cjs/react-server-dom-esm-server.node.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-esm/server.node.js b/packages/react-server-dom-esm/server.node.js
index 7726b9bb929d48..6e644db0c7c790 100644
--- a/packages/react-server-dom-esm/server.node.js
+++ b/packages/react-server-dom-esm/server.node.js
@@ -7,4 +7,13 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-esm/src/ReactFlightClientConfigBundlerESM.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM.js
similarity index 100%
rename from packages/react-server-dom-esm/src/ReactFlightClientConfigBundlerESM.js
rename to packages/react-server-dom-esm/src/client/ReactFlightClientConfigBundlerESM.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser.js
similarity index 100%
rename from packages/react-server-dom-esm/src/ReactFlightClientConfigTargetESMBrowser.js
rename to packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMBrowser.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer.js b/packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer.js
similarity index 100%
rename from packages/react-server-dom-esm/src/ReactFlightClientConfigTargetESMServer.js
rename to packages/react-server-dom-esm/src/client/ReactFlightClientConfigTargetESMServer.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
similarity index 100%
rename from packages/react-server-dom-esm/src/ReactFlightDOMClientBrowser.js
rename to packages/react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
similarity index 100%
rename from packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js
rename to packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js
diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
similarity index 99%
rename from packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
rename to packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
index 9401cb67e8e47b..c724d89c2b435e 100644
--- a/packages/react-server-dom-esm/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
@@ -45,7 +45,7 @@ import {
 export {
   registerServerReference,
   registerClientReference,
-} from './ReactFlightESMReferences';
+} from '../ReactFlightESMReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-esm/src/ReactFlightServerConfigESMBundler.js b/packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js
similarity index 92%
rename from packages/react-server-dom-esm/src/ReactFlightServerConfigESMBundler.js
rename to packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js
index 97e32eeef76b3f..cba5223bcf7af4 100644
--- a/packages/react-server-dom-esm/src/ReactFlightServerConfigESMBundler.js
+++ b/packages/react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler.js
@@ -12,7 +12,7 @@ import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
 import type {
   ClientReference,
   ServerReference,
-} from './ReactFlightESMReferences';
+} from '../ReactFlightESMReferences';
 
 export type {ClientReference, ServerReference};
 
@@ -27,7 +27,10 @@ export type ClientReferenceMetadata = [
 
 export type ClientReferenceKey = string;
 
-export {isClientReference, isServerReference} from './ReactFlightESMReferences';
+export {
+  isClientReference,
+  isServerReference,
+} from '../ReactFlightESMReferences';
 
 export function getClientReferenceKey(
   reference: ClientReference<any>,
diff --git a/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000000..d14d2b8ed362a7
--- /dev/null
+++ b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-turbopack/client.browser.js b/packages/react-server-dom-turbopack/client.browser.js
index 7d26c2771e50a4..945ceed7f394ab 100644
--- a/packages/react-server-dom-turbopack/client.browser.js
+++ b/packages/react-server-dom-turbopack/client.browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientBrowser';
+export * from './src/client/ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-turbopack/client.edge.js b/packages/react-server-dom-turbopack/client.edge.js
index fadceeaf8443aa..0ba1d6b6b0457e 100644
--- a/packages/react-server-dom-turbopack/client.edge.js
+++ b/packages/react-server-dom-turbopack/client.edge.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientEdge';
+export * from './src/client/ReactFlightDOMClientEdge';
diff --git a/packages/react-server-dom-turbopack/client.node.js b/packages/react-server-dom-turbopack/client.node.js
index 4f435353a20f0c..c2e364f42f133c 100644
--- a/packages/react-server-dom-turbopack/client.node.js
+++ b/packages/react-server-dom-turbopack/client.node.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-turbopack/client.node.unbundled.js b/packages/react-server-dom-turbopack/client.node.unbundled.js
index 4f435353a20f0c..c2e364f42f133c 100644
--- a/packages/react-server-dom-turbopack/client.node.unbundled.js
+++ b/packages/react-server-dom-turbopack/client.node.unbundled.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-turbopack/npm/server.browser.js b/packages/react-server-dom-turbopack/npm/server.browser.js
index 1d0364c5d392ba..ec8d6b013e0bd8 100644
--- a/packages/react-server-dom-turbopack/npm/server.browser.js
+++ b/packages/react-server-dom-turbopack/npm/server.browser.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.browser.production.js');
+  s = require('./cjs/react-server-dom-turbopack-server.browser.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
+  s = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/server.edge.js b/packages/react-server-dom-turbopack/npm/server.edge.js
index c893cc3cdfa6e6..e34b18fa0156a7 100644
--- a/packages/react-server-dom-turbopack/npm/server.edge.js
+++ b/packages/react-server-dom-turbopack/npm/server.edge.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.edge.production.js');
+  s = require('./cjs/react-server-dom-turbopack-server.edge.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
+  s = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/server.node.js b/packages/react-server-dom-turbopack/npm/server.node.js
index ac6128983dc6bc..f9a4cf31f6e8c1 100644
--- a/packages/react-server-dom-turbopack/npm/server.node.js
+++ b/packages/react-server-dom-turbopack/npm/server.node.js
@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.node.production.js');
+  s = require('./cjs/react-server-dom-turbopack-server.node.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.node.development.js');
+  s = require('./cjs/react-server-dom-turbopack-server.node.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/npm/server.node.unbundled.js b/packages/react-server-dom-turbopack/npm/server.node.unbundled.js
index 86f9dcdefb1d7d..1e8648ccef133a 100644
--- a/packages/react-server-dom-turbopack/npm/server.node.unbundled.js
+++ b/packages/react-server-dom-turbopack/npm/server.node.unbundled.js
@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.node.unbundled.production.js');
+  s = require('./cjs/react-server-dom-turbopack-server.node.unbundled.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-turbopack-server.node.unbundled.development.js');
+  s = require('./cjs/react-server-dom-turbopack-server.node.unbundled.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-turbopack/server.browser.js b/packages/react-server-dom-turbopack/server.browser.js
index 41a9fb5c449686..46f5b906104b63 100644
--- a/packages/react-server-dom-turbopack/server.browser.js
+++ b/packages/react-server-dom-turbopack/server.browser.js
@@ -7,4 +7,13 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerBrowser';
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-turbopack/server.edge.js b/packages/react-server-dom-turbopack/server.edge.js
index 98f975cb4706f4..c527c7f76a74fd 100644
--- a/packages/react-server-dom-turbopack/server.edge.js
+++ b/packages/react-server-dom-turbopack/server.edge.js
@@ -7,4 +7,13 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerEdge';
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-turbopack/server.node.js b/packages/react-server-dom-turbopack/server.node.js
index 7726b9bb929d48..7e511aa577ceca 100644
--- a/packages/react-server-dom-turbopack/server.node.js
+++ b/packages/react-server-dom-turbopack/server.node.js
@@ -7,4 +7,14 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-turbopack/server.node.unbundled.js b/packages/react-server-dom-turbopack/server.node.unbundled.js
index 7726b9bb929d48..9b8455bf66877a 100644
--- a/packages/react-server-dom-turbopack/server.node.unbundled.js
+++ b/packages/react-server-dom-turbopack/server.node.unbundled.js
@@ -7,4 +7,14 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node.unbundled';
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode.js
similarity index 97%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode.js
index b2bf9b8ae0b537..36832c47e39ec0 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode.js
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode.js
@@ -13,7 +13,7 @@ import type {
   RejectedThenable,
 } from 'shared/ReactTypes';
 
-import type {ImportMetadata} from './shared/ReactFlightImportMetadata';
+import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
 import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
 
 import {
@@ -21,7 +21,7 @@ import {
   CHUNKS,
   NAME,
   isAsyncImport,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
 
 export type SSRModuleMap = {
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js
similarity index 98%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js
index b20ad69a408d60..212970222080f5 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js
+++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js
@@ -16,7 +16,7 @@ import type {
 import type {
   ImportMetadata,
   ImportManifestEntry,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
 
 import {
@@ -24,7 +24,7 @@ import {
   CHUNKS,
   NAME,
   isAsyncImport,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 
 import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
 
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackBrowser.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackBrowser.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightClientConfigTargetTurbopackServer.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMClientBrowser.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMClientEdge.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
similarity index 100%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMClientNode.js
rename to packages/react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
similarity index 98%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js
rename to packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
index abaf6fe59d5cd7..58a87992d6c6ee 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
@@ -35,7 +35,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightTurbopackReferences';
+} from '../ReactFlightTurbopackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
similarity index 98%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js
rename to packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
index abaf6fe59d5cd7..58a87992d6c6ee 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
@@ -35,7 +35,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightTurbopackReferences';
+} from '../ReactFlightTurbopackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
similarity index 99%
rename from packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js
rename to packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
index 5398ac01b7a0b3..d76bcb5759b0ee 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
@@ -46,7 +46,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightTurbopackReferences';
+} from '../ReactFlightTurbopackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler.js b/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js
similarity index 95%
rename from packages/react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler.js
rename to packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js
index 73a2819a8cebd7..2ebc5d3f104215 100644
--- a/packages/react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js
@@ -11,12 +11,12 @@ import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
 import type {
   ImportMetadata,
   ImportManifestEntry,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 
 import type {
   ClientReference,
   ServerReference,
-} from './ReactFlightTurbopackReferences';
+} from '../ReactFlightTurbopackReferences';
 
 export type {ClientReference, ServerReference};
 
@@ -34,7 +34,7 @@ export type ClientReferenceKey = string;
 export {
   isClientReference,
   isServerReference,
-} from './ReactFlightTurbopackReferences';
+} from '../ReactFlightTurbopackReferences';
 
 export function getClientReferenceKey(
   reference: ClientReference<any>,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
new file mode 100644
index 00000000000000..0100b65554aec0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
new file mode 100644
index 00000000000000..eb887b73a8ae87
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/client.browser.js b/packages/react-server-dom-webpack/client.browser.js
index 7d26c2771e50a4..945ceed7f394ab 100644
--- a/packages/react-server-dom-webpack/client.browser.js
+++ b/packages/react-server-dom-webpack/client.browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientBrowser';
+export * from './src/client/ReactFlightDOMClientBrowser';
diff --git a/packages/react-server-dom-webpack/client.edge.js b/packages/react-server-dom-webpack/client.edge.js
index fadceeaf8443aa..0ba1d6b6b0457e 100644
--- a/packages/react-server-dom-webpack/client.edge.js
+++ b/packages/react-server-dom-webpack/client.edge.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientEdge';
+export * from './src/client/ReactFlightDOMClientEdge';
diff --git a/packages/react-server-dom-webpack/client.node.js b/packages/react-server-dom-webpack/client.node.js
index 4f435353a20f0c..c2e364f42f133c 100644
--- a/packages/react-server-dom-webpack/client.node.js
+++ b/packages/react-server-dom-webpack/client.node.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-webpack/client.node.unbundled.js b/packages/react-server-dom-webpack/client.node.unbundled.js
index 4f435353a20f0c..c2e364f42f133c 100644
--- a/packages/react-server-dom-webpack/client.node.unbundled.js
+++ b/packages/react-server-dom-webpack/client.node.unbundled.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMClientNode';
+export * from './src/client/ReactFlightDOMClientNode';
diff --git a/packages/react-server-dom-webpack/npm/server.browser.js b/packages/react-server-dom-webpack/npm/server.browser.js
index 12fe5da29af0f8..326cc56b6587b8 100644
--- a/packages/react-server-dom-webpack/npm/server.browser.js
+++ b/packages/react-server-dom-webpack/npm/server.browser.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.edge.js b/packages/react-server-dom-webpack/npm/server.edge.js
index ceab7b1ea06266..591b84476884de 100644
--- a/packages/react-server-dom-webpack/npm/server.edge.js
+++ b/packages/react-server-dom-webpack/npm/server.edge.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.node.js b/packages/react-server-dom-webpack/npm/server.node.js
index 84da8eda2a2477..6885e43a44fc0f 100644
--- a/packages/react-server-dom-webpack/npm/server.node.js
+++ b/packages/react-server-dom-webpack/npm/server.node.js
@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/npm/server.node.unbundled.js b/packages/react-server-dom-webpack/npm/server.node.unbundled.js
index 26e6677eed9bc0..333b6b0d3122ee 100644
--- a/packages/react-server-dom-webpack/npm/server.node.unbundled.js
+++ b/packages/react-server-dom-webpack/npm/server.node.unbundled.js
@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;
diff --git a/packages/react-server-dom-webpack/server.browser.js b/packages/react-server-dom-webpack/server.browser.js
index 41a9fb5c449686..46f5b906104b63 100644
--- a/packages/react-server-dom-webpack/server.browser.js
+++ b/packages/react-server-dom-webpack/server.browser.js
@@ -7,4 +7,13 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerBrowser';
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-webpack/server.edge.js b/packages/react-server-dom-webpack/server.edge.js
index 98f975cb4706f4..c527c7f76a74fd 100644
--- a/packages/react-server-dom-webpack/server.edge.js
+++ b/packages/react-server-dom-webpack/server.edge.js
@@ -7,4 +7,13 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerEdge';
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-webpack/server.node.js b/packages/react-server-dom-webpack/server.node.js
index 7726b9bb929d48..7e511aa577ceca 100644
--- a/packages/react-server-dom-webpack/server.node.js
+++ b/packages/react-server-dom-webpack/server.node.js
@@ -7,4 +7,14 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-webpack/server.node.unbundled.js b/packages/react-server-dom-webpack/server.node.unbundled.js
index 7726b9bb929d48..9b8455bf66877a 100644
--- a/packages/react-server-dom-webpack/server.node.unbundled.js
+++ b/packages/react-server-dom-webpack/server.node.unbundled.js
@@ -7,4 +7,14 @@
  * @flow
  */
 
-export * from './src/ReactFlightDOMServerNode';
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './src/server/react-flight-dom-server.node.unbundled';
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode.js
similarity index 97%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode.js
index b2bf9b8ae0b537..36832c47e39ec0 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode.js
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode.js
@@ -13,7 +13,7 @@ import type {
   RejectedThenable,
 } from 'shared/ReactTypes';
 
-import type {ImportMetadata} from './shared/ReactFlightImportMetadata';
+import type {ImportMetadata} from '../shared/ReactFlightImportMetadata';
 import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
 
 import {
@@ -21,7 +21,7 @@ import {
   CHUNKS,
   NAME,
   isAsyncImport,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
 
 export type SSRModuleMap = {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js
similarity index 98%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js
index 754578e8e7b7f5..de3afd6c4e8b46 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js
+++ b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js
@@ -16,7 +16,7 @@ import type {
 import type {
   ImportMetadata,
   ImportManifestEntry,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 import type {ModuleLoading} from 'react-client/src/ReactFlightClientConfig';
 
 import {
@@ -24,7 +24,7 @@ import {
   CHUNKS,
   NAME,
   isAsyncImport,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 
 import {prepareDestinationWithChunks} from 'react-client/src/ReactFlightClientConfig';
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackBrowser.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackBrowser.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer.js b/packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightClientConfigTargetWebpackServer.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightClientConfigTargetWebpackServer.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
similarity index 100%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js
rename to packages/react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
similarity index 98%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
rename to packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
index 24b6018f82048e..6a6f2936f846b3 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
@@ -35,7 +35,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightWebpackReferences';
+} from '../ReactFlightWebpackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
similarity index 98%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
rename to packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
index 24b6018f82048e..6a6f2936f846b3 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
@@ -35,7 +35,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightWebpackReferences';
+} from '../ReactFlightWebpackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
similarity index 99%
rename from packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
rename to packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
index 81f64d2a6a989c..73479bdf3ef043 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
@@ -46,7 +46,7 @@ export {
   registerServerReference,
   registerClientReference,
   createClientModuleProxy,
-} from './ReactFlightWebpackReferences';
+} from '../ReactFlightWebpackReferences';
 
 import type {TemporaryReferenceSet} from 'react-server/src/ReactFlightServerTemporaryReferences';
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler.js b/packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js
similarity index 95%
rename from packages/react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler.js
rename to packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js
index 49c17b168b96e8..a0872b61fa475b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.js
@@ -11,12 +11,12 @@ import type {ReactClientValue} from 'react-server/src/ReactFlightServer';
 import type {
   ImportMetadata,
   ImportManifestEntry,
-} from './shared/ReactFlightImportMetadata';
+} from '../shared/ReactFlightImportMetadata';
 
 import type {
   ClientReference,
   ServerReference,
-} from './ReactFlightWebpackReferences';
+} from '../ReactFlightWebpackReferences';
 
 export type {ClientReference, ServerReference};
 
@@ -34,7 +34,7 @@ export type ClientReferenceKey = string;
 export {
   isClientReference,
   isServerReference,
-} from './ReactFlightWebpackReferences';
+} from '../ReactFlightWebpackReferences';
 
 export function getClientReferenceKey(
   reference: ClientReference<any>,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
new file mode 100644
index 00000000000000..0100b65554aec0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
new file mode 100644
index 00000000000000..eb887b73a8ae87
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
index dc8ead927775ad..634b5cd939a7f4 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-esm.js
@@ -10,7 +10,7 @@
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-esm/src/ReactFlightServerConfigESMBundler';
+export * from 'react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = false;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js
index 256eafd6c41a6b..6b4493f49b24ec 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-turbopack.js
@@ -10,7 +10,7 @@
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = false;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
index 6715ccbbafe205..c2b55995b6f1f6 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
@@ -10,7 +10,7 @@
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = false;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js
index ffca2eca98dc8a..bcaca19284469b 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-turbopack.js
@@ -9,7 +9,7 @@
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 // For now, we get this from the global scope, but this will likely move to a module.
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
index fb6d0039f79ed4..e16f8cfb2ec575 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-edge.js
@@ -10,7 +10,7 @@
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 // For now, we get this from the global scope, but this will likely move to a module.
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js
index a3393bc1c3034f..52602b1eb2848a 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-esm.js
@@ -12,7 +12,7 @@ import {AsyncLocalStorage} from 'async_hooks';
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-esm/src/ReactFlightServerConfigESMBundler';
+export * from 'react-server-dom-esm/src/server/ReactFlightServerConfigESMBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = true;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js
index d3f4258625d773..0205daab10853d 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node-turbopack.js
@@ -12,7 +12,7 @@ import {AsyncLocalStorage} from 'async_hooks';
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-turbopack/src/ReactFlightServerConfigTurbopackBundler';
+export * from 'react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = true;
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
index 48ca5af07c2786..0cd21ac7257b95 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-node.js
@@ -12,7 +12,7 @@ import {AsyncLocalStorage} from 'async_hooks';
 import type {Request} from 'react-server/src/ReactFlightServer';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
-export * from 'react-server-dom-webpack/src/ReactFlightServerConfigWebpackBundler';
+export * from 'react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler';
 export * from 'react-dom-bindings/src/server/ReactFlightServerConfigDOM';
 
 export const supportsRequestStorage = true;
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 2b7841fc732f95..ea4d1a034bf478 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -392,7 +392,9 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-webpack/server.browser',
+    entry:
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
+    name: 'react-server-dom-webpack-server.browser',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -402,7 +404,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-webpack/server.node',
+    entry: 'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-webpack-server.node',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -412,7 +415,9 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-webpack/server.node.unbundled',
+    entry:
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled',
+    name: 'react-server-dom-webpack-server.node.unbundled',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -422,7 +427,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-webpack/server.edge',
+    entry: 'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
+    name: 'react-server-dom-webpack-server.edge',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -508,7 +514,9 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-turbopack/server.browser',
+    entry:
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
+    name: 'react-server-dom-turbopack-server.browser',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -518,7 +526,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-turbopack/server.node',
+    entry: 'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-turbopack-server.node',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -528,7 +537,9 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-turbopack/server.node.unbundled',
+    entry:
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled',
+    name: 'react-server-dom-turbopack-server.node.unbundled',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -538,7 +549,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-turbopack/server.edge',
+    entry: 'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
+    name: 'react-server-dom-turbopack-server.edge',
     condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
@@ -617,7 +629,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-server-dom-esm/server.node',
+    entry: 'react-server-dom-esm/src/server/react-flight-dom-server.node',
+    name: 'react-server-dom-esm-server.node',
     condition: 'react-server',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index ef27610f06471b..4a07e036530a25 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -19,8 +19,8 @@ module.exports = [
       'react-dom/static.node',
       'react-dom/test-utils',
       'react-dom/unstable_server-external-runtime',
-      'react-server-dom-webpack/server.node.unbundled',
       'react-server-dom-webpack/client.node.unbundled',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled',
     ],
     paths: [
       'react-dom',
@@ -43,9 +43,10 @@ module.exports = [
       'react-server-dom-webpack/client.node.unbundled',
       'react-server-dom-webpack/server',
       'react-server-dom-webpack/server.node.unbundled',
-      'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/server.node
-      'react-server-dom-webpack/src/ReactFlightDOMClientNode.js', // react-server-dom-webpack/client.node
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerNode.js',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-webpack/client.node
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode.js',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-webpack/src/server/react-flight-dom-server.node
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -59,8 +60,8 @@ module.exports = [
   {
     shortName: 'dom-node-webpack',
     entryPoints: [
-      'react-server-dom-webpack/server.node',
       'react-server-dom-webpack/client.node',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node',
     ],
     paths: [
       'react-dom',
@@ -81,9 +82,10 @@ module.exports = [
       'react-server-dom-webpack/client.node',
       'react-server-dom-webpack/server',
       'react-server-dom-webpack/server.node',
-      'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/server.node
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js',
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.node',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-webpack/src/server/react-flight-dom-server.node
       'react-server-dom-webpack/node-register',
       'react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js',
       'react-devtools',
@@ -99,8 +101,8 @@ module.exports = [
   {
     shortName: 'dom-node-turbopack',
     entryPoints: [
-      'react-server-dom-turbopack/server.node.unbundled',
       'react-server-dom-turbopack/client.node.unbundled',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled',
     ],
     paths: [
       'react-dom',
@@ -121,9 +123,10 @@ module.exports = [
       'react-server-dom-turbopack/client.node.unbundled',
       'react-server-dom-turbopack/server',
       'react-server-dom-turbopack/server.node.unbundled',
-      'react-server-dom-turbopack/src/ReactFlightDOMServerNode.js', // react-server-dom-turbopack/server.node.unbundled
-      'react-server-dom-turbopack/src/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node.unbundled
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerNode.js',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node.unbundled
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode.js',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled
       'react-server-dom-turbopack/node-register',
       'react-server-dom-turbopack/src/ReactFlightTurbopackNodeRegister.js',
       'react-devtools',
@@ -139,8 +142,8 @@ module.exports = [
   {
     shortName: 'dom-node-turbopack-bundled',
     entryPoints: [
-      'react-server-dom-turbopack/server.node',
       'react-server-dom-turbopack/client.node',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
     ],
     paths: [
       'react-dom',
@@ -161,10 +164,11 @@ module.exports = [
       'react-server-dom-turbopack/client.node',
       'react-server-dom-turbopack/server',
       'react-server-dom-turbopack/server.node',
-      'react-server-dom-turbopack/src/ReactFlightDOMServerNode.js', // react-server-dom-turbopack/server.node
-      'react-server-dom-turbopack/src/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js',
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.node',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.node
       'react-server-dom-turbopack/node-register',
       'react-server-dom-turbopack/src/ReactFlightTurbopackNodeRegister.js',
       'react-devtools',
@@ -212,8 +216,8 @@ module.exports = [
       'react-dom/src/server/react-dom-server.browser.js',
       'react-dom/static.browser',
       'react-dom/unstable_server-external-runtime',
-      'react-server-dom-webpack/server.browser',
       'react-server-dom-webpack/client.browser',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
     ],
     paths: [
       'react-dom',
@@ -234,10 +238,11 @@ module.exports = [
       'react-server-dom-webpack/client',
       'react-server-dom-webpack/client.browser',
       'react-server-dom-webpack/server.browser',
-      'react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
-      'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/server.browser
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js',
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackBrowser.js',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.browser',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/src/server/react-flight-dom-server.browser
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -264,7 +269,7 @@ module.exports = [
       'react-server-dom-esm',
       'react-server-dom-esm/client',
       'react-server-dom-esm/client.browser',
-      'react-server-dom-esm/src/ReactFlightDOMClientBrowser.js', // react-server-dom-esm/client.browser
+      'react-server-dom-esm/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-esm/client.browser
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -278,7 +283,7 @@ module.exports = [
     shortName: 'dom-browser-turbopack',
     entryPoints: [
       'react-server-dom-turbopack/client.browser',
-      'react-server-dom-turbopack/server.browser',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
     ],
     paths: [
       'react-dom',
@@ -287,17 +292,18 @@ module.exports = [
       'react-dom/server',
       'react-dom/server.node',
       'react-dom-bindings',
+      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
+      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
+      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
       'react-server-dom-turbopack',
       'react-server-dom-turbopack/client',
       'react-server-dom-turbopack/client.browser',
       'react-server-dom-turbopack/server.browser',
-      'react-server-dom-turbopack/src/ReactFlightDOMClientBrowser.js', // react-server-dom-turbopack/client.browser
-      'react-server-dom-turbopack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-turbopack/server.browser
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js',
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackBrowser.js',
-      'react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js',
-      'react-dom-bindings/src/server/ReactFlightServerConfigDOM.js',
-      'react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-turbopack/client.browser
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.browser',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.browser
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -312,8 +318,8 @@ module.exports = [
     entryPoints: [
       'react-dom/src/server/react-dom-server.edge.js',
       'react-dom/static.edge',
-      'react-server-dom-webpack/server.edge',
       'react-server-dom-webpack/client.edge',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
     ],
     paths: [
       'react-dom',
@@ -333,10 +339,11 @@ module.exports = [
       'react-server-dom-webpack',
       'react-server-dom-webpack/client.edge',
       'react-server-dom-webpack/server.edge',
-      'react-server-dom-webpack/src/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.edge
-      'react-server-dom-webpack/src/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/server.edge
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js',
-      'react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.edge
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
+      'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
+      'react-server-dom-webpack/src/server/react-flight-dom-server.edge',
+      'react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js', // react-server-dom-webpack/src/server/react-flight-dom-server.edge
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -350,8 +357,8 @@ module.exports = [
   {
     shortName: 'dom-edge-turbopack',
     entryPoints: [
-      'react-server-dom-turbopack/server.edge',
       'react-server-dom-turbopack/client.edge',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
     ],
     paths: [
       'react-dom',
@@ -371,10 +378,11 @@ module.exports = [
       'react-server-dom-turbopack',
       'react-server-dom-turbopack/client.edge',
       'react-server-dom-turbopack/server.edge',
-      'react-server-dom-turbopack/src/ReactFlightDOMClientEdge.js', // react-server-dom-turbopack/client.edge
-      'react-server-dom-turbopack/src/ReactFlightDOMServerEdge.js', // react-server-dom-turbopack/server.edge
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopack.js',
-      'react-server-dom-turbopack/src/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-turbopack/client.edge
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
+      'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
+      'react-server-dom-turbopack/src/server/react-flight-dom-server.edge',
+      'react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js', // react-server-dom-turbopack/src/server/react-flight-dom-server.edge
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',
@@ -388,8 +396,8 @@ module.exports = [
   {
     shortName: 'dom-node-esm',
     entryPoints: [
-      'react-server-dom-esm/server.node',
       'react-server-dom-esm/client.node',
+      'react-server-dom-esm/src/server/react-flight-dom-server.node',
     ],
     paths: [
       'react-dom',
@@ -411,8 +419,9 @@ module.exports = [
       'react-server-dom-esm/client.node',
       'react-server-dom-esm/server',
       'react-server-dom-esm/server.node',
-      'react-server-dom-esm/src/ReactFlightDOMServerNode.js', // react-server-dom-esm/server.node
-      'react-server-dom-esm/src/ReactFlightDOMClientNode.js', // react-server-dom-esm/client.node
+      'react-server-dom-esm/src/client/ReactFlightDOMClientNode.js', // react-server-dom-esm/client.node
+      'react-server-dom-esm/src/server/react-flight-dom-server.node',
+      'react-server-dom-esm/src/server/ReactFlightDOMServerNode.js', // react-server-dom-esm/src/server/react-flight-dom-server.node
       'react-devtools',
       'react-devtools-core',
       'react-devtools-shell',

From cea13feb3449317d8570ba17603747497037d264 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@vercel.com>
Date: Thu, 15 Aug 2024 08:50:56 +0200
Subject: [PATCH 20/40] Publish `experimental_renderToHTML` (#30690)

---
 packages/react-markup/README.md               |  6 ++-
 packages/react-markup/package.json            |  3 +-
 .../react-markup/src/ReactMarkupClient.js     |  2 +-
 .../react-markup/src/ReactMarkupServer.js     |  2 +-
 .../src/__tests__/ReactMarkupClient-test.js   | 30 +++++++------
 .../src/__tests__/ReactMarkupServer-test.js   | 43 +++++++++++++------
 6 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/packages/react-markup/README.md b/packages/react-markup/README.md
index 103e656f8aa1e7..f01c9be6b36de4 100644
--- a/packages/react-markup/README.md
+++ b/packages/react-markup/README.md
@@ -11,7 +11,7 @@ npm install react react-markup
 ## Usage
 
 ```js
-import { renderToHTML } from 'react-markup';
+import { experimental_renderToHTML as renderToHTML } from 'react-markup';
 import EmailTemplate from './my-email-template-component.js'
 
 async function action(email, name) {
@@ -30,3 +30,7 @@ Note that this is an async function that needs to be awaited - unlike the legacy
 ### `react-markup`
 
 See https://react.dev/reference/react-markup
+
+## Thanks
+
+The React team thanks [Nikolai Mavrenkov](https://www.koluch.ru/) for donating the `react-markup` package name.
diff --git a/packages/react-markup/package.json b/packages/react-markup/package.json
index f0b98c7a8ab679..6292cd6f97504b 100644
--- a/packages/react-markup/package.json
+++ b/packages/react-markup/package.json
@@ -1,8 +1,7 @@
 {
   "name": "react-markup",
   "version": "19.0.0",
-  "private": true,
-  "description": "React package generating embedded HTML markup such as e-mails using Server Components.",
+  "description": "React package generating embedded markup such as e-mails with support for Server Components.",
   "main": "index.js",
   "repository": {
     "type": "git",
diff --git a/packages/react-markup/src/ReactMarkupClient.js b/packages/react-markup/src/ReactMarkupClient.js
index 4fb18e27c7d5bb..e9cf689104169a 100644
--- a/packages/react-markup/src/ReactMarkupClient.js
+++ b/packages/react-markup/src/ReactMarkupClient.js
@@ -31,7 +31,7 @@ type MarkupOptions = {
   onError?: (error: mixed, errorInfo: ErrorInfo) => ?string,
 };
 
-export function renderToHTML(
+export function experimental_renderToHTML(
   children: ReactNodeList,
   options?: MarkupOptions,
 ): Promise<string> {
diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js
index c6d71e976b2560..8608034293a4c8 100644
--- a/packages/react-markup/src/ReactMarkupServer.js
+++ b/packages/react-markup/src/ReactMarkupServer.js
@@ -75,7 +75,7 @@ function noServerCallOrFormAction() {
   );
 }
 
-export function renderToHTML(
+export function experimental_renderToHTML(
   children: ReactMarkupNodeList,
   options?: MarkupOptions,
 ): Promise<string> {
diff --git a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
index a9193474234bbf..e1e8eab4068e27 100644
--- a/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupClient-test.js
@@ -43,7 +43,7 @@ if (!__EXPERIMENTAL__) {
         return <div>hello world</div>;
       }
 
-      const html = await ReactMarkup.renderToHTML(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       expect(html).toBe('<div>hello world</div>');
     });
 
@@ -52,14 +52,14 @@ if (!__EXPERIMENTAL__) {
         return <div>{'hello '.repeat(200)}world</div>;
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         <html>
           <body>hello</body>
         </html>,
@@ -76,8 +76,10 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot use state or effect Hooks in renderToHTML because this component will never be hydrated.',
+      );
     });
 
     it('should error on refs passed to host components', async () => {
@@ -87,8 +89,10 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot pass ref in renderToHTML because they will never be hydrated.',
+      );
     });
 
     it('should error on callbacks passed to event handlers', async () => {
@@ -100,8 +104,10 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(<Component />);
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(<Component />);
+      }).rejects.toThrow(
+        'Cannot pass event handlers (onClick) in renderToHTML because the HTML will never be hydrated so they can never get called.',
+      );
     });
 
     it('supports the useId Hook', async () => {
@@ -142,7 +148,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToHTML(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       const container = document.createElement('div');
       container.innerHTML = html;
 
@@ -176,7 +182,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToHTML(<Component />);
+      const html = await ReactMarkup.experimental_renderToHTML(<Component />);
       expect(html).toBe('<div>01</div>');
     });
 
@@ -199,7 +205,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(
+        await ReactMarkup.experimental_renderToHTML(
           <div>
             <Foo />
           </div>,
diff --git a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
index 169c4ba5e6c5b8..1e0cce3c9a150a 100644
--- a/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
+++ b/packages/react-markup/src/__tests__/ReactMarkupServer-test.js
@@ -64,7 +64,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello world');
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>hello world</div>');
@@ -76,15 +76,14 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, 'hello '.repeat(200) + 'world');
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>' + ('hello '.repeat(200) + 'world') + '</div>');
     });
 
     it('should prefix html tags with a doctype', async () => {
-      const html = await ReactMarkup.renderToHTML(
-        // We can't use JSX because that's client-JSX in our tests.
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(
           'html',
           null,
@@ -104,8 +103,10 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(React.createElement(Component));
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrow('React.useState is not a function');
     });
 
     it('should error on refs passed to host components', async () => {
@@ -116,8 +117,12 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(React.createElement(Component));
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrow(
+        'Refs cannot be used in Server Components, nor passed to Client Components.',
+      );
     });
 
     it('should error on callbacks passed to event handlers', async () => {
@@ -130,8 +135,20 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(React.createElement(Component));
-      }).rejects.toThrow();
+        await ReactMarkup.experimental_renderToHTML(
+          React.createElement(Component),
+        );
+      }).rejects.toThrowError(
+        __DEV__
+          ? `Event handlers cannot be passed to Client Component props.\n` +
+              '  <div onClick={function onClick}>\n' +
+              '               ^^^^^^^^^^^^^^^^^^\n' +
+              'If you need interactivity, consider converting part of this to a Client Component.'
+          : `Event handlers cannot be passed to Client Component props.\n` +
+              '  {onClick: function onClick}\n' +
+              '            ^^^^^^^^^^^^^^^^\n' +
+              'If you need interactivity, consider converting part of this to a Client Component.',
+      );
     });
 
     it('supports the useId Hook', async () => {
@@ -173,7 +190,7 @@ if (!__EXPERIMENTAL__) {
         );
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       const container = document.createElement('div');
@@ -204,7 +221,7 @@ if (!__EXPERIMENTAL__) {
         return React.createElement('div', null, a, b);
       }
 
-      const html = await ReactMarkup.renderToHTML(
+      const html = await ReactMarkup.experimental_renderToHTML(
         React.createElement(Component),
       );
       expect(html).toBe('<div>00</div>');
@@ -225,7 +242,7 @@ if (!__EXPERIMENTAL__) {
       }
 
       await expect(async () => {
-        await ReactMarkup.renderToHTML(
+        await ReactMarkup.experimental_renderToHTML(
           React.createElement('div', null, React.createElement(Foo)),
           {
             onError(error, errorInfo) {

From c39da3e4de0ad0db56ad99119efe3efc6c72abf1 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Tue, 13 Aug 2024 22:38:40 -0400
Subject: [PATCH 21/40] [compiler] Off-by-default validation against setState
 directly in passive effect

Per discussion today, adds validation against calling setState "during" passive effects. Basically, it's fine to _schedule_ setState to be called (via a timeout, listener, etc) but generally not recommended to call setState during the effect since that will trigger a cascading render.

This validation is off by default, i'm putting this up for discussion and to experiment with it internally.

ghstack-source-id: 5f385ddab59561ec3939ae5ece265dfee4f2cb56
Pull Request resolved: https://github.com/facebook/react/pull/30685
---
 .../src/Entrypoint/Pipeline.ts                |   5 +
 .../src/HIR/Environment.ts                    |   6 +
 .../ValidateNoSetStateInPassiveEffects.ts     | 152 ++++++++++++++++++
 ...setState-in-useEffect-transitive.expect.md |  37 +++++
 ...nvalid-setState-in-useEffect-transitive.js |  16 ++
 ...or.invalid-setState-in-useEffect.expect.md |  31 ++++
 .../error.invalid-setState-in-useEffect.js    |  10 ++
 ...in-useEffect-listener-transitive.expect.md |  60 +++++++
 ...tState-in-useEffect-listener-transitive.js |  18 +++
 ...d-setState-in-useEffect-listener.expect.md |  53 ++++++
 .../valid-setState-in-useEffect-listener.js   |  15 ++
 11 files changed, 403 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInPassiveEffects.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
index 1c96e65c71ef5f..590aba2fdc0c48 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
@@ -104,6 +104,7 @@ import {validateLocalsNotReassignedAfterRender} from '../Validation/ValidateLoca
 import {outlineFunctions} from '../Optimization/OutlineFunctions';
 import {propagatePhiTypes} from '../TypeInference/PropagatePhiTypes';
 import {lowerContextAccess} from '../Optimization/LowerContextAccess';
+import {validateNoSetStateInPassiveEffects} from '../Validation/ValidateNoSetStateInPassiveEffects';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -244,6 +245,10 @@ function* runWithEnvironment(
     validateNoSetStateInRender(hir);
   }
 
+  if (env.config.validateNoSetStateInPassiveEffects) {
+    validateNoSetStateInPassiveEffects(hir);
+  }
+
   inferReactivePlaces(hir);
   yield log({kind: 'hir', name: 'InferReactivePlaces', value: hir});
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
index 7a83f7e3a0b767..7eef0a7cc24b9f 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
@@ -231,6 +231,12 @@ const EnvironmentConfigSchema = z.object({
    */
   validateNoSetStateInRender: z.boolean().default(true),
 
+  /**
+   * Validates that setState is not called directly within a passive effect (useEffect).
+   * Scheduling a setState (with an event listener, subscription, etc) is valid.
+   */
+  validateNoSetStateInPassiveEffects: z.boolean().default(false),
+
   /**
    * Validates that the dependencies of all effect hooks are memoized. This helps ensure
    * that Forget does not introduce infinite renders caused by a dependency changing,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInPassiveEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInPassiveEffects.ts
new file mode 100644
index 00000000000000..2c6e7d8ac67cd3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInPassiveEffects.ts
@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError, ErrorSeverity} from '../CompilerError';
+import {
+  HIRFunction,
+  IdentifierId,
+  isSetStateType,
+  isUseEffectHookType,
+  Place,
+} from '../HIR';
+import {eachInstructionValueOperand} from '../HIR/visitors';
+
+/**
+ * Validates against calling setState in the body of a *passive* effect (useEffect),
+ * while allowing calling setState in callbacks scheduled by the effect.
+ *
+ * Calling setState during execution of a useEffect triggers a re-render, which is
+ * often bad for performance and frequently has more efficient and straightforward
+ * alternatives. See https://react.dev/learn/you-might-not-need-an-effect for examples.
+ */
+export function validateNoSetStateInPassiveEffects(fn: HIRFunction): void {
+  const setStateFunctions: Map<IdentifierId, Place> = new Map();
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'LoadLocal': {
+          if (setStateFunctions.has(instr.value.place.identifier.id)) {
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.place,
+            );
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          if (setStateFunctions.has(instr.value.value.identifier.id)) {
+            setStateFunctions.set(
+              instr.value.lvalue.place.identifier.id,
+              instr.value.value,
+            );
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.value,
+            );
+          }
+          break;
+        }
+        case 'FunctionExpression': {
+          if (
+            // faster-path to check if the function expression references a setState
+            [...eachInstructionValueOperand(instr.value)].some(
+              operand =>
+                isSetStateType(operand.identifier) ||
+                setStateFunctions.has(operand.identifier.id),
+            )
+          ) {
+            const callee = getSetStateCall(
+              instr.value.loweredFunc.func,
+              setStateFunctions,
+            );
+            if (callee !== null) {
+              setStateFunctions.set(instr.lvalue.identifier.id, callee);
+            }
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const callee =
+            instr.value.kind === 'MethodCall'
+              ? instr.value.receiver
+              : instr.value.callee;
+          if (isUseEffectHookType(callee.identifier)) {
+            const arg = instr.value.args[0];
+            if (arg !== undefined && arg.kind === 'Identifier') {
+              const setState = setStateFunctions.get(arg.identifier.id);
+              if (setState !== undefined) {
+                errors.push({
+                  reason:
+                    'Calling setState directly within a useEffect causes cascading renders and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect)',
+                  description: null,
+                  severity: ErrorSeverity.InvalidReact,
+                  loc: setState.loc,
+                  suggestions: null,
+                });
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  if (errors.hasErrors()) {
+    throw errors;
+  }
+}
+
+function getSetStateCall(
+  fn: HIRFunction,
+  setStateFunctions: Map<IdentifierId, Place>,
+): Place | null {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      switch (instr.value.kind) {
+        case 'LoadLocal': {
+          if (setStateFunctions.has(instr.value.place.identifier.id)) {
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.place,
+            );
+          }
+          break;
+        }
+        case 'StoreLocal': {
+          if (setStateFunctions.has(instr.value.value.identifier.id)) {
+            setStateFunctions.set(
+              instr.value.lvalue.place.identifier.id,
+              instr.value.value,
+            );
+            setStateFunctions.set(
+              instr.lvalue.identifier.id,
+              instr.value.value,
+            );
+          }
+          break;
+        }
+        case 'CallExpression': {
+          const callee = instr.value.callee;
+          if (
+            isSetStateType(callee.identifier) ||
+            setStateFunctions.has(callee.identifier.id)
+          ) {
+            /*
+             * TODO: once we support multiple locations per error, we should link to the
+             * original Place in the case that setStateFunction.has(callee)
+             */
+            return callee;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.expect.md
new file mode 100644
index 00000000000000..ab10aa1bae51f2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+  11 |   };
+  12 |   useEffect(() => {
+> 13 |     g();
+     |     ^ InvalidReact: Calling setState directly within a useEffect causes cascading renders and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect) (13:13)
+  14 |   });
+  15 |   return state;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.js
new file mode 100644
index 00000000000000..099f0f7079bea8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect-transitive.js
@@ -0,0 +1,16 @@
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.expect.md
new file mode 100644
index 00000000000000..83be2965b8adab
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}
+
+```
+
+
+## Error
+
+```
+   5 |   const [state, setState] = useState(0);
+   6 |   useEffect(() => {
+>  7 |     setState(s => s + 1);
+     |     ^^^^^^^^ InvalidReact: Calling setState directly within a useEffect causes cascading renders and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect) (7:7)
+   8 |   });
+   9 |   return state;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.js
new file mode 100644
index 00000000000000..d7d8e4e8858fd2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useEffect.js
@@ -0,0 +1,10 @@
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
new file mode 100644
index 00000000000000..dd48adcda71589
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    const f = () => {
+      setState();
+    };
+    setTimeout(() => f(), 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInPassiveEffects
+import { useEffect, useState } from "react";
+
+function Component() {
+  const $ = _c(1);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const f = () => {
+        setState();
+      };
+
+      setTimeout(() => f(), 10);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
new file mode 100644
index 00000000000000..8b1e159071ef31
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
@@ -0,0 +1,18 @@
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    const f = () => {
+      setState();
+    };
+    setTimeout(() => f(), 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
new file mode 100644
index 00000000000000..7fdd01fd0a76e4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setTimeout(setState, 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInPassiveEffects
+import { useEffect, useState } from "react";
+
+function Component() {
+  const $ = _c(1);
+  const [state, setState] = useState(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      setTimeout(setState, 10);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0);
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) 0
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
new file mode 100644
index 00000000000000..ba9720cba9b709
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
@@ -0,0 +1,15 @@
+// @validateNoSetStateInPassiveEffects
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setTimeout(setState, 10);
+  });
+  return state;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};

From 19bd26beb689e554fceb0b929dc5199be8cba594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 15 Aug 2024 11:04:53 -0400
Subject: [PATCH 22/40] [Flight/DevTools] Pass the Server Component's "key" as
 Part of the ReactComponentInfo (#30703)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Supports showing the key in DevTools on the Server Component that the
key was applied to. We can also use this to reconcile to preserve
instance equality when they're reordered.

One thing that's a bit weird about this is that if you provide an
explicit key on a Server Component that alone doesn't have any
semantics. It's because we pass the key down and let the nearest child
inherit the key or get prefixed by the key.

So you might see the same key as a prefix on the child of the Server
Component too which might be a bit confusing. We could remove the prefix
from children but that might also be a bit confusing if they collide.

The div in this case doesn't have a key explicitly specified. It gets it
from the Server Component parent.

<img width="1107" alt="Screenshot 2024-08-14 at 10 06 36 PM"
src="https://github.com/user-attachments/assets/cfc517cc-e737-44c3-a1be-050049267ee2">

Overall keys get a bit confusing when you apply filter. Especially since
it's so common to actually apply the key on a Host Instance. So you
often don't see the key.
---
 .../src/__tests__/ReactFlight-test.js         | 12 +++++
 .../src/__tests__/store-test.js               | 18 +++----
 .../src/backend/fiber/renderer.js             | 51 +++++++++++++------
 .../src/__tests__/ReactFlightDOMEdge-test.js  |  4 +-
 .../react-server/src/ReactFlightServer.js     |  5 ++
 packages/shared/ReactTypes.js                 |  1 +
 6 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 3d72f9c178aa9b..c3ab6a46805f42 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -299,6 +299,7 @@ describe('ReactFlight', () => {
               {
                 name: 'Greeting',
                 env: 'Server',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -337,6 +338,7 @@ describe('ReactFlight', () => {
               {
                 name: 'Greeting',
                 env: 'Server',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2614,6 +2616,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ServerComponent',
                 env: 'Server',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2631,6 +2634,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ThirdPartyComponent',
                 env: 'third-party',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2645,6 +2649,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ThirdPartyLazyComponent',
                 env: 'third-party',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in myLazy (at **)\n    in lazyInitializer (at **)'
@@ -2659,6 +2664,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ThirdPartyFragmentComponent',
                 env: 'third-party',
+                key: '3',
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2732,6 +2738,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ServerComponent',
                 env: 'Server',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2748,6 +2755,7 @@ describe('ReactFlight', () => {
               {
                 name: 'Keyed',
                 env: 'Server',
+                key: 'keyed',
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in ServerComponent (at **)'
@@ -2763,6 +2771,7 @@ describe('ReactFlight', () => {
               {
                 name: 'ThirdPartyAsyncIterableComponent',
                 env: 'third-party',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -2920,6 +2929,7 @@ describe('ReactFlight', () => {
               {
                 name: 'Component',
                 env: 'A',
+                key: null,
                 owner: null,
                 stack: gate(flag => flag.enableOwnerStacks)
                   ? '    in Object.<anonymous> (at **)'
@@ -3040,6 +3050,7 @@ describe('ReactFlight', () => {
         const greetInfo = {
           name: 'Greeting',
           env: 'Server',
+          key: null,
           owner: null,
           stack: gate(flag => flag.enableOwnerStacks)
             ? '    in Object.<anonymous> (at **)'
@@ -3050,6 +3061,7 @@ describe('ReactFlight', () => {
           {
             name: 'Container',
             env: 'Server',
+            key: null,
             owner: greetInfo,
             stack: gate(flag => flag.enableOwnerStacks)
               ? '    in Greeting (at **)'
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 2d3b6ed0cc0ee0..cebc7e0bbcb825 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -2439,7 +2439,7 @@ describe('Store', () => {
   });
 
   // @reactVersion > 18.2
-  it('can reorder keyed components', async () => {
+  it('can reorder keyed server components', async () => {
     function ClientComponent({text}) {
       return <div>{text}</div>;
     }
@@ -2452,9 +2452,7 @@ describe('Store', () => {
           name: 'ServerComponent',
           env: 'Server',
           owner: null,
-          // TODO: Ideally the debug info should include the "key" too to
-          // preserve the virtual identity of the server component when
-          // reordered. Atm only the children of it gets reparented.
+          key: key,
         },
       ];
       return ServerPromise;
@@ -2468,11 +2466,11 @@ describe('Store', () => {
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <App>
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="A"> [Server]
               <ClientComponent key="A">
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="B"> [Server]
               <ClientComponent key="B">
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="C"> [Server]
               <ClientComponent key="C">
       `);
 
@@ -2480,11 +2478,11 @@ describe('Store', () => {
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <App>
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="B"> [Server]
               <ClientComponent key="B">
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="A"> [Server]
               <ClientComponent key="A">
-          ▾ <ServerComponent> [Server]
+          ▾ <ServerComponent key="D"> [Server]
               <ClientComponent key="D">
       `);
   });
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 18aaf33a065cad..a48b22f647548e 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -2220,9 +2220,12 @@ export function attach(
 
     const isProfilingSupported = false; // TODO: Support Tree Base Duration Based on Children.
 
-    const key = null; // TODO: Track keys on ReactComponentInfo;
-    const env = instance.data.env;
-    let displayName = instance.data.name || '';
+    const componentInfo = instance.data;
+
+    const key =
+      typeof componentInfo.key === 'string' ? componentInfo.key : null;
+    const env = componentInfo.env;
+    let displayName = componentInfo.name || '';
     if (typeof env === 'string') {
       // We model environment as an HoC name for now.
       displayName = env + '(' + displayName + ')';
@@ -2855,19 +2858,35 @@ export function attach(
                   );
                 }
               }
-              const firstRemainingChild = remainingReconcilingChildren;
+              // TODO: Find the best matching existing child based on the key if defined.
+
+              let bestMatch = remainingReconcilingChildren;
+              if (componentInfo.key != null) {
+                // If there is a key try to find a matching key in the set.
+                bestMatch = remainingReconcilingChildren;
+                while (bestMatch !== null) {
+                  if (
+                    bestMatch.kind === VIRTUAL_INSTANCE &&
+                    bestMatch.data.key === componentInfo.key
+                  ) {
+                    break;
+                  }
+                  bestMatch = bestMatch.nextSibling;
+                }
+              }
               if (
-                firstRemainingChild !== null &&
-                firstRemainingChild.kind === VIRTUAL_INSTANCE &&
-                firstRemainingChild.data.name === componentInfo.name &&
-                firstRemainingChild.data.env === componentInfo.env
+                bestMatch !== null &&
+                bestMatch.kind === VIRTUAL_INSTANCE &&
+                bestMatch.data.name === componentInfo.name &&
+                bestMatch.data.env === componentInfo.env &&
+                bestMatch.data.key === componentInfo.key
               ) {
                 // If the previous children had a virtual instance in the same slot
                 // with the same name, then we claim it and reuse it for this update.
                 // Update it with the latest entry.
-                firstRemainingChild.data = componentInfo;
-                moveChild(firstRemainingChild);
-                previousVirtualInstance = firstRemainingChild;
+                bestMatch.data = componentInfo;
+                moveChild(bestMatch);
+                previousVirtualInstance = bestMatch;
                 previousVirtualInstanceWasMount = false;
               } else {
                 // Otherwise we create a new instance.
@@ -4321,11 +4340,13 @@ export function attach(
   ): InspectedElement | null {
     const canViewSource = false;
 
-    const key = null; // TODO: Track keys on ReactComponentInfo;
+    const componentInfo = virtualInstance.data;
+    const key =
+      typeof componentInfo.key === 'string' ? componentInfo.key : null;
     const props = null; // TODO: Track props on ReactComponentInfo;
 
-    const env = virtualInstance.data.env;
-    let displayName = virtualInstance.data.name || '';
+    const env = componentInfo.env;
+    let displayName = componentInfo.name || '';
     if (typeof env === 'string') {
       // We model environment as an HoC name for now.
       displayName = env + '(' + displayName + ')';
@@ -4384,7 +4405,7 @@ export function attach(
       // Does the component have legacy context attached to it.
       hasLegacyContext: false,
 
-      key: key != null ? key : null,
+      key: key,
 
       displayName: displayName,
       type: ElementTypeVirtual,
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
index 9d4a123ac3b757..ffef621e9761bc 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
@@ -307,7 +307,7 @@ describe('ReactFlightDOMEdge', () => {
 
     const serializedContent = await readResult(stream1);
 
-    expect(serializedContent.length).toBeLessThan(410);
+    expect(serializedContent.length).toBeLessThan(425);
     expect(timesRendered).toBeLessThan(5);
 
     const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
@@ -374,7 +374,7 @@ describe('ReactFlightDOMEdge', () => {
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
-    expect(serializedContent.length).toBeLessThan(__DEV__ ? 590 : 400);
+    expect(serializedContent.length).toBeLessThan(__DEV__ ? 605 : 400);
     expect(timesRendered).toBeLessThan(5);
 
     const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 6c9536d95acf76..0f3c53960e4df6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -970,6 +970,7 @@ function callWithDebugContextInDEV<A, T>(
   const componentDebugInfo: ReactComponentInfo = {
     name: '',
     env: task.environmentName,
+    key: null,
     owner: task.debugOwner,
   };
   if (enableOwnerStacks) {
@@ -1036,6 +1037,7 @@ function renderFunctionComponent<Props>(
       componentDebugInfo = ({
         name: componentName,
         env: componentEnv,
+        key: key,
         owner: task.debugOwner,
       }: ReactComponentInfo);
       if (enableOwnerStacks) {
@@ -1575,6 +1577,7 @@ function renderElement(
       const componentDebugInfo: ReactComponentInfo = {
         name: 'Fragment',
         env: (0, request.environmentName)(),
+        key: key,
         owner: task.debugOwner,
         stack:
           task.debugStack === null
@@ -2615,6 +2618,7 @@ function renderModelDestructive(
         > = {
           name: (value: any).name,
           env: (value: any).env,
+          key: (value: any).key,
           owner: (value: any).owner,
         };
         if (enableOwnerStacks) {
@@ -3287,6 +3291,7 @@ function renderConsoleValue(
       > = {
         name: (value: any).name,
         env: (value: any).env,
+        key: (value: any).key,
         owner: (value: any).owner,
       };
       if (enableOwnerStacks) {
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index dd7c5c22743a19..7d51fbe4725d37 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -190,6 +190,7 @@ export type ReactStackTrace = Array<ReactCallSite>;
 export type ReactComponentInfo = {
   +name?: string,
   +env?: string,
+  +key?: null | string,
   +owner?: null | ReactComponentInfo,
   +stack?: null | ReactStackTrace,
   // Stashed Data for the Specific Execution Environment. Not part of the transport protocol

From bb6acc20afb4be95e2d22661ae7dc153affd0ae4 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Thu, 15 Aug 2024 14:27:37 -0400
Subject: [PATCH 23/40] [compiler] Allow hoisting of destructured variable
 declarations

Summary:
It doesn't seem as though this invariant was necessary

ghstack-source-id: b27e76525911d5cfc1991b5cfdb7b2074c039e21
Pull Request resolved: https://github.com/facebook/react/pull/30699
---
 .../src/HIR/BuildHIR.ts                       | 11 ----
 .../compiler/hoist-destruct.expect.md         | 62 +++++++++++++++++++
 .../fixtures/compiler/hoist-destruct.js       | 17 +++++
 3 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
index 8ed71b5e62a7ef..2352dc189dab39 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -428,17 +428,6 @@ function lowerStatement(
               loc: id.parentPath.node.loc ?? GeneratedSource,
             });
             continue;
-          } else if (!binding.path.get('id').isIdentifier()) {
-            builder.errors.push({
-              severity: ErrorSeverity.Todo,
-              reason: 'Unsupported variable declaration type for hoisting',
-              description: `variable "${
-                binding.identifier.name
-              }" declared with ${binding.path.get('id').type}`,
-              suggestions: null,
-              loc: id.parentPath.node.loc ?? GeneratedSource,
-            });
-            continue;
           } else if (
             binding.kind !== 'const' &&
             binding.kind !== 'var' &&
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
new file mode 100644
index 00000000000000..24711915e52b25
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.expect.md
@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+//@flow
+component Foo() {
+  function foo() {
+    return (
+      <div>
+        {a} {z} {y}
+      </div>
+    );
+  }
+  const [a, {x: z, y = 10}] = [1, {x: 2}];
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const foo = function foo() {
+      return (
+        <div>
+          {a} {z} {y}
+        </div>
+      );
+    };
+
+    const [t1, t2] = [1, { x: 2 }];
+    const a = t1;
+    const { x: t3, y: t4 } = t2;
+    const z = t3;
+    const y = t4 === undefined ? 10 : t4;
+    t0 = foo();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>1 2 10</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js
new file mode 100644
index 00000000000000..a1c52534944ba6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoist-destruct.js
@@ -0,0 +1,17 @@
+//@flow
+component Foo() {
+  function foo() {
+    return (
+      <div>
+        {a} {z} {y}
+      </div>
+    );
+  }
+  const [a, {x: z, y = 10}] = [1, {x: 2}];
+  return foo();
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};

From 50d2197dd580afc0f87f0acb79c5528bc0f5199c Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Thu, 15 Aug 2024 15:00:36 -0400
Subject: [PATCH 24/40] [compiler] Support for member expression inc/decrement

Test Plan:
Builds support for a.x++ and friends. Similar to a.x += y, emits it as an assignment expression.

ghstack-source-id: 8f3979913aad561cdba70464c3cc5f0ee95887b5
Pull Request resolved: https://github.com/facebook/react/pull/30697
---
 .../src/HIR/BuildHIR.ts                       | 51 +++++++++++++++
 .../compiler/error.todo-kitchensink.expect.md |  4 --
 .../fixtures/compiler/member-inc.expect.md    | 63 +++++++++++++++++++
 .../__tests__/fixtures/compiler/member-inc.js | 21 +++++++
 4 files changed, 135 insertions(+), 4 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
index 2352dc189dab39..20fac9d610a085 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -2385,6 +2385,57 @@ function lowerExpression(
     case 'UpdateExpression': {
       let expr = exprPath as NodePath<t.UpdateExpression>;
       const argument = expr.get('argument');
+      if (argument.isMemberExpression()) {
+        const binaryOperator = expr.node.operator === '++' ? '+' : '-';
+        const leftExpr = argument as NodePath<t.MemberExpression>;
+        const {object, property, value} = lowerMemberExpression(
+          builder,
+          leftExpr,
+        );
+
+        // Store the previous value to a temporary
+        const previousValuePlace = lowerValueToTemporary(builder, value);
+        // Store the new value to a temporary
+        const updatedValue = lowerValueToTemporary(builder, {
+          kind: 'BinaryExpression',
+          operator: binaryOperator,
+          left: {...previousValuePlace},
+          right: lowerValueToTemporary(builder, {
+            kind: 'Primitive',
+            value: 1,
+            loc: GeneratedSource,
+          }),
+          loc: leftExpr.node.loc ?? GeneratedSource,
+        });
+
+        // Save the result back to the property
+        let newValuePlace;
+        if (typeof property === 'string') {
+          newValuePlace = lowerValueToTemporary(builder, {
+            kind: 'PropertyStore',
+            object: {...object},
+            property,
+            value: {...updatedValue},
+            loc: leftExpr.node.loc ?? GeneratedSource,
+          });
+        } else {
+          newValuePlace = lowerValueToTemporary(builder, {
+            kind: 'ComputedStore',
+            object: {...object},
+            property: {...property},
+            value: {...updatedValue},
+            loc: leftExpr.node.loc ?? GeneratedSource,
+          });
+        }
+
+        return {
+          kind: 'LoadLocal',
+          place: expr.node.prefix
+            ? {...newValuePlace}
+            : {...previousValuePlace},
+          loc: exprLoc,
+        };
+      }
       if (!argument.isIdentifier()) {
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle UpdateExpression with ${argument.type} argument`,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
index ba32831cbb8847..d8360455bb3037 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md
@@ -104,10 +104,6 @@ Todo: (BuildHIR::lowerStatement) Handle ArrayPattern inits in ForOfStatement (38
 
 Todo: (BuildHIR::lowerStatement) Handle ObjectPattern inits in ForOfStatement (40:40)
 
-Todo: (BuildHIR::lowerExpression) Handle UpdateExpression with MemberExpression argument (49:49)
-
-Todo: (BuildHIR::lowerExpression) Handle UpdateExpression with MemberExpression argument (50:50)
-
 Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `MemberExpression` cannot be safely reordered (57:57)
 
 Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `BinaryExpression` cannot be safely reordered (53:53)
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
new file mode 100644
index 00000000000000..6588b336b0ee4a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.expect.md
@@ -0,0 +1,63 @@
+
+## Input
+
+```javascript
+//@flow
+
+component Foo() {
+  let x = {a: 1};
+  x.a++;
+  x.a--;
+  console.log(++x.a);
+  console.log(x.a++);
+
+  console.log(x.a);
+  let y = x.a++;
+  console.log(y);
+  console.log(x.a);
+
+  console.log((++x.a).toString(), (x.a++).toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Foo() {
+  const x = { a: 1 };
+  x.a = x.a + 1;
+  x.a = x.a - 1;
+  console.log((x.a = x.a + 1));
+  const t0 = x.a;
+  x.a = t0 + 1;
+  console.log(t0);
+
+  console.log(x.a);
+  const t1 = x.a;
+  x.a = t1 + 1;
+  const y = t1;
+  console.log(y);
+  console.log(x.a);
+
+  const t2 = (x.a = x.a + 1).toString();
+  const t3 = x.a;
+  x.a = t3 + 1;
+  console.log(t2, t3.toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 
+logs: [2,2,3,3,4,'5','5',6]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js
new file mode 100644
index 00000000000000..1a662a39ac0f5d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/member-inc.js
@@ -0,0 +1,21 @@
+//@flow
+
+component Foo() {
+  let x = {a: 1};
+  x.a++;
+  x.a--;
+  console.log(++x.a);
+  console.log(x.a++);
+
+  console.log(x.a);
+  let y = x.a++;
+  console.log(y);
+  console.log(x.a);
+
+  console.log((++x.a).toString(), (x.a++).toString(), x.a);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};

From fa6eab58541330349480690ef4e211520cc08d94 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 15 Aug 2024 14:28:28 -0700
Subject: [PATCH 25/40] [Flight] Implement prerender (#30686)

Prerendering in flight is similar to prerendering in Fizz. Instead of
receiving a result (the stream) immediately a promise is returned which
resolves to the stream when the prerender is complete. The promise will
reject if the flight render fatally errors otherwise it will resolve
when the render is completed or is aborted.
---
 .../flight/__tests__/__e2e__/smoke.test.js    |  7 ++
 fixtures/flight/server/global.js              | 11 ++-
 fixtures/flight/server/region.js              | 61 ++++++++++++++-
 fixtures/flight/src/App.js                    |  7 +-
 packages/react-server-dom-esm/npm/static.js   |  6 ++
 .../react-server-dom-esm/npm/static.node.js   | 12 +++
 packages/react-server-dom-esm/package.json    |  7 ++
 .../src/server/ReactFlightDOMServerNode.js    | 77 ++++++++++++++++++
 .../server/react-flight-dom-server.node.js    |  1 +
 .../react-flight-dom-server.node.stable.js    | 19 +++++
 packages/react-server-dom-esm/static.js       | 13 ++++
 packages/react-server-dom-esm/static.node.js  | 10 +++
 .../npm/static.browser.js                     | 12 +++
 .../npm/static.edge.js                        | 12 +++
 .../react-server-dom-turbopack/npm/static.js  |  6 ++
 .../npm/static.node.js                        | 12 +++
 .../npm/static.node.unbundled.js              | 12 +++
 .../react-server-dom-turbopack/package.json   | 23 ++++++
 .../src/server/ReactFlightDOMServerBrowser.js | 67 +++++++++++++++-
 .../src/server/ReactFlightDOMServerEdge.js    | 67 +++++++++++++++-
 .../src/server/ReactFlightDOMServerNode.js    | 78 +++++++++++++++++++
 .../server/react-flight-dom-server.browser.js |  1 +
 .../react-flight-dom-server.browser.stable.js | 19 +++++
 .../server/react-flight-dom-server.edge.js    |  1 +
 .../react-flight-dom-server.edge.stable.js    | 19 +++++
 .../server/react-flight-dom-server.node.js    |  1 +
 .../react-flight-dom-server.node.stable.js    | 20 +++++
 .../react-flight-dom-server.node.unbundled.js |  1 +
 ...flight-dom-server.node.unbundled.stable.js | 20 +++++
 .../static.browser.js                         | 10 +++
 .../react-server-dom-turbopack/static.edge.js | 10 +++
 packages/react-server-dom-turbopack/static.js | 13 ++++
 .../react-server-dom-turbopack/static.node.js | 10 +++
 .../static.node.unbundled.js                  | 10 +++
 .../npm/static.browser.js                     | 12 +++
 .../npm/static.edge.js                        | 12 +++
 .../react-server-dom-webpack/npm/static.js    |  6 ++
 .../npm/static.node.js                        | 12 +++
 .../npm/static.node.unbundled.js              | 12 +++
 .../react-server-dom-webpack/package.json     | 22 ++++++
 .../src/__tests__/ReactFlightDOM-test.js      | 72 +++++++++++++++++
 .../src/server/ReactFlightDOMServerBrowser.js | 67 +++++++++++++++-
 .../src/server/ReactFlightDOMServerEdge.js    | 67 +++++++++++++++-
 .../src/server/ReactFlightDOMServerNode.js    | 78 +++++++++++++++++++
 .../server/react-flight-dom-server.browser.js |  1 +
 .../react-flight-dom-server.browser.stable.js | 19 +++++
 .../server/react-flight-dom-server.edge.js    |  1 +
 .../react-flight-dom-server.edge.stable.js    | 19 +++++
 .../server/react-flight-dom-server.node.js    |  1 +
 .../react-flight-dom-server.node.stable.js    | 20 +++++
 .../react-flight-dom-server.node.unbundled.js |  1 +
 ...flight-dom-server.node.unbundled.stable.js | 20 +++++
 .../static.browser.js                         | 10 +++
 .../react-server-dom-webpack/static.edge.js   | 10 +++
 packages/react-server-dom-webpack/static.js   | 13 ++++
 .../react-server-dom-webpack/static.node.js   | 10 +++
 .../static.node.unbundled.js                  | 10 +++
 .../react-server/src/ReactFlightServer.js     | 19 +++++
 scripts/shared/inlinedHostConfigs.js          | 14 ++++
 59 files changed, 1174 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-server-dom-esm/npm/static.js
 create mode 100644 packages/react-server-dom-esm/npm/static.node.js
 create mode 100644 packages/react-server-dom-esm/src/server/react-flight-dom-server.node.stable.js
 create mode 100644 packages/react-server-dom-esm/static.js
 create mode 100644 packages/react-server-dom-esm/static.node.js
 create mode 100644 packages/react-server-dom-turbopack/npm/static.browser.js
 create mode 100644 packages/react-server-dom-turbopack/npm/static.edge.js
 create mode 100644 packages/react-server-dom-turbopack/npm/static.js
 create mode 100644 packages/react-server-dom-turbopack/npm/static.node.js
 create mode 100644 packages/react-server-dom-turbopack/npm/static.node.unbundled.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.stable.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.stable.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.stable.js
 create mode 100644 packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.stable.js
 create mode 100644 packages/react-server-dom-turbopack/static.browser.js
 create mode 100644 packages/react-server-dom-turbopack/static.edge.js
 create mode 100644 packages/react-server-dom-turbopack/static.js
 create mode 100644 packages/react-server-dom-turbopack/static.node.js
 create mode 100644 packages/react-server-dom-turbopack/static.node.unbundled.js
 create mode 100644 packages/react-server-dom-webpack/npm/static.browser.js
 create mode 100644 packages/react-server-dom-webpack/npm/static.edge.js
 create mode 100644 packages/react-server-dom-webpack/npm/static.js
 create mode 100644 packages/react-server-dom-webpack/npm/static.node.js
 create mode 100644 packages/react-server-dom-webpack/npm/static.node.unbundled.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.stable.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.stable.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.stable.js
 create mode 100644 packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.stable.js
 create mode 100644 packages/react-server-dom-webpack/static.browser.js
 create mode 100644 packages/react-server-dom-webpack/static.edge.js
 create mode 100644 packages/react-server-dom-webpack/static.js
 create mode 100644 packages/react-server-dom-webpack/static.node.js
 create mode 100644 packages/react-server-dom-webpack/static.node.unbundled.js

diff --git a/fixtures/flight/__tests__/__e2e__/smoke.test.js b/fixtures/flight/__tests__/__e2e__/smoke.test.js
index 267bd109081a26..f2bcbbd111c84f 100644
--- a/fixtures/flight/__tests__/__e2e__/smoke.test.js
+++ b/fixtures/flight/__tests__/__e2e__/smoke.test.js
@@ -16,6 +16,13 @@ test('smoke test', async ({page}) => {
   await expect(page.getByTestId('promise-as-a-child-test')).toHaveText(
     'Promise as a child hydrates without errors: deferred text'
   );
+  await expect(page.getByTestId('prerendered')).not.toBeAttached();
+
+  await expect(consoleErrors).toEqual([]);
+  await expect(pageErrors).toEqual([]);
+
+  await page.goto('/prerender');
+  await expect(page.getByTestId('prerendered')).toBeAttached();
 
   await expect(consoleErrors).toEqual([]);
   await expect(pageErrors).toEqual([]);
diff --git a/fixtures/flight/server/global.js b/fixtures/flight/server/global.js
index e4ae3a62916a39..8133bf79121999 100644
--- a/fixtures/flight/server/global.js
+++ b/fixtures/flight/server/global.js
@@ -86,7 +86,7 @@ function request(options, body) {
   });
 }
 
-app.all('/', async function (req, res, next) {
+async function renderApp(req, res, next) {
   // Proxy the request to the regional server.
   const proxiedHeaders = {
     'X-Forwarded-Host': req.hostname,
@@ -102,12 +102,14 @@ app.all('/', async function (req, res, next) {
     proxiedHeaders['Content-type'] = req.get('Content-type');
   }
 
+  const requestsPrerender = req.path === '/prerender';
+
   const promiseForData = request(
     {
       host: '127.0.0.1',
       port: 3001,
       method: req.method,
-      path: '/',
+      path: requestsPrerender ? '/?prerender=1' : '/',
       headers: proxiedHeaders,
     },
     req
@@ -210,7 +212,10 @@ app.all('/', async function (req, res, next) {
       res.end();
     }
   }
-});
+}
+
+app.all('/', renderApp);
+app.all('/prerender', renderApp);
 
 if (process.env.NODE_ENV === 'development') {
   app.use(express.static('public'));
diff --git a/fixtures/flight/server/region.js b/fixtures/flight/server/region.js
index bc4ba05ddf3b44..daf619741a1ea4 100644
--- a/fixtures/flight/server/region.js
+++ b/fixtures/flight/server/region.js
@@ -105,8 +105,67 @@ async function renderApp(res, returnValue, formState) {
   pipe(res);
 }
 
+async function prerenderApp(res, returnValue, formState) {
+  const {prerenderToNodeStream} = await import(
+    'react-server-dom-webpack/static'
+  );
+  // const m = require('../src/App.js');
+  const m = await import('../src/App.js');
+
+  let moduleMap;
+  let mainCSSChunks;
+  if (process.env.NODE_ENV === 'development') {
+    // Read the module map from the HMR server in development.
+    moduleMap = await (
+      await fetch('http://localhost:3000/react-client-manifest.json')
+    ).json();
+    mainCSSChunks = (
+      await (
+        await fetch('http://localhost:3000/entrypoint-manifest.json')
+      ).json()
+    ).main.css;
+  } else {
+    // Read the module map from the static build in production.
+    moduleMap = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/react-client-manifest.json`),
+        'utf8'
+      )
+    );
+    mainCSSChunks = JSON.parse(
+      await readFile(
+        path.resolve(__dirname, `../build/entrypoint-manifest.json`),
+        'utf8'
+      )
+    ).main.css;
+  }
+  const App = m.default.default || m.default;
+  const root = React.createElement(
+    React.Fragment,
+    null,
+    // Prepend the App's tree with stylesheets required for this entrypoint.
+    mainCSSChunks.map(filename =>
+      React.createElement('link', {
+        rel: 'stylesheet',
+        href: filename,
+        precedence: 'default',
+        key: filename,
+      })
+    ),
+    React.createElement(App, {prerender: true})
+  );
+  // For client-invoked server actions we refresh the tree and return a return value.
+  const payload = {root, returnValue, formState};
+  const {prelude} = await prerenderToNodeStream(payload, moduleMap);
+  prelude.pipe(res);
+}
+
 app.get('/', async function (req, res) {
-  await renderApp(res, null, null);
+  if ('prerender' in req.query) {
+    await prerenderApp(res, null, null);
+  } else {
+    await renderApp(res, null, null);
+  }
 });
 
 app.post('/', bodyParser.text(), async function (req, res) {
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
index 027056c5150215..08987750eb210b 100644
--- a/fixtures/flight/src/App.js
+++ b/fixtures/flight/src/App.js
@@ -23,7 +23,7 @@ const promisedText = new Promise(resolve =>
   setTimeout(() => resolve('deferred text'), 100)
 );
 
-export default async function App() {
+export default async function App({prerender}) {
   const res = await fetch('http://localhost:3001/todos');
   const todos = await res.json();
   return (
@@ -35,6 +35,11 @@ export default async function App() {
       </head>
       <body>
         <Container>
+          {prerender ? (
+            <meta data-testid="prerendered" name="prerendered" content="true" />
+          ) : (
+            <meta content="when not prerendering we render this meta tag. When prerendering you will expect to see this tag and the one with data-testid=prerendered because we SSR one and hydrate the other" />
+          )}
           <h1>{getServerState()}</h1>
           <React.Suspense fallback={null}>
             <div data-testid="promise-as-a-child-test">
diff --git a/packages/react-server-dom-esm/npm/static.js b/packages/react-server-dom-esm/npm/static.js
new file mode 100644
index 00000000000000..13a632e6411793
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-esm/npm/static.node.js b/packages/react-server-dom-esm/npm/static.node.js
new file mode 100644
index 00000000000000..ff0b9b2a42f2f0
--- /dev/null
+++ b/packages/react-server-dom-esm/npm/static.node.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-esm-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-esm-server.node.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}
diff --git a/packages/react-server-dom-esm/package.json b/packages/react-server-dom-esm/package.json
index bd9e9c394962e6..a1f8f17f45014d 100644
--- a/packages/react-server-dom-esm/package.json
+++ b/packages/react-server-dom-esm/package.json
@@ -17,6 +17,8 @@
     "client.node.js",
     "server.js",
     "server.node.js",
+    "static.js",
+    "static.node.js",
     "cjs/",
     "esm/"
   ],
@@ -33,6 +35,11 @@
       "default": "./server.js"
     },
     "./server.node": "./server.node.js",
+    "./static": {
+      "react-server": "./static.node.js",
+      "default": "./static.js"
+    },
+    "./static.node": "./static.node.js",
     "./node-loader": "./esm/react-server-dom-esm-node-loader.production.js",
     "./src/*": "./src/*.js",
     "./package.json": "./package.json"
diff --git a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
index c724d89c2b435e..bb65ef4b659a70 100644
--- a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
@@ -18,6 +18,8 @@ import type {Busboy} from 'busboy';
 import type {Writable} from 'stream';
 import type {Thenable} from 'shared/ReactTypes';
 
+import {Readable} from 'stream';
+
 import {
   createRequest,
   startWork,
@@ -123,6 +125,80 @@ function renderToPipeableStream(
     },
   };
 }
+function createFakeWritable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  moduleBasePath: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createRequest(
+      model,
+      moduleBasePath,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
 
 function decodeReplyFromBusboy<T>(
   busboyStream: Busboy,
@@ -207,6 +283,7 @@ function decodeReply<T>(
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
index d14d2b8ed362a7..f24946fcae8bb7 100644
--- a/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
+++ b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.js
@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.stable.js b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.stable.js
new file mode 100644
index 00000000000000..d14d2b8ed362a7
--- /dev/null
+++ b/packages/react-server-dom-esm/src/server/react-flight-dom-server.node.stable.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-esm/static.js b/packages/react-server-dom-esm/static.js
new file mode 100644
index 00000000000000..83d8b8a017ff2b
--- /dev/null
+++ b/packages/react-server-dom-esm/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-esm/static.node.js b/packages/react-server-dom-esm/static.node.js
new file mode 100644
index 00000000000000..d15eddc6f9b0e7
--- /dev/null
+++ b/packages/react-server-dom-esm/static.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-turbopack/npm/static.browser.js b/packages/react-server-dom-turbopack/npm/static.browser.js
new file mode 100644
index 00000000000000..edc104a4593835
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.browser.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.browser.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}
diff --git a/packages/react-server-dom-turbopack/npm/static.edge.js b/packages/react-server-dom-turbopack/npm/static.edge.js
new file mode 100644
index 00000000000000..c074f8ffe7ee43
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.edge.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.edge.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}
diff --git a/packages/react-server-dom-turbopack/npm/static.js b/packages/react-server-dom-turbopack/npm/static.js
new file mode 100644
index 00000000000000..13a632e6411793
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-turbopack/npm/static.node.js b/packages/react-server-dom-turbopack/npm/static.node.js
new file mode 100644
index 00000000000000..84083a965189b3
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.node.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.node.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}
diff --git a/packages/react-server-dom-turbopack/npm/static.node.unbundled.js b/packages/react-server-dom-turbopack/npm/static.node.unbundled.js
new file mode 100644
index 00000000000000..e77863bf36a601
--- /dev/null
+++ b/packages/react-server-dom-turbopack/npm/static.node.unbundled.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-turbopack-server.node.unbundled.production.js');
+} else {
+  s = require('./cjs/react-server-dom-turbopack-server.node.unbundled.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}
diff --git a/packages/react-server-dom-turbopack/package.json b/packages/react-server-dom-turbopack/package.json
index 93e694b3a3e1ba..93cd7d37a04aec 100644
--- a/packages/react-server-dom-turbopack/package.json
+++ b/packages/react-server-dom-turbopack/package.json
@@ -22,6 +22,11 @@
     "server.edge.js",
     "server.node.js",
     "server.node.unbundled.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "static.node.unbundled.js",
     "node-register.js",
     "cjs/",
     "esm/"
@@ -63,6 +68,24 @@
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
     "./server.node.unbundled": "./server.node.unbundled.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": {
+          "turbopack": "./static.node.js",
+          "webpack": "./static.node.js",
+          "default": "./static.node.unbundled.js"
+        },
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./static.node.unbundled": "./static.node.unbundled.js",
     "./node-loader": "./esm/react-server-dom-turbopack-node-loader.production.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*.js",
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
index 58a87992d6c6ee..ef980764942d7c 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
@@ -100,6 +100,65 @@ function renderToReadableStream(
   return stream;
 }
 
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            startWork(request);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createRequest(
+      model,
+      turbopackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReply<T>(
   body: string | FormData,
   turbopackMap: ServerManifest,
@@ -121,4 +180,10 @@ function decodeReply<T>(
   return root;
 }
 
-export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
index 58a87992d6c6ee..ef980764942d7c 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
@@ -100,6 +100,65 @@ function renderToReadableStream(
   return stream;
 }
 
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            startWork(request);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createRequest(
+      model,
+      turbopackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReply<T>(
   body: string | FormData,
   turbopackMap: ServerManifest,
@@ -121,4 +180,10 @@ function decodeReply<T>(
   return root;
 }
 
-export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
index d76bcb5759b0ee..e484d4b7e77d50 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
@@ -18,6 +18,8 @@ import type {Busboy} from 'busboy';
 import type {Writable} from 'stream';
 import type {Thenable} from 'shared/ReactTypes';
 
+import {Readable} from 'stream';
+
 import {
   createRequest,
   startWork,
@@ -125,6 +127,81 @@ function renderToPipeableStream(
   };
 }
 
+function createFakeWritable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  turbopackMap: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createRequest(
+      model,
+      turbopackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReplyFromBusboy<T>(
   busboyStream: Busboy,
   turbopackMap: ServerManifest,
@@ -208,6 +285,7 @@ function decodeReply<T>(
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
index 0100b65554aec0..d8373ec551bc0d 100644
--- a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.js
@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender,
   decodeReply,
   decodeAction,
   decodeFormState,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.stable.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.stable.js
new file mode 100644
index 00000000000000..0100b65554aec0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.browser.stable.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
index eb887b73a8ae87..9521ba6b68841e 100644
--- a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.js
@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender,
   decodeReply,
   decodeAction,
   decodeFormState,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.stable.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.stable.js
new file mode 100644
index 00000000000000..eb887b73a8ae87
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.edge.stable.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
index 0d159704067ea0..badc2ed50b6919 100644
--- a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.js
@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.stable.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.stable.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.stable.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
index 0d159704067ea0..badc2ed50b6919 100644
--- a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.js
@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.stable.js b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.stable.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled.stable.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-turbopack/static.browser.js b/packages/react-server-dom-turbopack/static.browser.js
new file mode 100644
index 00000000000000..25897891632068
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerender} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-turbopack/static.edge.js b/packages/react-server-dom-turbopack/static.edge.js
new file mode 100644
index 00000000000000..a39d54c73f579b
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerender} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-turbopack/static.js b/packages/react-server-dom-turbopack/static.js
new file mode 100644
index 00000000000000..83d8b8a017ff2b
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-turbopack/static.node.js b/packages/react-server-dom-turbopack/static.node.js
new file mode 100644
index 00000000000000..d15eddc6f9b0e7
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-turbopack/static.node.unbundled.js b/packages/react-server-dom-turbopack/static.node.unbundled.js
new file mode 100644
index 00000000000000..b2134459afc7a0
--- /dev/null
+++ b/packages/react-server-dom-turbopack/static.node.unbundled.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node.unbundled';
diff --git a/packages/react-server-dom-webpack/npm/static.browser.js b/packages/react-server-dom-webpack/npm/static.browser.js
new file mode 100644
index 00000000000000..7d514abd6bf712
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.browser.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}
diff --git a/packages/react-server-dom-webpack/npm/static.edge.js b/packages/react-server-dom-webpack/npm/static.edge.js
new file mode 100644
index 00000000000000..a4ae48f55eb1b0
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.edge.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}
diff --git a/packages/react-server-dom-webpack/npm/static.js b/packages/react-server-dom-webpack/npm/static.js
new file mode 100644
index 00000000000000..13a632e6411793
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.js
@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-server-dom-webpack/npm/static.node.js b/packages/react-server-dom-webpack/npm/static.node.js
new file mode 100644
index 00000000000000..dbc4179d3e788f
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.node.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}
diff --git a/packages/react-server-dom-webpack/npm/static.node.unbundled.js b/packages/react-server-dom-webpack/npm/static.node.unbundled.js
new file mode 100644
index 00000000000000..73c8a3b86e9c76
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/static.node.unbundled.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index b8e2ccf92e3e36..7a1fe29d4d4a9c 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -23,6 +23,11 @@
     "server.edge.js",
     "server.node.js",
     "server.node.unbundled.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "static.node.unbundled.js",
     "node-register.js",
     "cjs/",
     "esm/"
@@ -63,6 +68,23 @@
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
     "./server.node.unbundled": "./server.node.unbundled.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": {
+          "webpack": "./static.node.js",
+          "default": "./static.node.unbundled.js"
+        },
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./static.node.unbundled": "./static.node.unbundled.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.production.js",
     "./node-register": "./node-register.js",
     "./src/*": "./src/*.js",
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 718ddf6c5716c0..faaf8aef01b0dc 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -10,6 +10,7 @@
 'use strict';
 
 import {patchSetImmediate} from '../../../../scripts/jest/patchSetImmediate';
+import {Readable} from 'stream';
 
 // Polyfills for test environment
 global.ReadableStream =
@@ -28,6 +29,7 @@ let React;
 let FlightReactDOM;
 let ReactDOMClient;
 let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
 let ReactServerDOMClient;
 let ReactDOMFizzServer;
 let ReactDOMStaticServer;
@@ -59,12 +61,20 @@ describe('ReactFlightDOM', () => {
     jest.mock('react-server-dom-webpack/server', () =>
       require('react-server-dom-webpack/server.node.unbundled'),
     );
+    if (__EXPERIMENTAL__) {
+      jest.mock('react-server-dom-webpack/static', () =>
+        require('react-server-dom-webpack/static.node.unbundled'),
+      );
+    }
     const WebpackMock = require('./utils/WebpackMock');
     clientExports = WebpackMock.clientExports;
     clientModuleError = WebpackMock.clientModuleError;
     webpackMap = WebpackMock.webpackMap;
 
     ReactServerDOMServer = require('react-server-dom-webpack/server');
+    if (__EXPERIMENTAL__) {
+      ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+    }
 
     // This reset is to load modules for the SSR/Browser scope.
     jest.unmock('react-server-dom-webpack/server');
@@ -2650,4 +2660,66 @@ describe('ReactFlightDOM', () => {
       </div>,
     );
   });
+
+  // @gate experimental
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      Readable.toWeb(prelude),
+    );
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const shellErrors = [];
+    await serverAct(async () => {
+      ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onShellError(error) {
+            shellErrors.push(error.message);
+          },
+        },
+      ).pipe(fizzWritable);
+    });
+
+    expect(shellErrors).toEqual([]);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(<div>hello world</div>);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
index 6a6f2936f846b3..a4e0c3bef693b8 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
@@ -100,6 +100,65 @@ function renderToReadableStream(
   return stream;
 }
 
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            startWork(request);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createRequest(
+      model,
+      webpackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReply<T>(
   body: string | FormData,
   webpackMap: ServerManifest,
@@ -121,4 +180,10 @@ function decodeReply<T>(
   return root;
 }
 
-export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
index 6a6f2936f846b3..a4e0c3bef693b8 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
@@ -100,6 +100,65 @@ function renderToReadableStream(
   return stream;
 }
 
+type StaticResult = {
+  prelude: ReadableStream,
+};
+
+function prerender(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const stream = new ReadableStream(
+        {
+          type: 'bytes',
+          start: (controller): ?Promise<void> => {
+            startWork(request);
+          },
+          pull: (controller): ?Promise<void> => {
+            startFlowing(request, controller);
+          },
+          cancel: (reason): ?Promise<void> => {
+            stopFlowing(request);
+            abort(request, reason);
+          },
+        },
+        // $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+      resolve({prelude: stream});
+    }
+    const request = createRequest(
+      model,
+      webpackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReply<T>(
   body: string | FormData,
   webpackMap: ServerManifest,
@@ -121,4 +180,10 @@ function decodeReply<T>(
   return root;
 }
 
-export {renderToReadableStream, decodeReply, decodeAction, decodeFormState};
+export {
+  renderToReadableStream,
+  prerender,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+};
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
index 73479bdf3ef043..15062594767039 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
@@ -18,6 +18,8 @@ import type {Busboy} from 'busboy';
 import type {Writable} from 'stream';
 import type {Thenable} from 'shared/ReactTypes';
 
+import {Readable} from 'stream';
+
 import {
   createRequest,
   startWork,
@@ -125,6 +127,81 @@ function renderToPipeableStream(
   };
 }
 
+function createFakeWritable(readable: any): Writable {
+  // The current host config expects a Writable so we create
+  // a fake writable for now to push into the Readable.
+  return ({
+    write(chunk) {
+      return readable.push(chunk);
+    },
+    end() {
+      readable.push(null);
+    },
+    destroy(error) {
+      readable.destroy(error);
+    },
+  }: any);
+}
+
+type PrerenderOptions = {
+  environmentName?: string | (() => string),
+  filterStackFrame?: (url: string, functionName: string) => boolean,
+  onError?: (error: mixed) => void,
+  onPostpone?: (reason: string) => void,
+  identifierPrefix?: string,
+  temporaryReferences?: TemporaryReferenceSet,
+  signal?: AbortSignal,
+};
+
+type StaticResult = {
+  prelude: Readable,
+};
+
+function prerenderToNodeStream(
+  model: ReactClientValue,
+  webpackMap: ClientManifest,
+  options?: PrerenderOptions,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+    function onAllReady() {
+      const readable: Readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritable(readable);
+      resolve({prelude: readable});
+    }
+
+    const request = createRequest(
+      model,
+      webpackMap,
+      options ? options.onError : undefined,
+      options ? options.identifierPrefix : undefined,
+      options ? options.onPostpone : undefined,
+      options ? options.temporaryReferences : undefined,
+      __DEV__ && options ? options.environmentName : undefined,
+      __DEV__ && options ? options.filterStackFrame : undefined,
+      onAllReady,
+      onFatalError,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      if (signal.aborted) {
+        abort(request, (signal: any).reason);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
+    }
+    startWork(request);
+  });
+}
+
 function decodeReplyFromBusboy<T>(
   busboyStream: Busboy,
   webpackMap: ServerManifest,
@@ -208,6 +285,7 @@ function decodeReply<T>(
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
index 0100b65554aec0..d8373ec551bc0d 100644
--- a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.js
@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender,
   decodeReply,
   decodeAction,
   decodeFormState,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.stable.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.stable.js
new file mode 100644
index 00000000000000..0100b65554aec0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.browser.stable.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerBrowser';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
index eb887b73a8ae87..9521ba6b68841e 100644
--- a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.js
@@ -9,6 +9,7 @@
 
 export {
   renderToReadableStream,
+  prerender,
   decodeReply,
   decodeAction,
   decodeFormState,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.stable.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.stable.js
new file mode 100644
index 00000000000000..eb887b73a8ae87
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.edge.stable.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToReadableStream,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerEdge';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
index 0d159704067ea0..badc2ed50b6919 100644
--- a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.js
@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.stable.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.stable.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.stable.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js
index 0d159704067ea0..badc2ed50b6919 100644
--- a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.js
@@ -9,6 +9,7 @@
 
 export {
   renderToPipeableStream,
+  prerenderToNodeStream,
   decodeReplyFromBusboy,
   decodeReply,
   decodeAction,
diff --git a/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.stable.js b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.stable.js
new file mode 100644
index 00000000000000..0d159704067ea0
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled.stable.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToPipeableStream,
+  decodeReplyFromBusboy,
+  decodeReply,
+  decodeAction,
+  decodeFormState,
+  registerServerReference,
+  registerClientReference,
+  createClientModuleProxy,
+  createTemporaryReferenceSet,
+} from './ReactFlightDOMServerNode';
diff --git a/packages/react-server-dom-webpack/static.browser.js b/packages/react-server-dom-webpack/static.browser.js
new file mode 100644
index 00000000000000..25897891632068
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerender} from './src/server/react-flight-dom-server.browser';
diff --git a/packages/react-server-dom-webpack/static.edge.js b/packages/react-server-dom-webpack/static.edge.js
new file mode 100644
index 00000000000000..a39d54c73f579b
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.edge.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerender} from './src/server/react-flight-dom-server.edge';
diff --git a/packages/react-server-dom-webpack/static.js b/packages/react-server-dom-webpack/static.js
new file mode 100644
index 00000000000000..83d8b8a017ff2b
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-server-dom-webpack/static.node.js b/packages/react-server-dom-webpack/static.node.js
new file mode 100644
index 00000000000000..d15eddc6f9b0e7
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.node.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node';
diff --git a/packages/react-server-dom-webpack/static.node.unbundled.js b/packages/react-server-dom-webpack/static.node.unbundled.js
new file mode 100644
index 00000000000000..b2134459afc7a0
--- /dev/null
+++ b/packages/react-server-dom-webpack/static.node.unbundled.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerenderToNodeStream} from './src/server/react-flight-dom-server.node.unbundled';
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 0f3c53960e4df6..d8ba106d37e728 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -376,6 +376,8 @@ export type Request = {
   taintCleanupQueue: Array<string | bigint>,
   onError: (error: mixed) => ?string,
   onPostpone: (reason: string) => void,
+  onAllReady: () => void,
+  onFatalError: mixed => void,
   // DEV-only
   environmentName: () => string,
   filterStackFrame: (url: string, functionName: string) => boolean,
@@ -435,6 +437,8 @@ function RequestInstance(
   temporaryReferences: void | TemporaryReferenceSet,
   environmentName: void | string | (() => string), // DEV-only
   filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only
+  onAllReady: void | (() => void),
+  onFatalError: void | ((error: mixed) => void),
 ) {
   if (
     ReactSharedInternals.A !== null &&
@@ -486,6 +490,8 @@ function RequestInstance(
   this.onError = onError === undefined ? defaultErrorHandler : onError;
   this.onPostpone =
     onPostpone === undefined ? defaultPostponeHandler : onPostpone;
+  this.onAllReady = onAllReady === undefined ? noop : onAllReady;
+  this.onFatalError = onFatalError === undefined ? noop : onFatalError;
 
   if (__DEV__) {
     this.environmentName =
@@ -513,6 +519,8 @@ function RequestInstance(
   pingedTasks.push(rootTask);
 }
 
+function noop(): void {}
+
 export function createRequest(
   model: ReactClientValue,
   bundlerConfig: ClientManifest,
@@ -522,6 +530,8 @@ export function createRequest(
   temporaryReferences: void | TemporaryReferenceSet,
   environmentName: void | string | (() => string), // DEV-only
   filterStackFrame: void | ((url: string, functionName: string) => boolean), // DEV-only
+  onAllReady: void | (() => void),
+  onFatalError: void | (() => void),
 ): Request {
   // $FlowFixMe[invalid-constructor]: the shapes are exact here but Flow doesn't like constructors
   return new RequestInstance(
@@ -533,6 +543,8 @@ export function createRequest(
     temporaryReferences,
     environmentName,
     filterStackFrame,
+    onAllReady,
+    onFatalError,
   );
 }
 
@@ -2890,6 +2902,8 @@ function logRecoverableError(
 }
 
 function fatalError(request: Request, error: mixed): void {
+  const onFatalError = request.onFatalError;
+  onFatalError(error);
   if (enableTaint) {
     cleanupTaintQueue(request);
   }
@@ -3753,6 +3767,11 @@ function performWork(request: Request): void {
     if (request.destination !== null) {
       flushCompletedChunks(request, request.destination);
     }
+    if (request.abortableTasks.size === 0) {
+      // we're done rendering
+      const onAllReady = request.onAllReady;
+      onAllReady();
+    }
   } catch (error) {
     logRecoverableError(request, error, null);
     fatalError(request, error);
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 4a07e036530a25..be5706c927c7c0 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -43,6 +43,8 @@ module.exports = [
       'react-server-dom-webpack/client.node.unbundled',
       'react-server-dom-webpack/server',
       'react-server-dom-webpack/server.node.unbundled',
+      'react-server-dom-webpack/static',
+      'react-server-dom-webpack/static.node.unbundled',
       'react-server-dom-webpack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-webpack/client.node
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerNode.js',
       'react-server-dom-webpack/src/server/react-flight-dom-server.node.unbundled',
@@ -82,6 +84,8 @@ module.exports = [
       'react-server-dom-webpack/client.node',
       'react-server-dom-webpack/server',
       'react-server-dom-webpack/server.node',
+      'react-server-dom-webpack/static',
+      'react-server-dom-webpack/static.node',
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
       'react-server-dom-webpack/src/server/react-flight-dom-server.node',
@@ -123,6 +127,8 @@ module.exports = [
       'react-server-dom-turbopack/client.node.unbundled',
       'react-server-dom-turbopack/server',
       'react-server-dom-turbopack/server.node.unbundled',
+      'react-server-dom-turbopack/static',
+      'react-server-dom-turbopack/static.node.unbundled',
       'react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node.unbundled
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerNode.js',
       'react-server-dom-turbopack/src/server/react-flight-dom-server.node.unbundled',
@@ -164,6 +170,8 @@ module.exports = [
       'react-server-dom-turbopack/client.node',
       'react-server-dom-turbopack/server',
       'react-server-dom-turbopack/server.node',
+      'react-server-dom-turbopack/static',
+      'react-server-dom-turbopack/static.node',
       'react-server-dom-turbopack/src/client/ReactFlightDOMClientNode.js', // react-server-dom-turbopack/client.node
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
@@ -238,6 +246,7 @@ module.exports = [
       'react-server-dom-webpack/client',
       'react-server-dom-webpack/client.browser',
       'react-server-dom-webpack/server.browser',
+      'react-server-dom-webpack/static.browser',
       'react-server-dom-webpack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-webpack/client.browser
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackBrowser.js',
@@ -299,6 +308,7 @@ module.exports = [
       'react-server-dom-turbopack/client',
       'react-server-dom-turbopack/client.browser',
       'react-server-dom-turbopack/server.browser',
+      'react-server-dom-turbopack/static.browser',
       'react-server-dom-turbopack/src/client/ReactFlightDOMClientBrowser.js', // react-server-dom-turbopack/client.browser
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js',
@@ -339,6 +349,7 @@ module.exports = [
       'react-server-dom-webpack',
       'react-server-dom-webpack/client.edge',
       'react-server-dom-webpack/server.edge',
+      'react-server-dom-webpack/static.edge',
       'react-server-dom-webpack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-webpack/client.edge
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpack.js',
       'react-server-dom-webpack/src/client/ReactFlightClientConfigBundlerWebpackServer.js',
@@ -378,6 +389,7 @@ module.exports = [
       'react-server-dom-turbopack',
       'react-server-dom-turbopack/client.edge',
       'react-server-dom-turbopack/server.edge',
+      'react-server-dom-turbopack/static.edge',
       'react-server-dom-turbopack/src/client/ReactFlightDOMClientEdge.js', // react-server-dom-turbopack/client.edge
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js',
       'react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js',
@@ -419,6 +431,8 @@ module.exports = [
       'react-server-dom-esm/client.node',
       'react-server-dom-esm/server',
       'react-server-dom-esm/server.node',
+      'react-server-dom-esm/static',
+      'react-server-dom-esm/static.node',
       'react-server-dom-esm/src/client/ReactFlightDOMClientNode.js', // react-server-dom-esm/client.node
       'react-server-dom-esm/src/server/react-flight-dom-server.node',
       'react-server-dom-esm/src/server/ReactFlightDOMServerNode.js', // react-server-dom-esm/src/server/react-flight-dom-server.node

From 85fb95cdffdd95f2f908ee71974cae06b1c866e1 Mon Sep 17 00:00:00 2001
From: Sam Zhou <sam@developersam.com>
Date: Fri, 16 Aug 2024 12:53:52 -0400
Subject: [PATCH 26/40] [flow] Eliminate a few React.Element type that will be
 synced to react-native (#30719)

## Summary

Flow will eventually remove the specific `React.Element` type. For most
of the code, it can be replaced with `React.MixedElement` or
`React.Node`.

When specific react elements are required, it needs to be replaced with
either `React$Element` which will trigger a `internal-type` lint error
that can be disabled project-wide, or use
`ExactReactElement_DEPRECATED`.

Fortunately in this case, this one can be replaced with just
`React.MixedElement`.

## How did you test this change?

`flow`
---
 .../react-native-renderer/src/ReactNativeRenderer.js  |  4 ++--
 .../react-native-renderer/src/ReactNativeTypes.js     | 11 ++++++++---
 packages/react/index.js                               |  1 +
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 983079fd0eeb3b..4ec5ab2c58529d 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -8,7 +8,7 @@
  */
 
 import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes';
-import type {ElementRef, Element, ElementType} from 'react';
+import type {ElementRef, ElementType, MixedElement} from 'react';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {RenderRootOptions} from './ReactNativeTypes';
 
@@ -117,7 +117,7 @@ function nativeOnCaughtError(
 }
 
 function render(
-  element: Element<ElementType>,
+  element: MixedElement,
   containerTag: number,
   callback: ?() => void,
   options: ?RenderRootOptions,
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 917e3988c7b382..210366842383e0 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -9,7 +9,12 @@
  * @flow strict
  */
 
-import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
+import type {
+  ElementRef,
+  ElementType,
+  MixedElement,
+  AbstractComponent,
+} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -221,7 +226,7 @@ export type ReactNativeType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     options: ?RenderRootOptions,
@@ -256,7 +261,7 @@ export type ReactFabricType = {
     eventType: string,
   ): void,
   render(
-    element: Element<ElementType>,
+    element: MixedElement,
     containerTag: number,
     callback: ?() => void,
     concurrentRoot: ?boolean,
diff --git a/packages/react/index.js b/packages/react/index.js
index bad2c40e6c3dda..19f256fd73b5b8 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -15,6 +15,7 @@ export type AbstractComponent<
 > = React$AbstractComponent<Config, Instance>;
 export type ElementType = React$ElementType;
 export type Element<+C> = React$Element<C>;
+export type MixedElement = React$Element<ElementType>;
 export type Key = React$Key;
 export type Ref<C> = React$Ref<C>;
 export type Node = React$Node;

From 5030e08575c295ef352c5ae928e2366cc4765d32 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 27/40] [compiler] Exclude refs and ref values from having
 mutable ranges

Summary:
Refs, as stable values that the rules of react around mutability do not apply to, currently are treated as having mutable ranges, and through aliasing, this can extend the mutable range for other values and disrupt good memoization for those values. This PR excludes refs and their .current values from having mutable ranges.

Note that this is unsafe if ref access is allowed in render: if a mutable value is assigned to ref.current and then ref.current is mutated later, we won't realize that the original mutable value's range extends.

ghstack-source-id: e8f36ac25e2c9aadb0bf13bd8142e4593ee9f984
Pull Request resolved: https://github.com/facebook/react/pull/30713
---
 .../src/HIR/HIR.ts                            |  4 ++
 .../src/Inference/AnalyseFunctions.ts         |  5 +-
 .../src/Inference/InferMutableLifetimes.ts    | 10 +++-
 .../Inference/InferMutableRangesForAlias.ts   | 15 ++++--
 .../src/Inference/InferReferenceEffects.ts    | 13 ++---
 .../Validation/ValidateNoRefAccesInRender.ts  |  4 +-
 .../capture-ref-for-later-mutation.expect.md  | 29 +++++-----
 ...ified-later-preserve-memoization.expect.md |  6 ++-
 ...ref-modified-later-preserve-memoization.js |  2 +-
 ...a-function-preserve-memoization.expect.md} |  8 ++-
 ...ater-via-function-preserve-memoization.js} |  2 +-
 .../capture-ref-for-later-mutation.expect.md  | 42 +++++----------
 ....maybe-mutable-ref-not-preserved.expect.md | 35 ------------
 .../maybe-mutable-ref-not-preserved.expect.md | 53 +++++++++++++++++++
 ....ts => maybe-mutable-ref-not-preserved.ts} |  0
 .../repro-ref-mutable-range.expect.md         | 34 +++++++-----
 ...operty-dont-preserve-memoization.expect.md | 27 ++++++----
 17 files changed, 159 insertions(+), 130 deletions(-)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md => error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md} (68%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js => error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js} (88%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/{error.maybe-mutable-ref-not-preserved.ts => maybe-mutable-ref-not-preserved.ts} (100%)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index e61665ce4c6bb3..0810130102b0e1 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -1591,6 +1591,10 @@ export function isUseStateType(id: Identifier): boolean {
   return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseState';
 }
 
+export function isRefOrRefValue(id: Identifier): boolean {
+  return isUseRefType(id) || isRefValueType(id);
+}
+
 export function isSetStateType(id: Identifier): boolean {
   return id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetState';
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts
index b18e19606ce0d2..fbb24ea492c0ff 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts
@@ -14,8 +14,7 @@ import {
   LoweredFunction,
   Place,
   ReactiveScopeDependency,
-  isRefValueType,
-  isUseRefType,
+  isRefOrRefValue,
   makeInstructionId,
 } from '../HIR';
 import {deadCodeElimination} from '../Optimization';
@@ -139,7 +138,7 @@ function infer(
       name = dep.identifier.name;
     }
 
-    if (isUseRefType(dep.identifier) || isRefValueType(dep.identifier)) {
+    if (isRefOrRefValue(dep.identifier)) {
       /*
        * TODO: this is a hack to ensure we treat functions which reference refs
        * as having a capture and therefore being considered mutable. this ensures
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts
index 2ce1aebbf8577d..459baf4e287cc8 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts
@@ -11,6 +11,7 @@ import {
   Identifier,
   InstructionId,
   InstructionKind,
+  isRefOrRefValue,
   makeInstructionId,
   Place,
 } from '../HIR/HIR';
@@ -66,7 +67,9 @@ import {assertExhaustive} from '../Utils/utils';
  */
 
 function infer(place: Place, instrId: InstructionId): void {
-  place.identifier.mutableRange.end = makeInstructionId(instrId + 1);
+  if (!isRefOrRefValue(place.identifier)) {
+    place.identifier.mutableRange.end = makeInstructionId(instrId + 1);
+  }
 }
 
 function inferPlace(
@@ -171,7 +174,10 @@ export function inferMutableLifetimes(
         const declaration = contextVariableDeclarationInstructions.get(
           instr.value.lvalue.place.identifier,
         );
-        if (declaration != null) {
+        if (
+          declaration != null &&
+          !isRefOrRefValue(instr.value.lvalue.place.identifier)
+        ) {
           const range = instr.value.lvalue.place.identifier.mutableRange;
           if (range.start === 0) {
             range.start = declaration;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableRangesForAlias.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableRangesForAlias.ts
index 975acf6fbf55a6..a7e8b5c1f7a80e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableRangesForAlias.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableRangesForAlias.ts
@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {HIRFunction, Identifier, InstructionId} from '../HIR/HIR';
+import {
+  HIRFunction,
+  Identifier,
+  InstructionId,
+  isRefOrRefValue,
+} from '../HIR/HIR';
 import DisjointSet from '../Utils/DisjointSet';
 
 export function inferMutableRangesForAlias(
@@ -19,7 +24,8 @@ export function inferMutableRangesForAlias(
      * mutated.
      */
     const mutatingIdentifiers = [...aliasSet].filter(
-      id => id.mutableRange.end - id.mutableRange.start > 1,
+      id =>
+        id.mutableRange.end - id.mutableRange.start > 1 && !isRefOrRefValue(id),
     );
 
     if (mutatingIdentifiers.length > 0) {
@@ -36,7 +42,10 @@ export function inferMutableRangesForAlias(
        * last mutation.
        */
       for (const alias of aliasSet) {
-        if (alias.mutableRange.end < lastMutatingInstructionId) {
+        if (
+          alias.mutableRange.end < lastMutatingInstructionId &&
+          !isRefOrRefValue(alias)
+        ) {
           alias.mutableRange.end = lastMutatingInstructionId as InstructionId;
         }
       }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
index 356bc8af08bfda..4cce942c181547 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
@@ -30,8 +30,7 @@ import {
   isArrayType,
   isMutableEffect,
   isObjectType,
-  isRefValueType,
-  isUseRefType,
+  isRefOrRefValue,
 } from '../HIR/HIR';
 import {FunctionSignature} from '../HIR/ObjectShape';
 import {
@@ -523,10 +522,7 @@ class InferenceState {
         break;
       }
       case Effect.Mutate: {
-        if (
-          isRefValueType(place.identifier) ||
-          isUseRefType(place.identifier)
-        ) {
+        if (isRefOrRefValue(place.identifier)) {
           // no-op: refs are validate via ValidateNoRefAccessInRender
         } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
@@ -567,10 +563,7 @@ class InferenceState {
         break;
       }
       case Effect.Store: {
-        if (
-          isRefValueType(place.identifier) ||
-          isUseRefType(place.identifier)
-        ) {
+        if (isRefOrRefValue(place.identifier)) {
           // no-op: refs are validate via ValidateNoRefAccessInRender
         } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
index b4fb2a618ada45..a93664f418f8e7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
@@ -11,6 +11,7 @@ import {
   IdentifierId,
   Place,
   SourceLocation,
+  isRefOrRefValue,
   isRefValueType,
   isUseRefType,
 } from '../HIR';
@@ -231,8 +232,7 @@ function validateNoRefAccess(
   loc: SourceLocation,
 ): void {
   if (
-    isRefValueType(operand.identifier) ||
-    isUseRefType(operand.identifier) ||
+    isRefOrRefValue(operand.identifier) ||
     refAccessingFunctions.has(operand.identifier.id)
   ) {
     errors.push({
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
index 41748867b35d5f..b7371108d58675 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
@@ -36,27 +36,26 @@ import { useRef } from "react";
 import { addOne } from "shared-runtime";
 
 function useKeyCommand() {
-  const $ = _c(2);
+  const $ = _c(1);
   const currentPosition = useRef(0);
-  const handleKey = (direction) => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === "left" ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
 
-  const moveLeft = { handler: handleKey("left") };
+    const moveLeft = { handler: handleKey("left") };
 
-  const t0 = handleKey("right");
-  let t1;
-  if ($[0] !== t0) {
-    t1 = { handler: t0 };
+    const moveRight = { handler: handleKey("right") };
+
+    t0 = [moveLeft, moveRight];
     $[0] = t0;
-    $[1] = t1;
   } else {
-    t1 = $[1];
+    t0 = $[0];
   }
-  const moveRight = t1;
-  return [moveLeft, moveRight];
+  return t0;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
index 5eeb8c6b0ab89a..c79ceca9efcee7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
@@ -42,7 +42,9 @@ export const FIXTURE_ENTRYPOINT = {
 > 10 |     ref.current.inner = event.target.value;
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 11 |   });
-     | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (7:11)
+     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $44:TObject<BuiltInFunction> (7:11)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
   14 |   ref.current.inner = null;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js
index b209be75869926..cb259b457e3e39 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.js
@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
similarity index 68%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
index ad21b4ba8c5e95..045ac8c3d61cb6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
@@ -45,7 +45,11 @@ export const FIXTURE_ENTRYPOINT = {
 > 10 |     ref.current.inner = event.target.value;
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 11 |   });
-     | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (7:11)
+     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $53:TObject<BuiltInFunction> (7:11)
+
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
   14 |   const reset = () => {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
similarity index 88%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
index 8e71ed63269d84..dec828c2d0d19d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.js
@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
index 52cea4b047c051..54184be0f3f384 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
@@ -37,42 +37,26 @@ import { useRef } from "react";
 import { addOne } from "shared-runtime";
 
 function useKeyCommand() {
-  const $ = _c(6);
+  const $ = _c(1);
   const currentPosition = useRef(0);
-  const handleKey = (direction) => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === "left" ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { handler: handleKey("left") };
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
+
+    const moveLeft = { handler: handleKey("left") };
+
+    const moveRight = { handler: handleKey("right") };
+
+    t0 = [moveLeft, moveRight];
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const moveLeft = t0;
-
-  const t1 = handleKey("right");
-  let t2;
-  if ($[1] !== t1) {
-    t2 = { handler: t1 };
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const moveRight = t2;
-  let t3;
-  if ($[3] !== moveLeft || $[4] !== moveRight) {
-    t3 = [moveLeft, moveRight];
-    $[3] = moveLeft;
-    $[4] = moveRight;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
+  return t0;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
deleted file mode 100644
index 61fe8b8deb7ee7..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
-## Input
-
-```javascript
-// @validatePreserveExistingMemoizationGuarantees:true
-
-import {useRef, useMemo} from 'react';
-import {makeArray} from 'shared-runtime';
-
-function useFoo() {
-  const r = useRef();
-  return useMemo(() => makeArray(r), []);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-
-
-## Error
-
-```
-   6 | function useFoo() {
-   7 |   const r = useRef();
->  8 |   return useMemo(() => makeArray(r), []);
-     |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (8:8)
-   9 | }
-  10 |
-  11 | export const FIXTURE_ENTRYPOINT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
new file mode 100644
index 00000000000000..61ab6bafaecd13
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees:true
+
+import { useRef, useMemo } from "react";
+import { makeArray } from "shared-runtime";
+
+function useFoo() {
+  const $ = _c(1);
+  const r = useRef();
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = makeArray(r);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  t0 = t1;
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
index 96fd656ca3003a..8b656b8e23b279 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime";
 import { Stringify, identity, mutate, CONST_TRUE } from "shared-runtime";
 
 function Foo(props, ref) {
-  const $ = _c(5);
+  const $ = _c(7);
   let value;
   let t0;
   if ($[0] !== ref) {
@@ -45,19 +45,6 @@ function Foo(props, ref) {
       }
 
       mutate(value);
-      if (CONST_TRUE) {
-        const t1 = identity(ref);
-        let t2;
-        if ($[3] !== t1) {
-          t2 = <Stringify ref={t1} />;
-          $[3] = t1;
-          $[4] = t2;
-        } else {
-          t2 = $[4];
-        }
-        t0 = t2;
-        break bb0;
-      }
     }
     $[0] = ref;
     $[1] = value;
@@ -69,6 +56,25 @@ function Foo(props, ref) {
   if (t0 !== Symbol.for("react.early_return_sentinel")) {
     return t0;
   }
+  if (CONST_TRUE) {
+    let t1;
+    if ($[3] !== ref) {
+      t1 = identity(ref);
+      $[3] = ref;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== t1) {
+      t2 = <Stringify ref={t1} />;
+      $[5] = t1;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    return t2;
+  }
   return value;
 }
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
index e13d5a82c39b90..1efca9f0066bed 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
@@ -42,21 +42,26 @@ function Component(props) {
     t0 = $[0];
   }
   const ref = useRef(t0);
-
-  const onChange = (event) => {
-    ref.current.inner = event.target.value;
-  };
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (event) => {
+      ref.current.inner = event.target.value;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const onChange = t1;
 
   ref.current.inner = null;
-  let t1;
-  if ($[1] !== onChange) {
-    t1 = <input onChange={onChange} />;
-    $[1] = onChange;
-    $[2] = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <input onChange={onChange} />;
+    $[2] = t2;
   } else {
-    t1 = $[2];
+    t2 = $[2];
   }
-  return t1;
+  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

From 7468ac530e73992f28169ac69e18395a75edfc47 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 28/40] [compiler] Fixture to show ref-in-render enforcement
 issue with useCallback

Test Plan:
Documents that useCallback calls interfere with it being ok for refs to escape as part of functions into jsx

ghstack-source-id: a5df427981ca32406fb2325e583b64bbe26b1cdd
Pull Request resolved: https://github.com/facebook/react/pull/30714
---
 .../error.return-ref-callback.expect.md       | 37 +++++++++++++++++
 .../compiler/error.return-ref-callback.js     | 16 ++++++++
 .../error.useCallback-ref-in-render.expect.md | 41 +++++++++++++++++++
 .../error.useCallback-ref-in-render.js        | 16 ++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
new file mode 100644
index 00000000000000..ae42ba1ee54221
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   8 |   };
+   9 |
+> 10 |   return s;
+     |          ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $25:TObject<BuiltInFunction> (10:10)
+  11 | }
+  12 |
+  13 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
new file mode 100644
index 00000000000000..3a650cdeed8e81
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
@@ -0,0 +1,16 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
new file mode 100644
index 00000000000000..ad1c0e7c3fe3a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <a r={s} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   4 |   const ref = useRef();
+   5 |
+>  6 |   const s = useCallback(() => {
+     |                         ^^^^^^^
+>  7 |     return ref.current;
+     | ^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   });
+     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $27:TObject<BuiltInFunction> (6:8)
+   9 |
+  10 |   return <a r={s} />;
+  11 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js
new file mode 100644
index 00000000000000..3fc086164d6074
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js
@@ -0,0 +1,16 @@
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <a r={s} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};

From 8a531601115927400aa04d26a5f1800d159e1e7e Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 29/40] [compiler] Don't error on ref-in-render on StartMemoize

Test Plan:
Fixes the previous issue: ref enforcement ignores memoization marker instructions

ghstack-source-id: f35d6a611c5e740e9ea354ec80c3d7cdb3c0d658
Pull Request resolved: https://github.com/facebook/react/pull/30715
---
 .../Validation/ValidateNoRefAccesInRender.ts  |  3 +
 ...ified-later-preserve-memoization.expect.md | 20 ++---
 ...ia-function-preserve-memoization.expect.md | 24 ++----
 .../error.useCallback-ref-in-render.expect.md | 41 ----------
 .../useCallback-ref-in-render.expect.md       | 76 +++++++++++++++++++
 ...render.js => useCallback-ref-in-render.js} |  7 +-
 6 files changed, 97 insertions(+), 74 deletions(-)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.useCallback-ref-in-render.js => useCallback-ref-in-render.js} (70%)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
index a93664f418f8e7..a855d9f8b414e2 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
@@ -185,6 +185,9 @@ function validateNoRefAccessInRenderImpl(
           }
           break;
         }
+        case 'StartMemoize':
+        case 'FinishMemoize':
+          break;
         default: {
           for (const operand of eachInstructionValueOperand(instr.value)) {
             validateNoRefValueAccess(errors, refAccessingFunctions, operand);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
index c79ceca9efcee7..bff8f0e01f5823 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -31,23 +31,13 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-   5 |   const ref = useRef({inner: null});
-   6 |
->  7 |   const onChange = useCallback(event => {
-     |                                ^^^^^^^^^^
->  8 |     // The ref should still be mutable here even though function deps are frozen in
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
->  9 |     // @enablePreserveExistingMemoizationGuarantees mode
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 10 |     ref.current.inner = event.target.value;
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 11 |   });
-     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $44:TObject<BuiltInFunction> (7:11)
-
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
-  14 |   ref.current.inner = null;
+> 14 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
+  15 |
+  16 |   return <input onChange={onChange} />;
+  17 | }
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
index 045ac8c3d61cb6..9014de67d4478e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -34,25 +34,15 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-   5 |   const ref = useRef({inner: null});
-   6 |
->  7 |   const onChange = useCallback(event => {
-     |                                ^^^^^^^^^^
->  8 |     // The ref should still be mutable here even though function deps are frozen in
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
->  9 |     // @enablePreserveExistingMemoizationGuarantees mode
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 10 |     ref.current.inner = event.target.value;
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 11 |   });
-     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $53:TObject<BuiltInFunction> (7:11)
-
-InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
+  15 |     ref.current.inner = null;
+  16 |   };
+> 17 |   reset();
+     |   ^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
 
 InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
-  12 |
-  13 |   // The ref is modified later, extending its range and preventing memoization of onChange
-  14 |   const reset = () => {
+  18 |
+  19 |   return <input onChange={onChange} />;
+  20 | }
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
deleted file mode 100644
index ad1c0e7c3fe3a7..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.expect.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-## Input
-
-```javascript
-// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
-
-component Foo() {
-  const ref = useRef();
-
-  const s = useCallback(() => {
-    return ref.current;
-  });
-
-  return <a r={s} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [],
-};
-
-```
-
-
-## Error
-
-```
-   4 |   const ref = useRef();
-   5 |
->  6 |   const s = useCallback(() => {
-     |                         ^^^^^^^
->  7 |     return ref.current;
-     | ^^^^^^^^^^^^^^^^^^^^^^^
->  8 |   });
-     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $27:TObject<BuiltInFunction> (6:8)
-   9 |
-  10 |   return <a r={s} />;
-  11 | }
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md
new file mode 100644
index 00000000000000..e1427437ce86da
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md
@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useRef } from "react";
+
+function Foo() {
+  const $ = _c(2);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => ref.current;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <A r={s} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function A(t0) {
+  const $ = _c(1);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div></div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js
similarity index 70%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js
index 3fc086164d6074..9fefa503203e24 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js
@@ -1,4 +1,5 @@
 // @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
 
 component Foo() {
   const ref = useRef();
@@ -7,7 +8,11 @@ component Foo() {
     return ref.current;
   });
 
-  return <a r={s} />;
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
 }
 
 export const FIXTURE_ENTRYPOINT = {

From 1016174af520fc89bafab7189405fce8ff3a9bb5 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 30/40] [compiler] Reposition ref-in-render errors to the read
 location of .current

Summary:
Since we want to make ref-in-render errors enabled by default, we should position those errors at the location of the read. Not only will this be a better experience, but it also aligns the behavior of Forget and Flow.

This PR also cleans up the resulting error messages to not emit implementation details about place values.

ghstack-source-id: 1d1131706867a6fc88efddd631c4d16d2181e592
Pull Request resolved: https://github.com/facebook/react/pull/30723
---
 .../Validation/ValidateNoRefAccesInRender.ts  | 73 +++++++++++++++----
 ...invalid-access-ref-during-render.expect.md |  7 +-
 ...tating-refs-in-render-transitive.expect.md |  2 +-
 ...d-ref-prop-in-render-destructure.expect.md |  7 +-
 ...ref-prop-in-render-property-load.expect.md |  7 +-
 ...error.invalid-ref-value-as-props.expect.md |  2 +-
 ...d-set-and-read-ref-during-render.expect.md |  2 +-
 ...ef-nested-property-during-render.expect.md |  4 +-
 .../error.return-ref-callback.expect.md       |  2 +-
 ...ified-later-preserve-memoization.expect.md |  2 +-
 ...ia-function-preserve-memoization.expect.md |  2 +-
 11 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
index a855d9f8b414e2..4da6b23a1a9ed8 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
@@ -15,7 +15,6 @@ import {
   isRefValueType,
   isUseRefType,
 } from '../HIR';
-import {printPlace} from '../HIR/PrintHIR';
 import {
   eachInstructionValueOperand,
   eachTerminalOperand,
@@ -53,6 +52,7 @@ function validateNoRefAccessInRenderImpl(
   refAccessingFunctions: Set<IdentifierId>,
 ): Result<void, CompilerError> {
   const errors = new CompilerError();
+  const lookupLocations: Map<IdentifierId, SourceLocation> = new Map();
   for (const [, block] of fn.body.blocks) {
     for (const instr of block.instructions) {
       switch (instr.value.kind) {
@@ -64,10 +64,12 @@ function validateNoRefAccessInRenderImpl(
                 severity: ErrorSeverity.InvalidReact,
                 reason:
                   'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
-                loc: operand.loc,
-                description: `Cannot access ref value at ${printPlace(
-                  operand,
-                )}`,
+                loc: lookupLocations.get(operand.identifier.id) ?? operand.loc,
+                description:
+                  operand.identifier.name !== null &&
+                  operand.identifier.name.kind === 'named'
+                    ? `Cannot access ref value \`${operand.identifier.name.value}\``
+                    : null,
                 suggestions: null,
               });
             }
@@ -75,12 +77,24 @@ function validateNoRefAccessInRenderImpl(
           break;
         }
         case 'PropertyLoad': {
+          if (
+            isRefValueType(instr.lvalue.identifier) &&
+            instr.value.property === 'current'
+          ) {
+            lookupLocations.set(instr.lvalue.identifier.id, instr.loc);
+          }
           break;
         }
         case 'LoadLocal': {
           if (refAccessingFunctions.has(instr.value.place.identifier.id)) {
             refAccessingFunctions.add(instr.lvalue.identifier.id);
           }
+          if (isRefValueType(instr.lvalue.identifier)) {
+            const loc = lookupLocations.get(instr.value.place.identifier.id);
+            if (loc !== undefined) {
+              lookupLocations.set(instr.lvalue.identifier.id, loc);
+            }
+          }
           break;
         }
         case 'StoreLocal': {
@@ -88,6 +102,13 @@ function validateNoRefAccessInRenderImpl(
             refAccessingFunctions.add(instr.value.lvalue.place.identifier.id);
             refAccessingFunctions.add(instr.lvalue.identifier.id);
           }
+          if (isRefValueType(instr.value.lvalue.place.identifier)) {
+            const loc = lookupLocations.get(instr.value.value.identifier.id);
+            if (loc !== undefined) {
+              lookupLocations.set(instr.value.lvalue.place.identifier.id, loc);
+              lookupLocations.set(instr.lvalue.identifier.id, loc);
+            }
+          }
           break;
         }
         case 'ObjectMethod':
@@ -140,7 +161,11 @@ function validateNoRefAccessInRenderImpl(
                 reason:
                   'This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef)',
                 loc: callee.loc,
-                description: `Function ${printPlace(callee)} accesses a ref`,
+                description:
+                  callee.identifier.name !== null &&
+                  callee.identifier.name.kind === 'named'
+                    ? `Function \`${callee.identifier.name.value}\` accesses a ref`
+                    : null,
                 suggestions: null,
               });
             }
@@ -149,7 +174,7 @@ function validateNoRefAccessInRenderImpl(
                 errors,
                 refAccessingFunctions,
                 operand,
-                operand.loc,
+                lookupLocations.get(operand.identifier.id) ?? operand.loc,
               );
             }
           }
@@ -162,7 +187,7 @@ function validateNoRefAccessInRenderImpl(
               errors,
               refAccessingFunctions,
               operand,
-              operand.loc,
+              lookupLocations.get(operand.identifier.id) ?? operand.loc,
             );
           }
           break;
@@ -175,13 +200,18 @@ function validateNoRefAccessInRenderImpl(
             errors,
             refAccessingFunctions,
             instr.value.object,
-            instr.loc,
+            lookupLocations.get(instr.value.object.identifier.id) ?? instr.loc,
           );
           for (const operand of eachInstructionValueOperand(instr.value)) {
             if (operand === instr.value.object) {
               continue;
             }
-            validateNoRefValueAccess(errors, refAccessingFunctions, operand);
+            validateNoRefValueAccess(
+              errors,
+              refAccessingFunctions,
+              lookupLocations,
+              operand,
+            );
           }
           break;
         }
@@ -190,14 +220,24 @@ function validateNoRefAccessInRenderImpl(
           break;
         default: {
           for (const operand of eachInstructionValueOperand(instr.value)) {
-            validateNoRefValueAccess(errors, refAccessingFunctions, operand);
+            validateNoRefValueAccess(
+              errors,
+              refAccessingFunctions,
+              lookupLocations,
+              operand,
+            );
           }
           break;
         }
       }
     }
     for (const operand of eachTerminalOperand(block.terminal)) {
-      validateNoRefValueAccess(errors, refAccessingFunctions, operand);
+      validateNoRefValueAccess(
+        errors,
+        refAccessingFunctions,
+        lookupLocations,
+        operand,
+      );
     }
   }
 
@@ -211,6 +251,7 @@ function validateNoRefAccessInRenderImpl(
 function validateNoRefValueAccess(
   errors: CompilerError,
   refAccessingFunctions: Set<IdentifierId>,
+  lookupLocations: Map<IdentifierId, SourceLocation>,
   operand: Place,
 ): void {
   if (
@@ -221,8 +262,12 @@ function validateNoRefValueAccess(
       severity: ErrorSeverity.InvalidReact,
       reason:
         'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
-      loc: operand.loc,
-      description: `Cannot access ref value at ${printPlace(operand)}`,
+      loc: lookupLocations.get(operand.identifier.id) ?? operand.loc,
+      description:
+        operand.identifier.name !== null &&
+        operand.identifier.name.kind === 'named'
+          ? `Cannot access ref value \`${operand.identifier.name.value}\``
+          : null,
       suggestions: null,
     });
   }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
index c5e8b68c04002f..02748366456fb6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
@@ -15,10 +15,11 @@ function Component(props) {
 ## Error
 
 ```
+  2 | function Component(props) {
   3 |   const ref = useRef(null);
-  4 |   const value = ref.current;
-> 5 |   return value;
-    |          ^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $22:TObject<BuiltInRefValue> (5:5)
+> 4 |   const value = ref.current;
+    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+  5 |   return value;
   6 | }
   7 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
index 0d4cb1318911b2..f23ff6f3c8c57d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
@@ -24,7 +24,7 @@ function Component() {
    7 |   };
    8 |   const changeRef = setRef;
 >  9 |   changeRef();
-     |   ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $39[11:13]:TObject<BuiltInFunction> accesses a ref (9:9)
+     |   ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
 
 InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (9:9)
   10 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
index d8e8174d2cc627..100dafaf38a88c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
@@ -14,10 +14,11 @@ function Component({ref}) {
 ## Error
 
 ```
+  1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component({ref}) {
-  3 |   const value = ref.current;
-> 4 |   return <div>{value}</div>;
-    |                ^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $17:TObject<BuiltInRefValue> (4:4)
+> 3 |   const value = ref.current;
+    |                 ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+  4 |   return <div>{value}</div>;
   5 | }
   6 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
index e374900a95ad4c..4d8c4c735c70ee 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
@@ -14,10 +14,11 @@ function Component(props) {
 ## Error
 
 ```
+  1 | // @validateRefAccessDuringRender @compilationMode(infer)
   2 | function Component(props) {
-  3 |   const value = props.ref.current;
-> 4 |   return <div>{value}</div>;
-    |                ^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at read $15:TObject<BuiltInRefValue> (4:4)
+> 3 |   const value = props.ref.current;
+    |                 ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (3:3)
+  4 |   return <div>{value}</div>;
   5 | }
   6 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
index 96e2ca9a1ef280..f86f6b7a39145e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
@@ -17,7 +17,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   return <Foo ref={ref.current} />;
-    |                    ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $19:TObject<BuiltInRefValue> (4:4)
+    |                    ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
   5 | }
   6 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
index 5db15684278355..d38adb5589db3e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
@@ -20,7 +20,7 @@ function Component(props) {
 > 4 |   ref.current = props.value;
     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24:TObject<BuiltInRefValue> (5:5)
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
   5 |   return ref.current;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
index 290b8539e7b149..527adfc6e9fc51 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
@@ -18,9 +18,9 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef({inner: null});
 > 4 |   ref.current.inner = props.value;
-    |   ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
+    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
 
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $30:TObject<BuiltInRefValue> (5:5)
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
   5 |   return ref.current.inner;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
index ae42ba1ee54221..98f2a867140349 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
    8 |   };
    9 |
 > 10 |   return s;
-     |          ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $25:TObject<BuiltInFunction> (10:10)
+     |          ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
   11 | }
   12 |
   13 | export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
index bff8f0e01f5823..7a8f271bd2879e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -34,7 +34,7 @@ export const FIXTURE_ENTRYPOINT = {
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
 > 14 |   ref.current.inner = null;
-     |   ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
+     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
   15 |
   16 |   return <input onChange={onChange} />;
   17 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
index 9014de67d4478e..f3ab9816218f96 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -37,7 +37,7 @@ export const FIXTURE_ENTRYPOINT = {
   15 |     ref.current.inner = null;
   16 |   };
 > 17 |   reset();
-     |   ^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
+     |   ^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
 
 InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
   18 |

From 21a95239e15cf62e4bf3922af998383b844df2e3 Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 31/40] [compiler] Allow functions containing refs to be
 returned

Summary:
We previously were excessively strict about preventing functions that access refs from being returned--doing so is potentially valid for hooks, because the return value may only be used in an event or effect.

ghstack-source-id: cfa8bb1b54e8eb365f2de50d051bd09e09162d7b
Pull Request resolved: https://github.com/facebook/react/pull/30724
---
 .../Validation/ValidateNoRefAccesInRender.ts  | 53 +++++++++++-------
 .../error.return-ref-callback.expect.md       | 37 -------------
 .../compiler/return-ref-callback.expect.md    | 55 +++++++++++++++++++
 ...ref-callback.js => return-ref-callback.js} |  2 +
 4 files changed, 90 insertions(+), 57 deletions(-)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.return-ref-callback.js => return-ref-callback.js} (89%)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
index 4da6b23a1a9ed8..df6241a73f448e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts
@@ -59,20 +59,7 @@ function validateNoRefAccessInRenderImpl(
         case 'JsxExpression':
         case 'JsxFragment': {
           for (const operand of eachInstructionValueOperand(instr.value)) {
-            if (isRefValueType(operand.identifier)) {
-              errors.push({
-                severity: ErrorSeverity.InvalidReact,
-                reason:
-                  'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
-                loc: lookupLocations.get(operand.identifier.id) ?? operand.loc,
-                description:
-                  operand.identifier.name !== null &&
-                  operand.identifier.name.kind === 'named'
-                    ? `Cannot access ref value \`${operand.identifier.name.value}\``
-                    : null,
-                suggestions: null,
-              });
-            }
+            validateNoDirectRefValueAccess(errors, operand, lookupLocations);
           }
           break;
         }
@@ -232,12 +219,17 @@ function validateNoRefAccessInRenderImpl(
       }
     }
     for (const operand of eachTerminalOperand(block.terminal)) {
-      validateNoRefValueAccess(
-        errors,
-        refAccessingFunctions,
-        lookupLocations,
-        operand,
-      );
+      if (block.terminal.kind !== 'return') {
+        validateNoRefValueAccess(
+          errors,
+          refAccessingFunctions,
+          lookupLocations,
+          operand,
+        );
+      } else {
+        // Allow functions containing refs to be returned, but not direct ref values
+        validateNoDirectRefValueAccess(errors, operand, lookupLocations);
+      }
     }
   }
 
@@ -297,3 +289,24 @@ function validateNoRefAccess(
     });
   }
 }
+
+function validateNoDirectRefValueAccess(
+  errors: CompilerError,
+  operand: Place,
+  lookupLocations: Map<IdentifierId, SourceLocation>,
+): void {
+  if (isRefValueType(operand.identifier)) {
+    errors.push({
+      severity: ErrorSeverity.InvalidReact,
+      reason:
+        'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
+      loc: lookupLocations.get(operand.identifier.id) ?? operand.loc,
+      description:
+        operand.identifier.name !== null &&
+        operand.identifier.name.kind === 'named'
+          ? `Cannot access ref value \`${operand.identifier.name.value}\``
+          : null,
+      suggestions: null,
+    });
+  }
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
deleted file mode 100644
index 98f2a867140349..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.expect.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
-
-component Foo() {
-  const ref = useRef();
-
-  const s = () => {
-    return ref.current;
-  };
-
-  return s;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [],
-};
-
-```
-
-
-## Error
-
-```
-   8 |   };
-   9 |
-> 10 |   return s;
-     |          ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (10:10)
-  11 | }
-  12 |
-  13 | export const FIXTURE_ENTRYPOINT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
new file mode 100644
index 00000000000000..ed1dfa39ea55c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+
+import {useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = () => {
+    return ref.current;
+  };
+
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+
+import { useRef } from "react";
+
+function Foo() {
+  const $ = _c(1);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => ref.current;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  return s;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
similarity index 89%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
index 3a650cdeed8e81..f1a45ebc4ff3e3 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.return-ref-callback.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
@@ -1,5 +1,7 @@
 // @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
 
+import {useRef} from 'react';
+
 component Foo() {
   const ref = useRef();
 

From 5edbe29dbe945d821021a1152b267f5a86efc55b Mon Sep 17 00:00:00 2001
From: Mike Vitousek <mmvitousek@gmail.com>
Date: Fri, 16 Aug 2024 13:27:13 -0400
Subject: [PATCH 32/40] [compiler] Make ref enforcement on by default

Summary:
The change earlier in this stack makes it less safe to have ref enforcement disabled. This diff enables it by default.

ghstack-source-id: d3ab5f1b28b7aed0f0d6d69547bb638a1e326b66
Pull Request resolved: https://github.com/facebook/react/pull/30716
---
 .../src/HIR/Environment.ts                    |  2 +-
 .../capture-ref-for-later-mutation.expect.md  | 69 --------------
 ...r.capture-ref-for-later-mutation.expect.md | 50 +++++++++++
 ... error.capture-ref-for-later-mutation.tsx} |  0
 .../error.repro-ref-mutable-range.expect.md   | 40 +++++++++
 ....tsx => error.repro-ref-mutable-range.tsx} |  0
 ...operty-dont-preserve-memoization.expect.md | 42 +++++++++
 ...ted-property-dont-preserve-memoization.js} |  0
 .../capture-ref-for-later-mutation.expect.md  | 70 ---------------
 ...r.capture-ref-for-later-mutation.expect.md | 51 +++++++++++
 ... error.capture-ref-for-later-mutation.tsx} |  0
 ....maybe-mutable-ref-not-preserved.expect.md | 35 ++++++++
 ... error.maybe-mutable-ref-not-preserved.ts} |  0
 .../error.useMemo-with-refs.flow.expect.md    | 31 +++++++
 ...low.js => error.useMemo-with-refs.flow.js} |  0
 .../maybe-mutable-ref-not-preserved.expect.md | 53 -----------
 .../useMemo-with-refs.flow.expect.md          | 54 -----------
 .../repro-ref-mutable-range.expect.md         | 89 -------------------
 ...operty-dont-preserve-memoization.expect.md | 75 ----------------
 .../src/__tests__/parseConfigPragma-test.ts   |  6 +-
 .../__tests__/ReactCompilerRule-test.ts       | 20 ++++-
 .../src/rules/ReactCompilerRule.ts            |  5 +-
 22 files changed, 275 insertions(+), 417 deletions(-)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{capture-ref-for-later-mutation.tsx => error.capture-ref-for-later-mutation.tsx} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{repro-ref-mutable-range.tsx => error.repro-ref-mutable-range.tsx} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{useCallback-set-ref-nested-property-dont-preserve-memoization.js => error.useCallback-set-ref-nested-property-dont-preserve-memoization.js} (100%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/{capture-ref-for-later-mutation.tsx => error.capture-ref-for-later-mutation.tsx} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/{maybe-mutable-ref-not-preserved.ts => error.maybe-mutable-ref-not-preserved.ts} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/{useMemo-with-refs.flow.js => error.useMemo-with-refs.flow.js} (100%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
index 7eef0a7cc24b9f..ca03b8a7b1e395 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
@@ -223,7 +223,7 @@ const EnvironmentConfigSchema = z.object({
   validateHooksUsage: z.boolean().default(true),
 
   // Validate that ref values (`ref.current`) are not accessed during render.
-  validateRefAccessDuringRender: z.boolean().default(false),
+  validateRefAccessDuringRender: z.boolean().default(true),
 
   /*
    * Validates that setState is not unconditionally called during render, as it can lead to
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
deleted file mode 100644
index b7371108d58675..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md
+++ /dev/null
@@ -1,69 +0,0 @@
-
-## Input
-
-```javascript
-import {useRef} from 'react';
-import {addOne} from 'shared-runtime';
-
-function useKeyCommand() {
-  const currentPosition = useRef(0);
-  const handleKey = direction => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === 'left' ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
-  const moveLeft = {
-    handler: handleKey('left'),
-  };
-  const moveRight = {
-    handler: handleKey('right'),
-  };
-  return [moveLeft, moveRight];
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useKeyCommand,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { useRef } from "react";
-import { addOne } from "shared-runtime";
-
-function useKeyCommand() {
-  const $ = _c(1);
-  const currentPosition = useRef(0);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const handleKey = (direction) => () => {
-      const position = currentPosition.current;
-      const nextPosition = direction === "left" ? addOne(position) : position;
-      currentPosition.current = nextPosition;
-    };
-
-    const moveLeft = { handler: handleKey("left") };
-
-    const moveRight = { handler: handleKey("right") };
-
-    t0 = [moveLeft, moveRight];
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useKeyCommand,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) [{"handler":"[[ function params=0 ]]"},{"handler":"[[ function params=0 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
new file mode 100644
index 00000000000000..52350036257d0e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+  10 |   };
+  11 |   const moveLeft = {
+> 12 |     handler: handleKey('left'),
+     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (12:12)
+
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (15:15)
+  13 |   };
+  14 |   const moveRight = {
+  15 |     handler: handleKey('right'),
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.tsx
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-later-mutation.tsx
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
new file mode 100644
index 00000000000000..1e5fda2a35fb04
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+import {Stringify, identity, mutate, CONST_TRUE} from 'shared-runtime';
+
+function Foo(props, ref) {
+  const value = {};
+  if (CONST_TRUE) {
+    mutate(value);
+    return <Stringify ref={ref} />;
+  }
+  mutate(value);
+  if (CONST_TRUE) {
+    return <Stringify ref={identity(ref)} />;
+  }
+  return value;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{}, {current: 'fake-ref-object'}],
+};
+
+```
+
+
+## Error
+
+```
+   9 |   mutate(value);
+  10 |   if (CONST_TRUE) {
+> 11 |     return <Stringify ref={identity(ref)} />;
+     |                                     ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (11:11)
+  12 |   }
+  13 |   return value;
+  14 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.tsx
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-ref-mutable-range.tsx
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
new file mode 100644
index 00000000000000..dbc3060a26f43f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enablePreserveExistingMemoizationGuarantees:false
+import {useCallback, useRef} from 'react';
+
+function Component(props) {
+  const ref = useRef({inner: null});
+
+  const onChange = useCallback(event => {
+    // The ref should still be mutable here even though function deps are frozen in
+    // @enablePreserveExistingMemoizationGuarantees mode
+    ref.current.inner = event.target.value;
+  });
+
+  ref.current.inner = null;
+
+  return <input onChange={onChange} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+
+## Error
+
+```
+  11 |   });
+  12 |
+> 13 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+  14 |
+  15 |   return <input onChange={onChange} />;
+  16 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
deleted file mode 100644
index 54184be0f3f384..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md
+++ /dev/null
@@ -1,70 +0,0 @@
-
-## Input
-
-```javascript
-// @enableReactiveScopesInHIR:false
-import {useRef} from 'react';
-import {addOne} from 'shared-runtime';
-
-function useKeyCommand() {
-  const currentPosition = useRef(0);
-  const handleKey = direction => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === 'left' ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
-  const moveLeft = {
-    handler: handleKey('left'),
-  };
-  const moveRight = {
-    handler: handleKey('right'),
-  };
-  return [moveLeft, moveRight];
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useKeyCommand,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableReactiveScopesInHIR:false
-import { useRef } from "react";
-import { addOne } from "shared-runtime";
-
-function useKeyCommand() {
-  const $ = _c(1);
-  const currentPosition = useRef(0);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const handleKey = (direction) => () => {
-      const position = currentPosition.current;
-      const nextPosition = direction === "left" ? addOne(position) : position;
-      currentPosition.current = nextPosition;
-    };
-
-    const moveLeft = { handler: handleKey("left") };
-
-    const moveRight = { handler: handleKey("right") };
-
-    t0 = [moveLeft, moveRight];
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useKeyCommand,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) [{"handler":"[[ function params=0 ]]"},{"handler":"[[ function params=0 ]]"}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
new file mode 100644
index 00000000000000..f0b0e6f3a86797
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @enableReactiveScopesInHIR:false
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left'),
+  };
+  const moveRight = {
+    handler: handleKey('right'),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+  11 |   };
+  12 |   const moveLeft = {
+> 13 |     handler: handleKey('left'),
+     |              ^^^^^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (13:13)
+
+InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+
+InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (16:16)
+  14 |   };
+  15 |   const moveRight = {
+  16 |     handler: handleKey('right'),
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.tsx
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/error.capture-ref-for-later-mutation.tsx
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
new file mode 100644
index 00000000000000..1ac3884f92f259
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+   6 | function useFoo() {
+   7 |   const r = useRef();
+>  8 |   return useMemo(() => makeArray(r), []);
+     |                                  ^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (8:8)
+   9 | }
+  10 |
+  11 | export const FIXTURE_ENTRYPOINT = {
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
new file mode 100644
index 00000000000000..de37e0d3d43916
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
@@ -0,0 +1,31 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {identity} from 'shared-runtime';
+
+component Component(disableLocalRef, ref) {
+  const localRef = useFooRef();
+  const mergedRef = useMemo(() => {
+    return disableLocalRef ? ref : identity(ref, localRef);
+  }, [disableLocalRef, ref, localRef]);
+  return <div ref={mergedRef} />;
+}
+
+```
+
+
+## Error
+
+```
+   5 |   const localRef = useFooRef();
+   6 |   const mergedRef = useMemo(() => {
+>  7 |     return disableLocalRef ? ref : identity(ref, localRef);
+     |                                             ^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (7:7)
+   8 |   }, [disableLocalRef, ref, localRef]);
+   9 |   return <div ref={mergedRef} />;
+  10 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
deleted file mode 100644
index 61ab6bafaecd13..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
+++ /dev/null
@@ -1,53 +0,0 @@
-
-## Input
-
-```javascript
-// @validatePreserveExistingMemoizationGuarantees:true
-
-import {useRef, useMemo} from 'react';
-import {makeArray} from 'shared-runtime';
-
-function useFoo() {
-  const r = useRef();
-  return useMemo(() => makeArray(r), []);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees:true
-
-import { useRef, useMemo } from "react";
-import { makeArray } from "shared-runtime";
-
-function useFoo() {
-  const $ = _c(1);
-  const r = useRef();
-  let t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = makeArray(r);
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  t0 = t1;
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
deleted file mode 100644
index 1fc118ac59ba42..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
+++ /dev/null
@@ -1,54 +0,0 @@
-
-## Input
-
-```javascript
-// @flow @validatePreserveExistingMemoizationGuarantees
-import {identity} from 'shared-runtime';
-
-component Component(disableLocalRef, ref) {
-  const localRef = useFooRef();
-  const mergedRef = useMemo(() => {
-    return disableLocalRef ? ref : identity(ref, localRef);
-  }, [disableLocalRef, ref, localRef]);
-  return <div ref={mergedRef} />;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { identity } from "shared-runtime";
-
-const Component = React.forwardRef(Component_withRef);
-function Component_withRef(t0, ref) {
-  const $ = _c(6);
-  const { disableLocalRef } = t0;
-  const localRef = useFooRef();
-  let t1;
-  let t2;
-  if ($[0] !== disableLocalRef || $[1] !== ref || $[2] !== localRef) {
-    t2 = disableLocalRef ? ref : identity(ref, localRef);
-    $[0] = disableLocalRef;
-    $[1] = ref;
-    $[2] = localRef;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  t1 = t2;
-  const mergedRef = t1;
-  let t3;
-  if ($[4] !== mergedRef) {
-    t3 = <div ref={mergedRef} />;
-    $[4] = mergedRef;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
-}
-
-```
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
deleted file mode 100644
index 8b656b8e23b279..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md
+++ /dev/null
@@ -1,89 +0,0 @@
-
-## Input
-
-```javascript
-import {Stringify, identity, mutate, CONST_TRUE} from 'shared-runtime';
-
-function Foo(props, ref) {
-  const value = {};
-  if (CONST_TRUE) {
-    mutate(value);
-    return <Stringify ref={ref} />;
-  }
-  mutate(value);
-  if (CONST_TRUE) {
-    return <Stringify ref={identity(ref)} />;
-  }
-  return value;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{}, {current: 'fake-ref-object'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { Stringify, identity, mutate, CONST_TRUE } from "shared-runtime";
-
-function Foo(props, ref) {
-  const $ = _c(7);
-  let value;
-  let t0;
-  if ($[0] !== ref) {
-    t0 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      value = {};
-      if (CONST_TRUE) {
-        mutate(value);
-        t0 = <Stringify ref={ref} />;
-        break bb0;
-      }
-
-      mutate(value);
-    }
-    $[0] = ref;
-    $[1] = value;
-    $[2] = t0;
-  } else {
-    value = $[1];
-    t0 = $[2];
-  }
-  if (t0 !== Symbol.for("react.early_return_sentinel")) {
-    return t0;
-  }
-  if (CONST_TRUE) {
-    let t1;
-    if ($[3] !== ref) {
-      t1 = identity(ref);
-      $[3] = ref;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
-    let t2;
-    if ($[5] !== t1) {
-      t2 = <Stringify ref={t1} />;
-      $[5] = t1;
-      $[6] = t2;
-    } else {
-      t2 = $[6];
-    }
-    return t2;
-  }
-  return value;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{}, { current: "fake-ref-object" }],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>{"ref":{"current":"fake-ref-object"}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
deleted file mode 100644
index 1efca9f0066bed..00000000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
+++ /dev/null
@@ -1,75 +0,0 @@
-
-## Input
-
-```javascript
-// @enablePreserveExistingMemoizationGuarantees:false
-import {useCallback, useRef} from 'react';
-
-function Component(props) {
-  const ref = useRef({inner: null});
-
-  const onChange = useCallback(event => {
-    // The ref should still be mutable here even though function deps are frozen in
-    // @enablePreserveExistingMemoizationGuarantees mode
-    ref.current.inner = event.target.value;
-  });
-
-  ref.current.inner = null;
-
-  return <input onChange={onChange} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enablePreserveExistingMemoizationGuarantees:false
-import { useCallback, useRef } from "react";
-
-function Component(props) {
-  const $ = _c(3);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { inner: null };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const ref = useRef(t0);
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = (event) => {
-      ref.current.inner = event.target.value;
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const onChange = t1;
-
-  ref.current.inner = null;
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = <input onChange={onChange} />;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <input>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts
index 8150a523263c78..706563b33b4573 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/parseConfigPragma-test.ts
@@ -14,16 +14,16 @@ describe('parseConfigPragma()', () => {
     // Validate defaults first to make sure that the parser is getting the value from the pragma,
     // and not just missing it and getting the default value
     expect(defaultConfig.enableUseTypeAnnotations).toBe(false);
-    expect(defaultConfig.validateRefAccessDuringRender).toBe(false);
+    expect(defaultConfig.validateNoSetStateInPassiveEffects).toBe(false);
     expect(defaultConfig.validateNoSetStateInRender).toBe(true);
 
     const config = parseConfigPragma(
-      '@enableUseTypeAnnotations @validateRefAccessDuringRender:true @validateNoSetStateInRender:false',
+      '@enableUseTypeAnnotations @validateNoSetStateInPassiveEffects:true @validateNoSetStateInRender:false',
     );
     expect(config).toEqual({
       ...defaultConfig,
       enableUseTypeAnnotations: true,
-      validateRefAccessDuringRender: true,
+      validateNoSetStateInPassiveEffects: true,
       validateNoSetStateInRender: false,
     });
   });
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
index c87bcadbe98bca..c1aba9f4c84055 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
@@ -93,12 +93,12 @@ const tests: CompilerTestCases = {
       `,
     },
     {
-      // TODO(gsn): Move this to invalid test suite, when we turn on
-      // validateRefAccessDuringRender validation
+      // Don't report the issue if Flow already has
       name: '[InvalidInput] Ref access during render',
       code: normalizeIndent`
         function Component(props) {
           const ref = useRef(null);
+          // $FlowFixMe[react-rule-unsafe-ref]
           const value = ref.current;
           return value;
         }
@@ -106,6 +106,22 @@ const tests: CompilerTestCases = {
     },
   ],
   invalid: [
+    {
+      name: '[InvalidInput] Ref access during render',
+      code: normalizeIndent`
+        function Component(props) {
+          const ref = useRef(null);
+          const value = ref.current;
+          return value;
+        }
+      `,
+      errors: [
+        {
+          message:
+            'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)',
+        },
+      ],
+    },
     {
       name: 'Reportable levels can be configured',
       options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
index 2fe34a0b7ff2b6..7b6525842c4d24 100644
--- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
@@ -179,7 +179,10 @@ const rule: Rule.RuleModule = {
           if (!isReportableDiagnostic(detail)) {
             return;
           }
-          if (hasFlowSuppression(detail.loc, 'react-rule-hook')) {
+          if (
+            hasFlowSuppression(detail.loc, 'react-rule-hook') ||
+            hasFlowSuppression(detail.loc, 'react-rule-unsafe-ref')
+          ) {
             // If Flow already caught this error, we don't need to report it again.
             return;
           }

From 1eaccd8285f0bd40407705a9356391a171adf3b1 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@vercel.com>
Date: Fri, 16 Aug 2024 21:08:20 +0200
Subject: [PATCH 33/40] [Fax] Make `react-markup` publishable via scripts
 (#30722)

---
 ReactVersions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 736d6c8f547170..731f5f336270e4 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -52,7 +52,7 @@ const stablePackages = {
 // These packages do not exist in the @canary or @latest channel, only
 // @experimental. We don't use semver, just the commit sha, so this is just a
 // list of package names instead of a map.
-const experimentalPackages = [];
+const experimentalPackages = ['react-markup'];
 
 module.exports = {
   ReactVersion,

From 7b41cdc093c7a28a089e2c402cbe98cac68de509 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 16 Aug 2024 14:21:57 -0700
Subject: [PATCH 34/40] [Flight][Static] Implement halting a prerender behind
 enableHalt (#30705)

enableHalt turns on a mode for flight prerenders where aborts are
treated like infinitely stalled outcomes while still completing the
prerender. For regular tasks we simply serialize the slot as a promise
that never settles. For ReadableStream, Blob, and Async Iterators we
just never advance the serialization so they remain unfinished when
consumed on the client.

When enableHalt is turned on aborts of prerenders will halt rather than
error. The abort reason is forwarded to the upstream produces of the
aforementioned async iterators, blobs, and ReadableStreams. In the
future if we expose a signal that you can consume from within a render
to cancel additional work the abort reason will also be forwarded there
---
 .../src/server/ReactFlightDOMServerNode.js    |  17 +-
 .../src/server/ReactFlightDOMServerBrowser.js |  17 +-
 .../src/server/ReactFlightDOMServerEdge.js    |  17 +-
 .../src/server/ReactFlightDOMServerNode.js    |  17 +-
 .../src/__tests__/ReactFlightDOM-test.js      | 134 +++++++
 .../__tests__/ReactFlightDOMBrowser-test.js   | 115 +++++-
 .../src/__tests__/ReactFlightDOMEdge-test.js  | 341 +++++++++++++-----
 .../src/__tests__/ReactFlightDOMNode-test.js  | 133 +++++++
 .../src/server/ReactFlightDOMServerBrowser.js |  17 +-
 .../src/server/ReactFlightDOMServerEdge.js    |  17 +-
 .../src/server/ReactFlightDOMServerNode.js    |  17 +-
 .../react-server/src/ReactFlightServer.js     | 124 +++++--
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 ...actFeatureFlags.test-renderer.native-fb.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 19 files changed, 855 insertions(+), 120 deletions(-)

diff --git a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
index bb65ef4b659a70..1434d17015a54e 100644
--- a/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-esm/src/server/ReactFlightDOMServerNode.js
@@ -20,12 +20,15 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import {Readable} from 'stream';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -187,10 +190,20 @@ function prerenderToNodeStream(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
index ef980764942d7c..56c3d5b71f4322 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerBrowser.js
@@ -12,12 +12,15 @@ import type {Thenable} from 'shared/ReactTypes';
 import type {ClientManifest} from './ReactFlightServerConfigTurbopackBundler';
 import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -146,10 +149,20 @@ function prerender(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
index ef980764942d7c..56c3d5b71f4322 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerEdge.js
@@ -12,12 +12,15 @@ import type {Thenable} from 'shared/ReactTypes';
 import type {ClientManifest} from './ReactFlightServerConfigTurbopackBundler';
 import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -146,10 +149,20 @@ function prerender(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
index e484d4b7e77d50..f9b0c163b21546 100644
--- a/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-turbopack/src/server/ReactFlightDOMServerNode.js
@@ -20,12 +20,15 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import {Readable} from 'stream';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -189,10 +192,20 @@ function prerenderToNodeStream(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index faaf8aef01b0dc..6a0ce0152b704f 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -2722,4 +2722,138 @@ describe('ReactFlightDOM', () => {
     await readInto(container, fizzReadable);
     expect(getMeaningfulChildren(container)).toEqual(<div>hello world</div>);
   });
+
+  // @gate enableHalt
+  it('serializes unfinished tasks with infinite promises when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <Greeting />
+          </Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    const preludeWeb = Readable.toWeb(prelude);
+    const response = ReactServerDOMClient.createFromReadableStream(preludeWeb);
+
+    const {writable: fizzWritable, readable: fizzReadable} = getTestStream();
+
+    function ClientApp() {
+      return use(response);
+    }
+
+    const errors = [];
+    let abortFizz;
+    await serverAct(async () => {
+      const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
+        React.createElement(ClientApp),
+        {
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      );
+      pipe(fizzWritable);
+      abortFizz = abort;
+    });
+
+    await serverAct(() => {
+      abortFizz('boom');
+    });
+
+    expect(errors).toEqual(['boom']);
+
+    const container = document.createElement('div');
+    await readInto(container, fizzReadable);
+    expect(getMeaningfulChildren(container)).toEqual(<div>loading...</div>);
+  });
+
+  // @gate enableHalt
+  it('will leave async iterables in an incomplete state when halting', async () => {
+    let resolve;
+    const wait = new Promise(r => (resolve = r));
+    const errors = [];
+
+    const multiShotIterable = {
+      async *[Symbol.asyncIterator]() {
+        yield {hello: 'A'};
+        await wait;
+        yield {hi: 'B'};
+        return 'C';
+      },
+    };
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(() => {
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          {
+            multiShotIterable,
+          },
+          {},
+          {
+            onError(x) {
+              errors.push(x);
+            },
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    await serverAct(() => resolve());
+
+    const {prelude} = await pendingResult;
+
+    const result = await ReactServerDOMClient.createFromReadableStream(
+      Readable.toWeb(prelude),
+    );
+
+    const iterator = result.multiShotIterable[Symbol.asyncIterator]();
+
+    expect(await iterator.next()).toEqual({
+      value: {hello: 'A'},
+      done: false,
+    });
+
+    const race = Promise.race([
+      iterator.next(),
+      new Promise(r => setTimeout(() => r('timeout'), 10)),
+    ]);
+
+    await 1;
+    jest.advanceTimersByTime('100');
+    expect(await race).toBe('timeout');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index db8edf7ad68318..7bbfea1484bedd 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -29,6 +29,7 @@ let ReactDOM;
 let ReactDOMClient;
 let ReactDOMFizzServer;
 let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
 let ReactServerDOMClient;
 let Suspense;
 let use;
@@ -60,7 +61,13 @@ describe('ReactFlightDOMBrowser', () => {
     serverExports = WebpackMock.serverExports;
     webpackMap = WebpackMock.webpackMap;
     webpackServerMap = WebpackMock.webpackServerMap;
-    ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
+    ReactServerDOMServer = require('react-server-dom-webpack/server');
+    if (__EXPERIMENTAL__) {
+      jest.mock('react-server-dom-webpack/static', () =>
+        require('react-server-dom-webpack/static.browser'),
+      );
+      ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+    }
 
     __unmockReact();
     jest.resetModules();
@@ -2332,4 +2339,110 @@ describe('ReactFlightDOMBrowser', () => {
     expect(error.digest).toBe('aborted');
     expect(errors).toEqual([reason]);
   });
+
+  // @gate experimental
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      passThrough(prelude),
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+    expect(container.innerHTML).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('serializes unfinished tasks with infinite promises when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Suspense fallback="loading...">
+            <Greeting />
+          </Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(
+      passThrough(prelude),
+    );
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    await act(() => {
+      root.render(<ClientRoot response={response} />);
+    });
+
+    expect(container.innerHTML).toBe('<div>loading...</div>');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
index ffef621e9761bc..b38c33dc7761be 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js
@@ -23,9 +23,9 @@ if (typeof File === 'undefined' || typeof FormData === 'undefined') {
 // Patch for Edge environments for global scope
 global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage;
 
-// Don't wait before processing work on the server.
-// TODO: we can replace this with FlightServer.act().
-global.setTimeout = cb => cb();
+const {
+  patchMessageChannel,
+} = require('../../../../scripts/jest/patchMessageChannel');
 
 let serverExports;
 let clientExports;
@@ -36,8 +36,11 @@ let React;
 let ReactServer;
 let ReactDOMServer;
 let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
 let ReactServerDOMClient;
 let use;
+let ReactServerScheduler;
+let reactServerAct;
 
 function normalizeCodeLocInfo(str) {
   return (
@@ -52,6 +55,10 @@ describe('ReactFlightDOMEdge', () => {
   beforeEach(() => {
     jest.resetModules();
 
+    ReactServerScheduler = require('scheduler');
+    patchMessageChannel(ReactServerScheduler);
+    reactServerAct = require('internal-test-utils').act;
+
     // Simulate the condition resolution
     jest.mock('react', () => require('react/react.react-server'));
     jest.mock('react-server-dom-webpack/server', () =>
@@ -68,6 +75,12 @@ describe('ReactFlightDOMEdge', () => {
 
     ReactServer = require('react');
     ReactServerDOMServer = require('react-server-dom-webpack/server');
+    if (__EXPERIMENTAL__) {
+      jest.mock('react-server-dom-webpack/static', () =>
+        require('react-server-dom-webpack/static.edge'),
+      );
+      ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+    }
 
     jest.resetModules();
     __unmockReact();
@@ -81,6 +94,17 @@ describe('ReactFlightDOMEdge', () => {
     use = React.use;
   });
 
+  async function serverAct(callback) {
+    let maybePromise;
+    await reactServerAct(() => {
+      maybePromise = callback();
+      if (maybePromise && typeof maybePromise.catch === 'function') {
+        maybePromise.catch(() => {});
+      }
+    });
+    return maybePromise;
+  }
+
   function passThrough(stream) {
     // Simulate more realistic network by splitting up and rejoining some chunks.
     // This lets us test that we don't accidentally rely on particular bounds of the chunks.
@@ -174,9 +198,8 @@ describe('ReactFlightDOMEdge', () => {
       return <ClientComponentOnTheClient />;
     }
 
-    const stream = ReactServerDOMServer.renderToReadableStream(
-      <App />,
-      webpackMap,
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(<App />, webpackMap),
     );
     const response = ReactServerDOMClient.createFromReadableStream(stream, {
       ssrManifest: {
@@ -189,8 +212,8 @@ describe('ReactFlightDOMEdge', () => {
       return use(response);
     }
 
-    const ssrStream = await ReactDOMServer.renderToReadableStream(
-      <ClientRoot />,
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<ClientRoot />),
     );
     const result = await readResult(ssrStream);
     expect(result).toEqual('<span>Client Component</span>');
@@ -200,10 +223,12 @@ describe('ReactFlightDOMEdge', () => {
     const testString = '"\n\t'.repeat(500) + '🙃';
     const testString2 = 'hello'.repeat(400);
 
-    const stream = ReactServerDOMServer.renderToReadableStream({
-      text: testString,
-      text2: testString2,
-    });
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream({
+        text: testString,
+        text2: testString2,
+      }),
+    );
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
@@ -234,7 +259,9 @@ describe('ReactFlightDOMEdge', () => {
       with: {many: 'properties in it'},
     };
     const props = {root: <div>{new Array(30).fill(obj)}</div>};
-    const stream = ReactServerDOMServer.renderToReadableStream(props);
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(props),
+    );
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
@@ -302,7 +329,9 @@ describe('ReactFlightDOMEdge', () => {
       </>
     );
     const resolvedChildren = new Array(30).fill(str);
-    const stream = ReactServerDOMServer.renderToReadableStream(children);
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(children),
+    );
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
@@ -318,7 +347,9 @@ describe('ReactFlightDOMEdge', () => {
     });
 
     // Use the SSR render to resolve any lazy elements
-    const ssrStream = await ReactDOMServer.renderToReadableStream(model);
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(model),
+    );
     // Should still match the result when parsed
     const result = await readResult(ssrStream);
     expect(result).toEqual(resolvedChildren.join('<!-- -->'));
@@ -370,22 +401,28 @@ describe('ReactFlightDOMEdge', () => {
     const resolvedChildren = new Array(30).fill(
       '<div>this is a long return value</div>',
     );
-    const stream = ReactServerDOMServer.renderToReadableStream(children);
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(children),
+    );
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
     expect(serializedContent.length).toBeLessThan(__DEV__ ? 605 : 400);
     expect(timesRendered).toBeLessThan(5);
 
-    const model = await ReactServerDOMClient.createFromReadableStream(stream2, {
-      ssrManifest: {
-        moduleMap: null,
-        moduleLoading: null,
-      },
-    });
+    const model = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream2, {
+        ssrManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
 
     // Use the SSR render to resolve any lazy elements
-    const ssrStream = await ReactDOMServer.renderToReadableStream(model);
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(model),
+    );
     // Should still match the result when parsed
     const result = await readResult(ssrStream);
     expect(result).toEqual(resolvedChildren.join(''));
@@ -398,8 +435,10 @@ describe('ReactFlightDOMEdge', () => {
       }
       return <div>Fin</div>;
     }
-    const stream = ReactServerDOMServer.renderToReadableStream(
-      <ServerComponent recurse={20} />,
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        <ServerComponent recurse={20} />,
+      ),
     );
     const serializedContent = await readResult(stream);
     const expectedDebugInfoSize = __DEV__ ? 300 * 20 : 0;
@@ -426,8 +465,8 @@ describe('ReactFlightDOMEdge', () => {
       new BigUint64Array(buffer, 0),
       new DataView(buffer, 3),
     ];
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(buffers),
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(buffers)),
     );
     const result = await ReactServerDOMClient.createFromReadableStream(stream, {
       ssrManifest: {
@@ -446,8 +485,8 @@ describe('ReactFlightDOMEdge', () => {
     const blob = new Blob([bytes, bytes], {
       type: 'application/x-test',
     });
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(blob),
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(blob)),
     );
     const result = await ReactServerDOMClient.createFromReadableStream(stream, {
       ssrManifest: {
@@ -476,8 +515,8 @@ describe('ReactFlightDOMEdge', () => {
     expect(formData.get('file') instanceof File).toBe(true);
     expect(formData.get('file').name).toBe('filename.test');
 
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(formData),
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(formData)),
     );
     const result = await ReactServerDOMClient.createFromReadableStream(stream, {
       ssrManifest: {
@@ -507,8 +546,8 @@ describe('ReactFlightDOMEdge', () => {
     const map = new Map();
     map.set('value', awaitedValue);
 
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(map, webpackMap),
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(map, webpackMap)),
     );
 
     // Parsing the root blocks because the module hasn't loaded yet
@@ -549,16 +588,18 @@ describe('ReactFlightDOMEdge', () => {
       },
     });
 
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(s, webpackMap),
+    const stream = await serverAct(() =>
+      passThrough(ReactServerDOMServer.renderToReadableStream(s, webpackMap)),
     );
 
-    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
-      ssrManifest: {
-        moduleMap: null,
-        moduleLoading: null,
-      },
-    });
+    const result = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        ssrManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
 
     const reader = result.getReader();
 
@@ -589,20 +630,24 @@ describe('ReactFlightDOMEdge', () => {
       },
     };
 
-    const stream = passThrough(
-      ReactServerDOMServer.renderToReadableStream(
-        multiShotIterable,
-        webpackMap,
+    const stream = await serverAct(() =>
+      passThrough(
+        ReactServerDOMServer.renderToReadableStream(
+          multiShotIterable,
+          webpackMap,
+        ),
       ),
     );
 
     // Parsing the root blocks because the module hasn't loaded yet
-    const result = await ReactServerDOMClient.createFromReadableStream(stream, {
-      ssrManifest: {
-        moduleMap: null,
-        moduleLoading: null,
-      },
-    });
+    const result = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
+        ssrManifest: {
+          moduleMap: null,
+          moduleLoading: null,
+        },
+      }),
+    );
 
     const iterator = result[Symbol.asyncIterator]();
 
@@ -635,9 +680,11 @@ describe('ReactFlightDOMEdge', () => {
       },
     };
 
-    const stream = ReactServerDOMServer.renderToReadableStream({
-      iterable,
-    });
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream({
+        iterable,
+      }),
+    );
     const [stream1, stream2] = passThrough(stream).tee();
 
     const serializedContent = await readResult(stream1);
@@ -728,7 +775,9 @@ describe('ReactFlightDOMEdge', () => {
       },
     });
 
-    const stream = ReactServerDOMServer.renderToReadableStream(s, {});
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(s, {}),
+    );
 
     const [stream1, stream2] = passThrough(stream).tee();
 
@@ -785,7 +834,9 @@ describe('ReactFlightDOMEdge', () => {
       },
     });
 
-    const stream = ReactServerDOMServer.renderToReadableStream(s, {});
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(s, {}),
+    );
 
     const [stream1, stream2] = passThrough(stream).tee();
 
@@ -841,23 +892,21 @@ describe('ReactFlightDOMEdge', () => {
       greeting: ReactServer.createElement(Greeting, {firstName: 'Seb'}),
     };
 
-    const stream = ReactServerDOMServer.renderToReadableStream(
-      model,
-      webpackMap,
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap),
     );
 
-    const rootModel = await ReactServerDOMClient.createFromReadableStream(
-      stream,
-      {
+    const rootModel = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
         ssrManifest: {
           moduleMap: null,
           moduleLoading: null,
         },
-      },
+      }),
     );
 
-    const ssrStream = await ReactDOMServer.renderToReadableStream(
-      rootModel.greeting,
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(rootModel.greeting),
     );
     const result = await readResult(ssrStream);
     expect(result).toEqual('<span>Hello, Seb</span>');
@@ -916,13 +965,15 @@ describe('ReactFlightDOMEdge', () => {
       return ReactServer.createElement('span', null, 'hi');
     }
 
-    const stream = ReactServerDOMServer.renderToReadableStream(
-      ReactServer.createElement(
-        'div',
-        null,
-        ReactServer.createElement(Foo, null),
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(
+        ReactServer.createElement(
+          'div',
+          null,
+          ReactServer.createElement(Foo, null),
+        ),
+        webpackMap,
       ),
-      webpackMap,
     );
     await readResult(stream);
 
@@ -943,35 +994,31 @@ describe('ReactFlightDOMEdge', () => {
       root: ReactServer.createElement(Erroring),
     };
 
-    const stream = ReactServerDOMServer.renderToReadableStream(
-      model,
-      webpackMap,
-      {
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToReadableStream(model, webpackMap, {
         onError() {},
-      },
+      }),
     );
 
-    const rootModel = await ReactServerDOMClient.createFromReadableStream(
-      stream,
-      {
+    const rootModel = await serverAct(() =>
+      ReactServerDOMClient.createFromReadableStream(stream, {
         ssrManifest: {
           moduleMap: null,
           moduleLoading: null,
         },
-      },
+      }),
     );
 
     const errors = [];
-    const result = ReactDOMServer.renderToReadableStream(
-      <div>{rootModel.root}</div>,
-      {
+    const result = serverAct(() =>
+      ReactDOMServer.renderToReadableStream(<div>{rootModel.root}</div>, {
         onError(error, {componentStack}) {
           errors.push({
             error,
             componentStack: normalizeCodeLocInfo(componentStack),
           });
         },
-      },
+      }),
     );
 
     const theError = new Error('my error');
@@ -1000,4 +1047,130 @@ describe('ReactFlightDOMEdge', () => {
       },
     ]);
   });
+
+  // @gate experimental
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      ssrManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        React.createElement(ClientRoot, {response}),
+      ),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('serializes unfinished tasks with infinite promises when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <ReactServer.Suspense fallback="loading...">
+            <Greeting />
+          </ReactServer.Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerender(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromReadableStream(prelude, {
+      ssrManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const fizzController = new AbortController();
+    const errors = [];
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToReadableStream(
+        React.createElement(ClientRoot, {response}),
+        {
+          signal: fizzController.signal,
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      ),
+    );
+    fizzController.abort('boom');
+    expect(errors).toEqual(['boom']);
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    const div = document.createElement('div');
+    div.innerHTML = result;
+    expect(div.textContent).toBe('loading...');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
index 2de34cc1c493fe..fbe32d2f1f6972 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js
@@ -20,7 +20,9 @@ let webpackModules;
 let webpackModuleLoading;
 let React;
 let ReactDOMServer;
+let ReactServer;
 let ReactServerDOMServer;
+let ReactServerDOMStaticServer;
 let ReactServerDOMClient;
 let Stream;
 let use;
@@ -45,7 +47,14 @@ describe('ReactFlightDOMNode', () => {
     jest.mock('react-server-dom-webpack/server', () =>
       require('react-server-dom-webpack/server.node'),
     );
+    ReactServer = require('react');
     ReactServerDOMServer = require('react-server-dom-webpack/server');
+    if (__EXPERIMENTAL__) {
+      jest.mock('react-server-dom-webpack/static', () =>
+        require('react-server-dom-webpack/static.node'),
+      );
+      ReactServerDOMStaticServer = require('react-server-dom-webpack/static');
+    }
 
     const WebpackMock = require('./utils/WebpackMock');
     clientExports = WebpackMock.clientExports;
@@ -378,4 +387,128 @@ describe('ReactFlightDOMNode', () => {
     expect(error.digest).toBe('aborted');
     expect(errors).toEqual([reason]);
   });
+
+  // @gate experimental
+  it('can prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <Greeting />
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+        ),
+      };
+    });
+
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromNodeStream(prelude, {
+      ssrManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    // Use the SSR render to resolve any lazy elements
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        React.createElement(ClientRoot, {response}),
+      ),
+    );
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    expect(result).toBe('<div>hello world</div>');
+  });
+
+  // @gate enableHalt
+  it('serializes unfinished tasks with infinite promises when aborting a prerender', async () => {
+    let resolveGreeting;
+    const greetingPromise = new Promise(resolve => {
+      resolveGreeting = resolve;
+    });
+
+    function App() {
+      return (
+        <div>
+          <ReactServer.Suspense fallback="loading...">
+            <Greeting />
+          </ReactServer.Suspense>
+        </div>
+      );
+    }
+
+    async function Greeting() {
+      await greetingPromise;
+      return 'hello world';
+    }
+
+    const controller = new AbortController();
+    const {pendingResult} = await serverAct(async () => {
+      // destructure trick to avoid the act scope from awaiting the returned value
+      return {
+        pendingResult: ReactServerDOMStaticServer.prerenderToNodeStream(
+          <App />,
+          webpackMap,
+          {
+            signal: controller.signal,
+          },
+        ),
+      };
+    });
+
+    controller.abort();
+    resolveGreeting();
+    const {prelude} = await pendingResult;
+
+    function ClientRoot({response}) {
+      return use(response);
+    }
+
+    const response = ReactServerDOMClient.createFromNodeStream(prelude, {
+      ssrManifest: {
+        moduleMap: null,
+        moduleLoading: null,
+      },
+    });
+    const errors = [];
+    const ssrStream = await serverAct(() =>
+      ReactDOMServer.renderToPipeableStream(
+        React.createElement(ClientRoot, {response}),
+        {
+          onError(error) {
+            errors.push(error);
+          },
+        },
+      ),
+    );
+    ssrStream.abort('boom');
+    expect(errors).toEqual(['boom']);
+    // Should still match the result when parsed
+    const result = await readResult(ssrStream);
+    const div = document.createElement('div');
+    div.innerHTML = result;
+    expect(div.textContent).toBe('loading...');
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
index a4e0c3bef693b8..95e7f770428a34 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerBrowser.js
@@ -12,12 +12,15 @@ import type {Thenable} from 'shared/ReactTypes';
 import type {ClientManifest} from './ReactFlightServerConfigWebpackBundler';
 import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -146,10 +149,20 @@ function prerender(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
index a4e0c3bef693b8..95e7f770428a34 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerEdge.js
@@ -12,12 +12,15 @@ import type {Thenable} from 'shared/ReactTypes';
 import type {ClientManifest} from './ReactFlightServerConfigWebpackBundler';
 import type {ServerManifest} from 'react-client/src/ReactFlightClientConfig';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -146,10 +149,20 @@ function prerender(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
index 15062594767039..1d8d6ea9ef7436 100644
--- a/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/server/ReactFlightDOMServerNode.js
@@ -20,12 +20,15 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import {Readable} from 'stream';
 
+import {enableHalt} from 'shared/ReactFeatureFlags';
+
 import {
   createRequest,
   startWork,
   startFlowing,
   stopFlowing,
   abort,
+  halt,
 } from 'react-server/src/ReactFlightServer';
 
 import {
@@ -189,10 +192,20 @@ function prerenderToNodeStream(
     if (options && options.signal) {
       const signal = options.signal;
       if (signal.aborted) {
-        abort(request, (signal: any).reason);
+        const reason = (signal: any).reason;
+        if (enableHalt) {
+          halt(request, reason);
+        } else {
+          abort(request, reason);
+        }
       } else {
         const listener = () => {
-          abort(request, (signal: any).reason);
+          const reason = (signal: any).reason;
+          if (enableHalt) {
+            halt(request, reason);
+          } else {
+            abort(request, reason);
+          }
           signal.removeEventListener('abort', listener);
         };
         signal.addEventListener('abort', listener);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index d8ba106d37e728..db0ee7b3cebadc 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -16,6 +16,7 @@ import type {TemporaryReferenceSet} from './ReactFlightServerTemporaryReferences
 import {
   enableBinaryFlight,
   enablePostpone,
+  enableHalt,
   enableTaint,
   enableRefAsProp,
   enableServerComponentLogs,
@@ -611,11 +612,15 @@ function serializeThenable(
     default: {
       if (request.status === ABORTING) {
         // We can no longer accept any resolved values
-        newTask.status = ABORTED;
-        const errorId: number = (request.fatalError: any);
-        const model = stringify(serializeByValueID(errorId));
-        emitModelChunk(request, newTask.id, model);
         request.abortableTasks.delete(newTask);
+        newTask.status = ABORTED;
+        if (enableHalt && request.fatalError === haltSymbol) {
+          emitModelChunk(request, newTask.id, reusableInfinitePromiseModel);
+        } else {
+          const errorId: number = (request.fatalError: any);
+          const model = stringify(serializeByValueID(errorId));
+          emitModelChunk(request, newTask.id, model);
+        }
         return newTask.id;
       }
       if (typeof thenable.status === 'string') {
@@ -748,23 +753,32 @@ function serializeReadableStream(
     }
     aborted = true;
     request.abortListeners.delete(error);
-    if (
+
+    let cancelWith: mixed;
+    if (enableHalt && request.fatalError === haltSymbol) {
+      cancelWith = reason;
+    } else if (
       enablePostpone &&
       typeof reason === 'object' &&
       reason !== null &&
       (reason: any).$$typeof === REACT_POSTPONE_TYPE
     ) {
+      cancelWith = reason;
       const postponeInstance: Postpone = (reason: any);
       logPostpone(request, postponeInstance.message, streamTask);
       emitPostponeChunk(request, streamTask.id, postponeInstance);
+      enqueueFlush(request);
     } else {
+      cancelWith = reason;
       const digest = logRecoverableError(request, reason, streamTask);
       emitErrorChunk(request, streamTask.id, digest, reason);
+      enqueueFlush(request);
     }
-    enqueueFlush(request);
+
     // $FlowFixMe should be able to pass mixed
-    reader.cancel(reason).then(error, error);
+    reader.cancel(cancelWith).then(error, error);
   }
+
   request.abortListeners.add(error);
   reader.read().then(progress, error);
   return serializeByValueID(streamTask.id);
@@ -866,24 +880,30 @@ function serializeAsyncIterable(
     }
     aborted = true;
     request.abortListeners.delete(error);
-    if (
+    let throwWith: mixed;
+    if (enableHalt && request.fatalError === haltSymbol) {
+      throwWith = reason;
+    } else if (
       enablePostpone &&
       typeof reason === 'object' &&
       reason !== null &&
       (reason: any).$$typeof === REACT_POSTPONE_TYPE
     ) {
+      throwWith = reason;
       const postponeInstance: Postpone = (reason: any);
       logPostpone(request, postponeInstance.message, streamTask);
       emitPostponeChunk(request, streamTask.id, postponeInstance);
+      enqueueFlush(request);
     } else {
+      throwWith = reason;
       const digest = logRecoverableError(request, reason, streamTask);
       emitErrorChunk(request, streamTask.id, digest, reason);
+      enqueueFlush(request);
     }
-    enqueueFlush(request);
     if (typeof (iterator: any).throw === 'function') {
       // The iterator protocol doesn't necessarily include this but a generator do.
       // $FlowFixMe should be able to pass mixed
-      iterator.throw(reason).then(error, error);
+      iterator.throw(throwWith).then(error, error);
     }
   }
   request.abortListeners.add(error);
@@ -1798,6 +1818,7 @@ function serializeLazyID(id: number): string {
 function serializeInfinitePromise(): string {
   return '$@';
 }
+const reusableInfinitePromiseModel = stringify(serializeInfinitePromise());
 
 function serializePromiseID(id: number): string {
   return '$@' + id.toString(16);
@@ -2066,12 +2087,18 @@ function serializeBlob(request: Request, blob: Blob): string {
     }
     aborted = true;
     request.abortListeners.delete(error);
-    const digest = logRecoverableError(request, reason, newTask);
-    emitErrorChunk(request, newTask.id, digest, reason);
-    request.abortableTasks.delete(newTask);
-    enqueueFlush(request);
+    let cancelWith: mixed;
+    if (enableHalt && request.fatalError === haltSymbol) {
+      cancelWith = reason;
+    } else {
+      cancelWith = reason;
+      const digest = logRecoverableError(request, reason, newTask);
+      emitErrorChunk(request, newTask.id, digest, reason);
+      request.abortableTasks.delete(newTask);
+      enqueueFlush(request);
+    }
     // $FlowFixMe should be able to pass mixed
-    reader.cancel(reason).then(error, error);
+    reader.cancel(cancelWith).then(error, error);
   }
 
   request.abortListeners.add(error);
@@ -2149,6 +2176,9 @@ function renderModel(
       if (typeof x.then === 'function') {
         if (request.status === ABORTING) {
           task.status = ABORTED;
+          if (enableHalt && request.fatalError === haltSymbol) {
+            return serializeInfinitePromise();
+          }
           const errorId: number = (request.fatalError: any);
           if (wasReactNode) {
             return serializeLazyID(errorId);
@@ -2202,6 +2232,9 @@ function renderModel(
 
     if (request.status === ABORTING) {
       task.status = ABORTED;
+      if (enableHalt && request.fatalError === haltSymbol) {
+        return serializeInfinitePromise();
+      }
       const errorId: number = (request.fatalError: any);
       if (wasReactNode) {
         return serializeLazyID(errorId);
@@ -3691,9 +3724,13 @@ function retryTask(request: Request, task: Task): void {
         if (request.status === ABORTING) {
           request.abortableTasks.delete(task);
           task.status = ABORTED;
-          const errorId: number = (request.fatalError: any);
-          const model = stringify(serializeByValueID(errorId));
-          emitModelChunk(request, task.id, model);
+          if (enableHalt && request.fatalError === haltSymbol) {
+            emitModelChunk(request, task.id, reusableInfinitePromiseModel);
+          } else {
+            const errorId: number = (request.fatalError: any);
+            const model = stringify(serializeByValueID(errorId));
+            emitModelChunk(request, task.id, model);
+          }
           return;
         }
         // Something suspended again, let's pick it back up later.
@@ -3715,9 +3752,13 @@ function retryTask(request: Request, task: Task): void {
     if (request.status === ABORTING) {
       request.abortableTasks.delete(task);
       task.status = ABORTED;
-      const errorId: number = (request.fatalError: any);
-      const model = stringify(serializeByValueID(errorId));
-      emitModelChunk(request, task.id, model);
+      if (enableHalt && request.fatalError === haltSymbol) {
+        emitModelChunk(request, task.id, reusableInfinitePromiseModel);
+      } else {
+        const errorId: number = (request.fatalError: any);
+        const model = stringify(serializeByValueID(errorId));
+        emitModelChunk(request, task.id, model);
+      }
       return;
     }
 
@@ -3795,6 +3836,15 @@ function abortTask(task: Task, request: Request, errorId: number): void {
   request.completedErrorChunks.push(processedChunk);
 }
 
+function haltTask(task: Task, request: Request): void {
+  if (task.status === RENDERING) {
+    // This task will be aborted by the render
+    return;
+  }
+  task.status = ABORTED;
+  emitModelChunk(request, task.id, reusableInfinitePromiseModel);
+}
+
 function flushCompletedChunks(
   request: Request,
   destination: Destination,
@@ -4012,3 +4062,35 @@ export function abort(request: Request, reason: mixed): void {
     fatalError(request, error);
   }
 }
+
+const haltSymbol = Symbol('halt');
+
+// This is called to stop rendering without erroring. All unfinished work is represented Promises
+// that never resolve.
+export function halt(request: Request, reason: mixed): void {
+  try {
+    if (request.status === OPEN) {
+      request.status = ABORTING;
+    }
+    request.fatalError = haltSymbol;
+    const abortableTasks = request.abortableTasks;
+    // We have tasks to abort. We'll emit one error row and then emit a reference
+    // to that row from every row that's still remaining.
+    if (abortableTasks.size > 0) {
+      request.pendingChunks++;
+      abortableTasks.forEach(task => haltTask(task, request));
+      abortableTasks.clear();
+    }
+    const abortListeners = request.abortListeners;
+    if (abortListeners.size > 0) {
+      abortListeners.forEach(callback => callback(reason));
+      abortListeners.clear();
+    }
+    if (request.destination !== null) {
+      flushCompletedChunks(request, request.destination);
+    }
+  } catch (error) {
+    logRecoverableError(request, error, null);
+    fatalError(request, error);
+  }
+}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index b0286405a6cca9..c5351d6d926313 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -87,6 +87,8 @@ export const enableTaint = __EXPERIMENTAL__;
 
 export const enablePostpone = __EXPERIMENTAL__;
 
+export const enableHalt = __EXPERIMENTAL__;
+
 /**
  * Switches the Fabric API from doing layout in commit work instead of complete work.
  */
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 4eda27d16cfcb6..3618aa70e7d67f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,6 +58,7 @@ export const enableFilterEmptyStringAttributesDOM = true;
 export const enableFizzExternalRuntime = true;
 export const enableFlightReadableStream = true;
 export const enableGetInspectorDataForInstanceInProduction = true;
+export const enableHalt = false;
 export const enableInfiniteRenderLoopDetection = true;
 export const enableContextProfiling = false;
 export const enableLegacyCache = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 2a4421f41da0a3..2aae8bd3d1c653 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,6 +49,7 @@ export const enableFilterEmptyStringAttributesDOM = true;
 export const enableFizzExternalRuntime = true;
 export const enableFlightReadableStream = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
+export const enableHalt = false;
 export const enableInfiniteRenderLoopDetection = true;
 export const enableLazyContextPropagation = false;
 export const enableContextProfiling = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 8778bf6558cb44..c44e7014fc444c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -25,6 +25,7 @@ export const enableFlightReadableStream = true;
 export const enableAsyncIterableChildren = false;
 export const enableTaint = true;
 export const enablePostpone = false;
+export const enableHalt = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const disableIEWorkarounds = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
index 3a8a0c1d44ceca..bc7ddf85acc035 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
@@ -40,6 +40,7 @@ export const enableFilterEmptyStringAttributesDOM = true;
 export const enableFizzExternalRuntime = true;
 export const enableFlightReadableStream = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
+export const enableHalt = false;
 export const enableInfiniteRenderLoopDetection = true;
 export const enableLazyContextPropagation = false;
 export const enableContextProfiling = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index eb801d7bac4b6b..57f60c24aef45a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -25,6 +25,7 @@ export const enableFlightReadableStream = true;
 export const enableAsyncIterableChildren = false;
 export const enableTaint = true;
 export const enablePostpone = false;
+export const enableHalt = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const disableIEWorkarounds = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 95cd1e5a6ebe6e..465fa58590bcc3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -78,6 +78,8 @@ export const enableTaint = false;
 
 export const enablePostpone = false;
 
+export const enableHalt = false;
+
 export const enableContextProfiling = true;
 
 // TODO: www currently relies on this feature. It's disabled in open source.

From e9a869fbb59a634fb9a39c9480ffa34970f35858 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:39:50 -0400
Subject: [PATCH 35/40] [compiler] Run compiler pipeline on 'use no forget'

This PR updates the babel plugin to continue the compilation pipeline as
normal on components/hooks that have been opted out using a directive.
Instead, we no longer emit the compiled function when the directive is
present.

Previously, we would skip over the entire pipeline. By continuing to
enter the pipeline, we'll be able to detect if there are unused
directives.

The end result is:

- (no change) 'use forget' will always opt into compilation
- (new) 'use no forget' will opt out of compilation but continue to log
  errors without throwing them. This means that a Program containing
multiple functions (some of which are opted out) will continue to
compile correctly

ghstack-source-id: 5bd85df2f81350cb2c1998a8761b8ed3fec32a40
Pull Request resolved: https://github.com/facebook/react/pull/30720
---
 .../src/Entrypoint/Options.ts                 |   6 +
 .../src/Entrypoint/Program.ts                 | 146 ++++++++++--------
 .../use-no-forget-with-no-errors.expect.md    |  35 +++++
 .../compiler/use-no-forget-with-no-errors.js  |  10 ++
 .../babel-plugin-react-compiler/src/index.ts  |   1 +
 5 files changed, 136 insertions(+), 62 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
index 722c62461d813d..e97ececc2a137d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
@@ -165,6 +165,12 @@ export type LoggerEvent =
       fnLoc: t.SourceLocation | null;
       detail: Omit<Omit<CompilerErrorDetailOptions, 'severity'>, 'suggestions'>;
     }
+  | {
+      kind: 'CompileSkip';
+      fnLoc: t.SourceLocation | null;
+      reason: string;
+      loc: t.SourceLocation | null;
+    }
   | {
       kind: 'CompileSuccess';
       fnLoc: t.SourceLocation | null;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
index 499a4d124ea67c..99ec1e04a65e4e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
@@ -43,34 +43,23 @@ export type CompilerPass = {
   comments: Array<t.CommentBlock | t.CommentLine>;
   code: string | null;
 };
+const OPT_IN_DIRECTIVES = new Set(['use forget', 'use memo']);
+export const OPT_OUT_DIRECTIVES = new Set(['use no forget', 'use no memo']);
 
 function findDirectiveEnablingMemoization(
   directives: Array<t.Directive>,
-): t.Directive | null {
-  for (const directive of directives) {
-    const directiveValue = directive.value.value;
-    if (directiveValue === 'use forget' || directiveValue === 'use memo') {
-      return directive;
-    }
-  }
-  return null;
+): Array<t.Directive> {
+  return directives.filter(directive =>
+    OPT_IN_DIRECTIVES.has(directive.value.value),
+  );
 }
 
 function findDirectiveDisablingMemoization(
   directives: Array<t.Directive>,
-  options: PluginOptions,
-): t.Directive | null {
-  for (const directive of directives) {
-    const directiveValue = directive.value.value;
-    if (
-      (directiveValue === 'use no forget' ||
-        directiveValue === 'use no memo') &&
-      !options.ignoreUseNoForget
-    ) {
-      return directive;
-    }
-  }
-  return null;
+): Array<t.Directive> {
+  return directives.filter(directive =>
+    OPT_OUT_DIRECTIVES.has(directive.value.value),
+  );
 }
 
 function isCriticalError(err: unknown): boolean {
@@ -102,7 +91,7 @@ export type CompileResult = {
   compiledFn: CodegenFunction;
 };
 
-function handleError(
+function logError(
   err: unknown,
   pass: CompilerPass,
   fnLoc: t.SourceLocation | null,
@@ -131,6 +120,13 @@ function handleError(
       });
     }
   }
+}
+function handleError(
+  err: unknown,
+  pass: CompilerPass,
+  fnLoc: t.SourceLocation | null,
+): void {
+  logError(err, pass, fnLoc);
   if (
     pass.opts.panicThreshold === 'all_errors' ||
     (pass.opts.panicThreshold === 'critical_errors' && isCriticalError(err)) ||
@@ -393,6 +389,17 @@ export function compileProgram(
     fn: BabelFn,
     fnType: ReactFunctionType,
   ): null | CodegenFunction => {
+    let optInDirectives: Array<t.Directive> = [];
+    let optOutDirectives: Array<t.Directive> = [];
+    if (fn.node.body.type === 'BlockStatement') {
+      optInDirectives = findDirectiveEnablingMemoization(
+        fn.node.body.directives,
+      );
+      optOutDirectives = findDirectiveDisablingMemoization(
+        fn.node.body.directives,
+      );
+    }
+
     if (lintError != null) {
       /**
        * Note that Babel does not attach comment nodes to nodes; they are dangling off of the
@@ -404,7 +411,11 @@ export function compileProgram(
         fn,
       );
       if (suppressionsInFunction.length > 0) {
-        handleError(lintError, pass, fn.node.loc ?? null);
+        if (optOutDirectives.length > 0) {
+          logError(lintError, pass, fn.node.loc ?? null);
+        } else {
+          handleError(lintError, pass, fn.node.loc ?? null);
+        }
       }
     }
 
@@ -430,11 +441,50 @@ export function compileProgram(
         prunedMemoValues: compiledFn.prunedMemoValues,
       });
     } catch (err) {
+      /**
+       * If an opt out directive is present, log only instead of throwing and don't mark as
+       * containing a critical error.
+       */
+      if (fn.node.body.type === 'BlockStatement') {
+        if (optOutDirectives.length > 0) {
+          logError(err, pass, fn.node.loc ?? null);
+          return null;
+        }
+      }
       hasCriticalError ||= isCriticalError(err);
       handleError(err, pass, fn.node.loc ?? null);
       return null;
     }
 
+    /**
+     * Always compile functions with opt in directives.
+     */
+    if (optInDirectives.length > 0) {
+      return compiledFn;
+    } else if (pass.opts.compilationMode === 'annotation') {
+      /**
+       * No opt-in directive in annotation mode, so don't insert the compiled function.
+       */
+      return null;
+    }
+
+    /**
+     * Otherwise if 'use no forget/memo' is present, we still run the code through the compiler
+     * for validation but we don't mutate the babel AST. This allows us to flag if there is an
+     * unused 'use no forget/memo' directive.
+     */
+    if (pass.opts.ignoreUseNoForget === false && optOutDirectives.length > 0) {
+      for (const directive of optOutDirectives) {
+        pass.opts.logger?.logEvent(pass.filename, {
+          kind: 'CompileSkip',
+          fnLoc: fn.node.body.loc ?? null,
+          reason: `Skipped due to '${directive.value.value}' directive.`,
+          loc: directive.loc ?? null,
+        });
+      }
+      return null;
+    }
+
     if (!pass.opts.noEmit && !hasCriticalError) {
       return compiledFn;
     }
@@ -481,6 +531,16 @@ export function compileProgram(
     });
   }
 
+  /**
+   * Do not modify source if there is a module scope level opt out directive.
+   */
+  const moduleScopeOptOutDirectives = findDirectiveDisablingMemoization(
+    program.node.directives,
+  );
+  if (moduleScopeOptOutDirectives.length > 0) {
+    return;
+  }
+
   if (pass.opts.gating != null) {
     const error = checkFunctionReferencedBeforeDeclarationAtTopLevel(
       program,
@@ -596,24 +656,6 @@ function shouldSkipCompilation(
     }
   }
 
-  // Top level "use no forget", skip this file entirely
-  const useNoForget = findDirectiveDisablingMemoization(
-    program.node.directives,
-    pass.opts,
-  );
-  if (useNoForget != null) {
-    pass.opts.logger?.logEvent(pass.filename, {
-      kind: 'CompileError',
-      fnLoc: null,
-      detail: {
-        severity: ErrorSeverity.Todo,
-        reason: 'Skipped due to "use no forget" directive.',
-        loc: useNoForget.loc ?? null,
-        suggestions: null,
-      },
-    });
-    return true;
-  }
   const moduleName = pass.opts.runtimeModule ?? 'react/compiler-runtime';
   if (hasMemoCacheFunctionImport(program, moduleName)) {
     return true;
@@ -631,28 +673,8 @@ function getReactFunctionType(
 ): ReactFunctionType | null {
   const hookPattern = environment.hookPattern;
   if (fn.node.body.type === 'BlockStatement') {
-    // Opt-outs disable compilation regardless of mode
-    const useNoForget = findDirectiveDisablingMemoization(
-      fn.node.body.directives,
-      pass.opts,
-    );
-    if (useNoForget != null) {
-      pass.opts.logger?.logEvent(pass.filename, {
-        kind: 'CompileError',
-        fnLoc: fn.node.body.loc ?? null,
-        detail: {
-          severity: ErrorSeverity.Todo,
-          reason: 'Skipped due to "use no forget" directive.',
-          loc: useNoForget.loc ?? null,
-          suggestions: null,
-        },
-      });
-      return null;
-    }
-    // Otherwise opt-ins enable compilation regardless of mode
-    if (findDirectiveEnablingMemoization(fn.node.body.directives) != null) {
+    if (findDirectiveEnablingMemoization(fn.node.body.directives).length > 0)
       return getComponentOrHookLike(fn, hookPattern) ?? 'Other';
-    }
   }
 
   // Component and hook declarations are known components/hooks
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md
new file mode 100644
index 00000000000000..20acbe01531351
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.expect.md
@@ -0,0 +1,35 @@
+
+## Input
+
+```javascript
+function Component() {
+  'use no forget';
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  "use no forget";
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Hello World</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js
new file mode 100644
index 00000000000000..934487160d55c6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-with-no-errors.js
@@ -0,0 +1,10 @@
+function Component() {
+  'use no forget';
+  return <div>Hello World</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+  isComponent: true,
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/index.ts b/compiler/packages/babel-plugin-react-compiler/src/index.ts
index f038246a4f1ee4..aac65331a0ff21 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/index.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/index.ts
@@ -18,6 +18,7 @@ export {
   compileProgram,
   parsePluginOptions,
   run,
+  OPT_OUT_DIRECTIVES,
   type CompilerPipelineValue,
   type PluginOptions,
 } from './Entrypoint';

From 34edf3b68471e87d4a92f98a10f7c6c727c948f8 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:39:51 -0400
Subject: [PATCH 36/40] [compiler] Surface unused opt out directives in eslint

This PR updates the eslint plugin to report unused opt out directives.
One of the downsides of the opt out directive is that it opts the
component/hook out of compilation forever, even if the underlying issue
was fixed in product code or fixed in the compiler.

ghstack-source-id: 81deb5c11b7c57f07f6ab13266066cd73b2f3729
Pull Request resolved: https://github.com/facebook/react/pull/30721
---
 .../__tests__/ReactCompilerRule-test.ts       | 59 +++++++++++++++++++
 .../src/rules/ReactCompilerRule.ts            | 51 +++++++++++++++-
 2 files changed, 109 insertions(+), 1 deletion(-)

diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
index c1aba9f4c84055..71be6b6622eb52 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts
@@ -215,6 +215,65 @@ const tests: CompilerTestCases = {
         },
       ],
     },
+    {
+      name: "'use no forget' does not disable eslint rule",
+      code: normalizeIndent`
+        let count = 0;
+        function Component() {
+          'use no forget';
+          count = count + 1;
+          return <div>Hello world {count}</div>
+        }
+      `,
+      errors: [
+        {
+          message:
+            'Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
+        },
+      ],
+    },
+    {
+      name: "Unused 'use no forget' directive is reported when no errors are present on components",
+      code: normalizeIndent`
+        function Component() {
+          'use no forget';
+          return <div>Hello world</div>
+        }
+      `,
+      errors: [
+        {
+          message: "Unused 'use no forget' directive",
+          suggestions: [
+            {
+              output:
+                // yuck
+                '\nfunction Component() {\n  \n  return <div>Hello world</div>\n}\n',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "Unused 'use no forget' directive is reported when no errors are present on non-components or hooks",
+      code: normalizeIndent`
+        function notacomponent() {
+          'use no forget';
+          return 1 + 1;
+        }
+      `,
+      errors: [
+        {
+          message: "Unused 'use no forget' directive",
+          suggestions: [
+            {
+              output:
+                // yuck
+                '\nfunction notacomponent() {\n  \n  return 1 + 1;\n}\n',
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 
diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
index 7b6525842c4d24..0a0956ebe1db0b 100644
--- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts
@@ -15,10 +15,12 @@ import BabelPluginReactCompiler, {
   ErrorSeverity,
   parsePluginOptions,
   validateEnvironmentConfig,
+  OPT_OUT_DIRECTIVES,
   type PluginOptions,
 } from 'babel-plugin-react-compiler/src';
 import {Logger} from 'babel-plugin-react-compiler/src/Entrypoint';
 import type {Rule} from 'eslint';
+import {Statement} from 'estree';
 import * as HermesParser from 'hermes-parser';
 
 type CompilerErrorDetailWithLoc = Omit<CompilerErrorDetailOptions, 'loc'> & {
@@ -146,6 +148,7 @@ const rule: Rule.RuleModule = {
         userOpts['__unstable_donotuse_reportAllBailouts'];
     }
 
+    let shouldReportUnusedOptOutDirective = true;
     const options: PluginOptions = {
       ...parsePluginOptions(userOpts),
       ...COMPILER_OPTIONS,
@@ -155,6 +158,7 @@ const rule: Rule.RuleModule = {
       logEvent: (filename, event): void => {
         userLogger?.logEvent(filename, event);
         if (event.kind === 'CompileError') {
+          shouldReportUnusedOptOutDirective = false;
           const detail = event.detail;
           const suggest = makeSuggestions(detail);
           if (__unstable_donotuse_reportAllBailouts && event.fnLoc != null) {
@@ -272,7 +276,52 @@ const rule: Rule.RuleModule = {
         /* errors handled by injected logger */
       }
     }
-    return {};
+
+    function reportUnusedOptOutDirective(stmt: Statement) {
+      if (
+        stmt.type === 'ExpressionStatement' &&
+        stmt.expression.type === 'Literal' &&
+        typeof stmt.expression.value === 'string' &&
+        OPT_OUT_DIRECTIVES.has(stmt.expression.value) &&
+        stmt.loc != null
+      ) {
+        context.report({
+          message: `Unused '${stmt.expression.value}' directive`,
+          loc: stmt.loc,
+          suggest: [
+            {
+              desc: 'Remove the directive',
+              fix(fixer) {
+                return fixer.remove(stmt);
+              },
+            },
+          ],
+        });
+      }
+    }
+    if (shouldReportUnusedOptOutDirective) {
+      return {
+        FunctionDeclaration(fnDecl) {
+          for (const stmt of fnDecl.body.body) {
+            reportUnusedOptOutDirective(stmt);
+          }
+        },
+        ArrowFunctionExpression(fnExpr) {
+          if (fnExpr.body.type === 'BlockStatement') {
+            for (const stmt of fnExpr.body.body) {
+              reportUnusedOptOutDirective(stmt);
+            }
+          }
+        },
+        FunctionExpression(fnExpr) {
+          for (const stmt of fnExpr.body.body) {
+            reportUnusedOptOutDirective(stmt);
+          }
+        },
+      };
+    } else {
+      return {};
+    }
   },
 };
 

From a58276cbc3a70ba99572eeb9c2f7b4a54ca44b1e Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:39:51 -0400
Subject: [PATCH 37/40] [playground] Allow (Arrow)FunctionExpressions

This was a pet peeve where our playground could only compile top level
FunctionDeclarations. Just synthesize a fake identifier if it doesn't
have one.

ghstack-source-id: 882483c79ceebf382b69e37aed1f293efff9c5a7
Pull Request resolved: https://github.com/facebook/react/pull/30729
---
 .../components/Editor/EditorImpl.tsx          | 63 ++++++++++---------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/EditorImpl.tsx b/compiler/apps/playground/components/Editor/EditorImpl.tsx
index ebac65dc4b9f2f..7b1214b4600c33 100644
--- a/compiler/apps/playground/components/Editor/EditorImpl.tsx
+++ b/compiler/apps/playground/components/Editor/EditorImpl.tsx
@@ -66,14 +66,14 @@ function parseFunctions(
   source: string,
   language: 'flow' | 'typescript',
 ): Array<
-  NodePath<
-    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >
+  | NodePath<t.FunctionDeclaration>
+  | NodePath<t.ArrowFunctionExpression>
+  | NodePath<t.FunctionExpression>
 > {
   const items: Array<
-    NodePath<
-      t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-    >
+    | NodePath<t.FunctionDeclaration>
+    | NodePath<t.ArrowFunctionExpression>
+    | NodePath<t.FunctionExpression>
   > = [];
   try {
     const ast = parseInput(source, language);
@@ -155,22 +155,33 @@ function isHookName(s: string): boolean {
   return /^use[A-Z0-9]/.test(s);
 }
 
-function getReactFunctionType(
-  id: NodePath<t.Identifier | null | undefined>,
-): ReactFunctionType {
-  if (id && id.node && id.isIdentifier()) {
-    if (isHookName(id.node.name)) {
+function getReactFunctionType(id: t.Identifier | null): ReactFunctionType {
+  if (id != null) {
+    if (isHookName(id.name)) {
       return 'Hook';
     }
 
     const isPascalCaseNameSpace = /^[A-Z].*/;
-    if (isPascalCaseNameSpace.test(id.node.name)) {
+    if (isPascalCaseNameSpace.test(id.name)) {
       return 'Component';
     }
   }
   return 'Other';
 }
 
+function getFunctionIdentifier(
+  fn:
+    | NodePath<t.FunctionDeclaration>
+    | NodePath<t.ArrowFunctionExpression>
+    | NodePath<t.FunctionExpression>,
+): t.Identifier | null {
+  if (fn.isArrowFunctionExpression()) {
+    return null;
+  }
+  const id = fn.get('id');
+  return Array.isArray(id) === false && id.isIdentifier() ? id.node : null;
+}
+
 function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   const results = new Map<string, PrintedCompilerPipelineValue[]>();
   const error = new CompilerError();
@@ -188,27 +199,21 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
   } else {
     language = 'typescript';
   }
+  let count = 0;
+  const withIdentifier = (id: t.Identifier | null): t.Identifier => {
+    if (id != null && id.name != null) {
+      return id;
+    } else {
+      return t.identifier(`anonymous_${count++}`);
+    }
+  };
   try {
     // Extract the first line to quickly check for custom test directives
     const pragma = source.substring(0, source.indexOf('\n'));
     const config = parseConfigPragma(pragma);
 
     for (const fn of parseFunctions(source, language)) {
-      if (!fn.isFunctionDeclaration()) {
-        error.pushErrorDetail(
-          new CompilerErrorDetail({
-            reason: `Unexpected function type ${fn.node.type}`,
-            description:
-              'Playground only supports parsing function declarations',
-            severity: ErrorSeverity.Todo,
-            loc: fn.node.loc ?? null,
-            suggestions: null,
-          }),
-        );
-        continue;
-      }
-
-      const id = fn.get('id');
+      const id = withIdentifier(getFunctionIdentifier(fn));
       for (const result of run(
         fn,
         {
@@ -221,7 +226,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
         null,
         null,
       )) {
-        const fnName = fn.node.id?.name ?? null;
+        const fnName = id.name;
         switch (result.kind) {
           case 'ast': {
             upsert({
@@ -230,7 +235,7 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
               name: result.name,
               value: {
                 type: 'FunctionDeclaration',
-                id: result.value.id,
+                id,
                 async: result.value.async,
                 generator: result.value.generator,
                 body: result.value.body,

From 13ddf1084b4304a60059e3b96fc3c039d23e9432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 16 Aug 2024 19:52:11 -0400
Subject: [PATCH 38/40] [DevTools] Find owners from the parent path that
 matches the Fiber or ReactComponentInfo (#30717)

This enables finding Server Components on the owner path. Server
Components aren't stateful so there's not actually one specific owner
that it necessarily matches. So it can't be a global look up. E.g. the
same Server Component can be rendered in two places or even nested
inside each other.

Therefore we need to find an appropriate instance using a heuristic. We
can do that by traversing the parent path since the owner is likely also
a parent. Not always but almost always.

To simplify things we can also do the same for Fibers. That brings us
one step closer to being able to get rid of the global
fiberToFiberInstance map since we can just use the shadow tree to find
this information.

This does mean that we can't find owners that aren't parents which is
usually ok. However, there is a test case that's interesting where you
have a React ART tree inside a DOM tree. In that case the owners
actually span multiple renderers and roots so the owner is not on the
parent stack. Usually this is fine since you'd just care about the
owners within React ART but ideally we'd support this. However, I think
that really the fix to this is that the React ART tree itself should
actually show up inside the DOM tree in DevTools and in the virtual
shadow tree because that's conceptually where it belongs. That would
then solve this particular issue. We'd just need some way to associate
the root with a DOM parent when it gets mounted.
---
 .../src/__tests__/inspectedElement-test.js    |  43 ++--
 .../src/backend/fiber/renderer.js             | 208 ++++++++++++------
 2 files changed, 159 insertions(+), 92 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index c77013aba3e71e..843c6dff9c08fd 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2893,26 +2893,29 @@ describe('InspectedElement', () => {
     `);
 
     const inspectedElement = await inspectElementAtIndex(4);
-    expect(inspectedElement.owners).toMatchInlineSnapshot(`
-      [
-        {
-          "compiledWithForget": false,
-          "displayName": "Child",
-          "hocDisplayNames": null,
-          "id": 8,
-          "key": null,
-          "type": 5,
-        },
-        {
-          "compiledWithForget": false,
-          "displayName": "App",
-          "hocDisplayNames": null,
-          "id": 7,
-          "key": null,
-          "type": 5,
-        },
-      ]
-    `);
+    // TODO: Ideally this should match the owners of the Group but those are
+    // part of a different parent tree. Ideally the Group would be parent of
+    // that parent tree though which would fix this issue.
+    //
+    // [
+    //   {
+    //     "compiledWithForget": false,
+    //     "displayName": "Child",
+    //     "hocDisplayNames": null,
+    //     "id": 8,
+    //     "key": null,
+    //     "type": 5,
+    //   },
+    //   {
+    //     "compiledWithForget": false,
+    //     "displayName": "App",
+    //     "hocDisplayNames": null,
+    //     "id": 7,
+    //     "key": null,
+    //     "type": 5,
+    //   },
+    // ]
+    expect(inspectedElement.owners).toMatchInlineSnapshot(`[]`);
   });
 
   describe('error boundary', () => {
diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index a48b22f647548e..62eacdf5dbe9a4 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -2143,29 +2143,18 @@ export function attach(
       const {key} = fiber;
       const displayName = getDisplayNameForFiber(fiber);
       const elementType = getElementTypeForFiber(fiber);
-      const debugOwner = fiber._debugOwner;
-
-      // Ideally we should call getFiberIDThrows() for _debugOwner,
-      // since owners are almost always higher in the tree (and so have already been processed),
-      // but in some (rare) instances reported in open source, a descendant mounts before an owner.
-      // Since this is a DEV only field it's probably okay to also just lazily generate and ID here if needed.
-      // See https://github.com/facebook/react/issues/21445
-      let ownerID: number;
-      if (debugOwner != null) {
-        if (typeof debugOwner.tag === 'number') {
-          const ownerFiberInstance = getFiberInstanceUnsafe((debugOwner: any));
-          if (ownerFiberInstance !== null) {
-            ownerID = ownerFiberInstance.id;
-          } else {
-            ownerID = 0;
-          }
-        } else {
-          // TODO: Track Server Component Owners.
-          ownerID = 0;
-        }
-      } else {
-        ownerID = 0;
-      }
+
+      // Finding the owner instance might require traversing the whole parent path which
+      // doesn't have great big O notation. Ideally we'd lazily fetch the owner when we
+      // need it but we have some synchronous operations in the front end like Alt+Left
+      // which selects the owner immediately. Typically most owners are only a few parents
+      // away so maybe it's not so bad.
+      const debugOwner = getUnfilteredOwner(fiber);
+      const ownerInstance = findNearestOwnerInstance(
+        parentInstance,
+        debugOwner,
+      );
+      const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
       const parentID = parentInstance ? parentInstance.id : 0;
 
       const displayNameStringID = getStringID(displayName);
@@ -2231,11 +2220,15 @@ export function attach(
       displayName = env + '(' + displayName + ')';
     }
     const elementType = ElementTypeVirtual;
-    // TODO: Support Virtual Owners. To do this we need to find a matching
-    // virtual instance which is not a super cheap parent traversal and so
-    // we should ideally only do that lazily. We should maybe change the
-    // frontend to get it lazily.
-    const ownerID: number = 0;
+
+    // Finding the owner instance might require traversing the whole parent path which
+    // doesn't have great big O notation. Ideally we'd lazily fetch the owner when we
+    // need it but we have some synchronous operations in the front end like Alt+Left
+    // which selects the owner immediately. Typically most owners are only a few parents
+    // away so maybe it's not so bad.
+    const debugOwner = getUnfilteredOwner(componentInfo);
+    const ownerInstance = findNearestOwnerInstance(parentInstance, debugOwner);
+    const ownerID = ownerInstance === null ? 0 : ownerInstance.id;
     const parentID = parentInstance ? parentInstance.id : 0;
 
     const displayNameStringID = getStringID(displayName);
@@ -3354,11 +3347,19 @@ export function attach(
   }
 
   function getUpdatersList(root: any): Array<SerializedElement> | null {
-    return root.memoizedUpdaters != null
-      ? Array.from(root.memoizedUpdaters)
-          .filter(fiber => getFiberIDUnsafe(fiber) !== null)
-          .map(fiberToSerializedElement)
-      : null;
+    const updaters = root.memoizedUpdaters;
+    if (updaters == null) {
+      return null;
+    }
+    const result = [];
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const updater of updaters) {
+      const inst = getFiberInstanceUnsafe(updater);
+      if (inst !== null) {
+        result.push(instanceToSerializedElement(inst));
+      }
+    }
+    return result;
   }
 
   function handleCommitFiberUnmount(fiber: any) {
@@ -3923,13 +3924,26 @@ export function attach(
     }
   }
 
-  function fiberToSerializedElement(fiber: Fiber): SerializedElement {
-    return {
-      displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
-      id: getFiberIDThrows(fiber),
-      key: fiber.key,
-      type: getElementTypeForFiber(fiber),
-    };
+  function instanceToSerializedElement(
+    instance: DevToolsInstance,
+  ): SerializedElement {
+    if (instance.kind === FIBER_INSTANCE) {
+      const fiber = instance.data;
+      return {
+        displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
+        id: instance.id,
+        key: fiber.key,
+        type: getElementTypeForFiber(fiber),
+      };
+    } else {
+      const componentInfo = instance.data;
+      return {
+        displayName: componentInfo.name || 'Anonymous',
+        id: instance.id,
+        key: componentInfo.key == null ? null : componentInfo.key,
+        type: ElementTypeVirtual,
+      };
+    }
   }
 
   function getOwnersList(id: number): Array<SerializedElement> | null {
@@ -3938,33 +3952,97 @@ export function attach(
       console.warn(`Could not find DevToolsInstance with id "${id}"`);
       return null;
     }
-    if (devtoolsInstance.kind !== FIBER_INSTANCE) {
-      // TODO: Handle VirtualInstance.
-      return null;
+    const self = instanceToSerializedElement(devtoolsInstance);
+    const owners = getOwnersListFromInstance(devtoolsInstance);
+    // This is particular API is prefixed with the current instance too for some reason.
+    if (owners === null) {
+      return [self];
     }
-    const fiber =
-      findCurrentFiberUsingSlowPathByFiberInstance(devtoolsInstance);
-    if (fiber == null) {
+    owners.unshift(self);
+    owners.reverse();
+    return owners;
+  }
+
+  function getOwnersListFromInstance(
+    instance: DevToolsInstance,
+  ): Array<SerializedElement> | null {
+    let owner = getUnfilteredOwner(instance.data);
+    if (owner === null) {
       return null;
     }
+    const owners: Array<SerializedElement> = [];
+    let parentInstance: null | DevToolsInstance = instance.parent;
+    while (parentInstance !== null && owner !== null) {
+      const ownerInstance = findNearestOwnerInstance(parentInstance, owner);
+      if (ownerInstance !== null) {
+        owners.push(instanceToSerializedElement(ownerInstance));
+        // Get the next owner and keep searching from the previous match.
+        owner = getUnfilteredOwner(owner);
+        parentInstance = ownerInstance.parent;
+      } else {
+        break;
+      }
+    }
+    return owners;
+  }
 
-    const owners: Array<SerializedElement> = [fiberToSerializedElement(fiber)];
-
-    let owner = fiber._debugOwner;
-    while (owner != null) {
+  function getUnfilteredOwner(
+    owner: ReactComponentInfo | Fiber | null | void,
+  ): ReactComponentInfo | Fiber | null {
+    if (owner == null) {
+      return null;
+    }
+    if (typeof owner.tag === 'number') {
+      const ownerFiber: Fiber = (owner: any); // Refined
+      owner = ownerFiber._debugOwner;
+    } else {
+      const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+      owner = ownerInfo.owner;
+    }
+    while (owner) {
       if (typeof owner.tag === 'number') {
         const ownerFiber: Fiber = (owner: any); // Refined
         if (!shouldFilterFiber(ownerFiber)) {
-          owners.unshift(fiberToSerializedElement(ownerFiber));
+          return ownerFiber;
         }
         owner = ownerFiber._debugOwner;
       } else {
-        // TODO: Track Server Component Owners.
-        break;
+        const ownerInfo: ReactComponentInfo = (owner: any); // Refined
+        if (!shouldFilterVirtual(ownerInfo)) {
+          return ownerInfo;
+        }
+        owner = ownerInfo.owner;
       }
     }
+    return null;
+  }
 
-    return owners;
+  function findNearestOwnerInstance(
+    parentInstance: null | DevToolsInstance,
+    owner: void | null | ReactComponentInfo | Fiber,
+  ): null | DevToolsInstance {
+    if (owner == null) {
+      return null;
+    }
+    // Search the parent path for any instance that matches this kind of owner.
+    while (parentInstance !== null) {
+      if (
+        parentInstance.data === owner ||
+        // Typically both owner and instance.data would refer to the current version of a Fiber
+        // but it is possible for memoization to ignore the owner on the JSX. Then the new Fiber
+        // isn't propagated down as the new owner. In that case we might match the alternate
+        // instead. This is a bit hacky but the fastest check since type casting owner to a Fiber
+        // needs a duck type check anyway.
+        parentInstance.data === (owner: any).alternate
+      ) {
+        return parentInstance;
+      }
+      parentInstance = parentInstance.parent;
+    }
+    // It is technically possible to create an element and render it in a different parent
+    // but this is a weird edge case and it is worth not having to scan the tree or keep
+    // a register for every fiber/component info.
+    return null;
   }
 
   // Fast path props lookup for React Native style editor.
@@ -4047,7 +4125,6 @@ export function attach(
     }
 
     const {
-      _debugOwner: debugOwner,
       stateNode,
       key,
       memoizedProps,
@@ -4174,21 +4251,8 @@ export function attach(
       context = {value: context};
     }
 
-    let owners: null | Array<SerializedElement> = null;
-    let owner = debugOwner;
-    while (owner != null) {
-      if (typeof owner.tag === 'number') {
-        const ownerFiber: Fiber = (owner: any); // Refined
-        if (owners === null) {
-          owners = [];
-        }
-        owners.push(fiberToSerializedElement(ownerFiber));
-        owner = ownerFiber._debugOwner;
-      } else {
-        // TODO: Track Server Component Owners.
-        break;
-      }
-    }
+    const owners: null | Array<SerializedElement> =
+      getOwnersListFromInstance(fiberInstance);
 
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
@@ -4352,8 +4416,8 @@ export function attach(
       displayName = env + '(' + displayName + ')';
     }
 
-    // TODO: Support Virtual Owners.
-    const owners: null | Array<SerializedElement> = null;
+    const owners: null | Array<SerializedElement> =
+      getOwnersListFromInstance(virtualInstance);
 
     let rootType = null;
     let targetErrorBoundaryID = null;

From 177b2419b2d8a3d14c3f3304bb7e300985d6f377 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 16 Aug 2024 16:45:03 -0700
Subject: [PATCH 39/40] [compiler] Validate environment config while parsing
 plugin opts

Addresses a todo from a while back. We now validate environment options when parsing the plugin options, which means we can stop re-parsing/validating in later phases.

ghstack-source-id: b19806e843e1254716705b33dcf86afb7223f6c7
Pull Request resolved: https://github.com/facebook/react/pull/30726
---
 .../src/Entrypoint/Options.ts                 | 26 +++++++++++++++----
 .../src/Entrypoint/Program.ts                 | 17 +-----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
index e97ececc2a137d..e9664972565119 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts
@@ -7,8 +7,12 @@
 
 import * as t from '@babel/types';
 import {z} from 'zod';
-import {CompilerErrorDetailOptions} from '../CompilerError';
-import {ExternalFunction, PartialEnvironmentConfig} from '../HIR/Environment';
+import {CompilerError, CompilerErrorDetailOptions} from '../CompilerError';
+import {
+  EnvironmentConfig,
+  ExternalFunction,
+  parseEnvironmentConfig,
+} from '../HIR/Environment';
 import {hasOwnProperty} from '../Utils/utils';
 
 const PanicThresholdOptionsSchema = z.enum([
@@ -32,7 +36,7 @@ const PanicThresholdOptionsSchema = z.enum([
 export type PanicThresholdOptions = z.infer<typeof PanicThresholdOptionsSchema>;
 
 export type PluginOptions = {
-  environment: PartialEnvironmentConfig | null;
+  environment: EnvironmentConfig;
 
   logger: Logger | null;
 
@@ -194,7 +198,7 @@ export type Logger = {
 export const defaultOptions: PluginOptions = {
   compilationMode: 'infer',
   panicThreshold: 'none',
-  environment: {},
+  environment: parseEnvironmentConfig({}).unwrap(),
   logger: null,
   gating: null,
   noEmit: false,
@@ -218,7 +222,19 @@ export function parsePluginOptions(obj: unknown): PluginOptions {
       // normalize string configs to be case insensitive
       value = value.toLowerCase();
     }
-    if (isCompilerFlag(key)) {
+    if (key === 'environment') {
+      const environmentResult = parseEnvironmentConfig(value);
+      if (environmentResult.isErr()) {
+        CompilerError.throwInvalidConfig({
+          reason:
+            'Error in validating environment config. This is an advanced setting and not meant to be used directly',
+          description: environmentResult.unwrapErr().toString(),
+          suggestions: null,
+          loc: null,
+        });
+      }
+      parsedOptions[key] = environmentResult.unwrap();
+    } else if (isCompilerFlag(key)) {
       parsedOptions[key] = value;
     }
   }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
index 99ec1e04a65e4e..979e9f88d1b57e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
@@ -16,7 +16,6 @@ import {
   EnvironmentConfig,
   ExternalFunction,
   ReactFunctionType,
-  parseEnvironmentConfig,
   tryParseExternalFunction,
 } from '../HIR/Environment';
 import {CodegenFunction} from '../ReactiveScopes';
@@ -292,21 +291,7 @@ export function compileProgram(
     return;
   }
 
-  /*
-   * TODO(lauren): Remove pass.opts.environment nullcheck once PluginOptions
-   * is validated
-   */
-  const environmentResult = parseEnvironmentConfig(pass.opts.environment ?? {});
-  if (environmentResult.isErr()) {
-    CompilerError.throwInvalidConfig({
-      reason:
-        'Error in validating environment config. This is an advanced setting and not meant to be used directly',
-      description: environmentResult.unwrapErr().toString(),
-      suggestions: null,
-      loc: null,
-    });
-  }
-  const environment = environmentResult.unwrap();
+  const environment = pass.opts.environment;
   const restrictedImportsErr = validateRestrictedImports(program, environment);
   if (restrictedImportsErr) {
     handleError(restrictedImportsErr, pass, null);

From 7954db9398b9afa962167577a6c6940be3856c39 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 16 Aug 2024 18:29:18 -0700
Subject: [PATCH 40/40] [Fizz] handle throwing after abort during render
 (#30730)

It is possible to throw after aborting during a render and we were not
properly tracking this. We use an AbortSigil to mark whether a rendering
task needs to abort but the throw interrupts that and we end up handling
an error on the error pathway instead.

This change reworks the abort-while-rendering support to be robust to
throws after calling abort
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 42 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  | 22 +++++-----
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index e9abb25eb1768f..5d70a0c71ea4dc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -8377,6 +8377,48 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  it('can support throwing after aborting during a render', async () => {
+    function App() {
+      return (
+        <div>
+          <Suspense fallback={<p>loading...</p>}>
+            <ComponentThatAborts />
+          </Suspense>
+        </div>
+      );
+    }
+
+    function ComponentThatAborts() {
+      abortRef.current('boom');
+      throw new Error('bam');
+    }
+
+    const abortRef = {current: null};
+    let finished = false;
+    const errors = [];
+    await act(() => {
+      const {pipe, abort} = renderToPipeableStream(<App />, {
+        onError(err) {
+          errors.push(err);
+        },
+      });
+      abortRef.current = abort;
+      writable.on('finish', () => {
+        finished = true;
+      });
+      pipe(writable);
+    });
+
+    expect(errors).toEqual(['boom']);
+
+    expect(finished).toBe(true);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>loading...</p>
+      </div>,
+    );
+  });
+
   it('should warn for using generators as children props', async () => {
     function* getChildren() {
       yield <h1 key="1">Hello</h1>;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a6c77f8bafb7f8..986e8673a5a2a4 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -652,8 +652,6 @@ export function resumeRequest(
   return request;
 }
 
-const AbortSigil = {};
-
 let currentRequest: null | Request = null;
 
 export function resolveRequest(): null | Request {
@@ -1173,7 +1171,7 @@ function renderSuspenseBoundary(
       );
       boundarySegment.status = COMPLETED;
     } catch (thrownValue: mixed) {
-      if (thrownValue === AbortSigil) {
+      if (request.status === ABORTING) {
         boundarySegment.status = ABORTED;
       } else {
         boundarySegment.status = ERRORED;
@@ -1246,7 +1244,7 @@ function renderSuspenseBoundary(
     } catch (thrownValue: mixed) {
       newBoundary.status = CLIENT_RENDERED;
       let error: mixed;
-      if (thrownValue === AbortSigil) {
+      if (request.status === ABORTING) {
         contentRootSegment.status = ABORTED;
         error = request.fatalError;
       } else {
@@ -1601,7 +1599,8 @@ function finishClassComponent(
     nextChildren = instance.render();
   }
   if (request.status === ABORTING) {
-    throw AbortSigil;
+    // eslint-disable-next-line no-throw-literal
+    throw null;
   }
 
   if (__DEV__) {
@@ -1757,7 +1756,8 @@ function renderFunctionComponent(
     legacyContext,
   );
   if (request.status === ABORTING) {
-    throw AbortSigil;
+    // eslint-disable-next-line no-throw-literal
+    throw null;
   }
 
   const hasId = checkDidRenderIdHook();
@@ -2076,7 +2076,8 @@ function renderLazyComponent(
     Component = init(payload);
   }
   if (request.status === ABORTING) {
-    throw AbortSigil;
+    // eslint-disable-next-line no-throw-literal
+    throw null;
   }
   const resolvedProps = resolveDefaultPropsOnNonClassComponent(
     Component,
@@ -2655,7 +2656,8 @@ function retryNode(request: Request, task: Task): void {
           resolvedNode = init(payload);
         }
         if (request.status === ABORTING) {
-          throw AbortSigil;
+          // eslint-disable-next-line no-throw-literal
+          throw null;
         }
         // Now we render the resolved node
         renderNodeDestructive(request, task, resolvedNode, childIndex);
@@ -4127,7 +4129,7 @@ function retryRenderTask(
           // (unstable) API for suspending. This implementation detail can change
           // later, once we deprecate the old API in favor of `use`.
           getSuspendedThenable()
-        : thrownValue === AbortSigil
+        : request.status === ABORTING
           ? request.fatalError
           : thrownValue;
 
@@ -4250,7 +4252,7 @@ function retryReplayTask(request: Request, task: ReplayTask): void {
     erroredReplay(
       request,
       task.blockedBoundary,
-      x === AbortSigil ? request.fatalError : x,
+      request.status === ABORTING ? request.fatalError : x,
       errorInfo,
       task.replay.nodes,
       task.replay.slots,