From ec5b61a29b52506e01a6dbb9a70b63960c2246b5 Mon Sep 17 00:00:00 2001
From: rickhanlonii <rickhanlonii@users.noreply.github.com>
Date: Thu, 22 Feb 2024 20:40:32 +0000
Subject: [PATCH] Make enableRefAsProp www dynamic (#28423)

Going to start rolling this out

DiffTrain build for [aaf85f3af8c30252edaab5c24975cd086937b2a4](https://github.com/facebook/react/commit/aaf85f3af8c30252edaab5c24975cd086937b2a4)
---
 .../facebook-www/JSXDEVRuntime-dev.classic.js |  93 ++++++++-
 .../facebook-www/JSXDEVRuntime-dev.modern.js  |  93 ++++++++-
 compiled/facebook-www/REVISION                |   2 +-
 compiled/facebook-www/React-dev.classic.js    | 116 +++++++++---
 compiled/facebook-www/React-dev.modern.js     | 116 +++++++++---
 compiled/facebook-www/React-prod.classic.js   |  33 ++--
 compiled/facebook-www/React-prod.modern.js    |  33 ++--
 .../facebook-www/React-profiling.classic.js   |  33 ++--
 .../facebook-www/React-profiling.modern.js    |  33 ++--
 compiled/facebook-www/ReactART-dev.classic.js |  56 +++++-
 compiled/facebook-www/ReactART-dev.modern.js  |  56 +++++-
 .../facebook-www/ReactART-prod.classic.js     |  37 +++-
 compiled/facebook-www/ReactART-prod.modern.js |  37 +++-
 compiled/facebook-www/ReactDOM-dev.classic.js |  56 +++++-
 compiled/facebook-www/ReactDOM-dev.modern.js  |  56 +++++-
 .../facebook-www/ReactDOM-prod.classic.js     |  43 +++--
 compiled/facebook-www/ReactDOM-prod.modern.js |  43 +++--
 .../ReactDOM-profiling.classic.js             |  43 +++--
 .../facebook-www/ReactDOM-profiling.modern.js |  43 +++--
 .../ReactDOMServer-dev.classic.js             |  30 ++-
 .../facebook-www/ReactDOMServer-dev.modern.js |  30 ++-
 .../ReactDOMServer-prod.classic.js            | 178 ++++++++++--------
 .../ReactDOMServer-prod.modern.js             | 162 ++++++++--------
 .../ReactDOMServerStreaming-dev.modern.js     |  28 ++-
 .../ReactDOMServerStreaming-prod.modern.js    | 120 ++++++------
 .../ReactDOMTesting-dev.classic.js            |  56 +++++-
 .../ReactDOMTesting-dev.modern.js             |  56 +++++-
 .../ReactDOMTesting-prod.classic.js           |  43 +++--
 .../ReactDOMTesting-prod.modern.js            |  43 +++--
 .../ReactFlightDOMClient-dev.modern.js        |  25 ++-
 .../ReactFlightDOMServer-dev.modern.js        |  12 +-
 .../ReactFlightDOMServer-prod.modern.js       |  14 +-
 .../facebook-www/ReactServer-dev.modern.js    | 116 +++++++++---
 .../facebook-www/ReactServer-prod.modern.js   |  37 ++--
 .../ReactTestRenderer-dev.modern.js           |   2 +-
 35 files changed, 1454 insertions(+), 520 deletions(-)

diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js
index deb98b9e19130..7be7a0eea0df9 100644
--- a/compiled/facebook-www/JSXDEVRuntime-dev.classic.js
+++ b/compiled/facebook-www/JSXDEVRuntime-dev.classic.js
@@ -109,8 +109,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, false is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -813,9 +813,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -901,7 +903,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -925,6 +927,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -949,13 +971,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // This tag allows us to uniquely identify this as a React Element
+          $$typeof: REACT_ELEMENT_TYPE,
+          // Built-in properties that belong on the element
+          type: type,
+          key: key,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1155,7 +1228,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1166,7 +1239,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1182,7 +1255,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1192,7 +1265,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1425,7 +1498,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");
diff --git a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js
index f432bf9f90373..e840f3f6a5d28 100644
--- a/compiled/facebook-www/JSXDEVRuntime-dev.modern.js
+++ b/compiled/facebook-www/JSXDEVRuntime-dev.modern.js
@@ -109,8 +109,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -813,9 +813,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -901,7 +903,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -925,6 +927,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -949,13 +971,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // This tag allows us to uniquely identify this as a React Element
+          $$typeof: REACT_ELEMENT_TYPE,
+          // Built-in properties that belong on the element
+          type: type,
+          key: key,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1155,7 +1228,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1166,7 +1239,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1182,7 +1255,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1192,7 +1265,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1425,7 +1498,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 045f850882863..7a563e551204c 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-e4b816ba1a1ea7c1874cf3f82dd841830b71341a
+aaf85f3af8c30252edaab5c24975cd086937b2a4
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
index f8bd6b8831938..9c8cfb6295ee4 100644
--- a/compiled/facebook-www/React-dev.classic.js
+++ b/compiled/facebook-www/React-dev.classic.js
@@ -24,7 +24,7 @@ if (__DEV__) {
     ) {
       __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     }
-    var ReactVersion = "18.3.0-www-classic-3f51e0fb";
+    var ReactVersion = "18.3.0-www-classic-b8eb15b2";
 
     // ATTENTION
     // When adding new symbols to this file,
@@ -475,11 +475,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, false is used for a new modern build.
-    // because JSX is an extremely hot path.
-
-    var enableRefAsProp = false; // Flow magic to verify the exports of this file match the original version.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -1185,9 +1182,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -1273,7 +1272,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -1297,6 +1296,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -1321,13 +1340,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // This tag allows us to uniquely identify this as a React Element
+          $$typeof: REACT_ELEMENT_TYPE,
+          // Built-in properties that belong on the element
+          type: type,
+          key: key,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1563,7 +1633,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1574,7 +1644,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1590,7 +1660,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1600,7 +1670,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1701,7 +1771,7 @@ if (__DEV__) {
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1722,7 +1792,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // Even though we don't use these anymore in the runtime, we don't want
+            (enableRefAsProp || propName !== "ref") && // Even though we don't use these anymore in the runtime, we don't want
             // them to appear as props, so in createElement we filter them out.
             // We don't have to do this in the jsx() runtime because the jsx()
             // transform never passed these as props; it used separate arguments.
@@ -1766,7 +1836,7 @@ if (__DEV__) {
       }
 
       {
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1776,7 +1846,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1847,7 +1917,7 @@ if (__DEV__) {
         oldElement.type,
         newKey, // When enableRefAsProp is on, this argument is ignored. This check only
         // exists to avoid the `ref` access warning.
-        oldElement.ref,
+        enableRefAsProp ? null : oldElement.ref,
         undefined,
         undefined,
         oldElement._owner,
@@ -1873,13 +1943,13 @@ if (__DEV__) {
       var props = assign({}, element.props); // Reserved names are extracted
 
       var key = element.key;
-      var ref = element.ref; // Owner will be preserved, unless ref is overridden
+      var ref = enableRefAsProp ? null : element.ref; // Owner will be preserved, unless ref is overridden
 
       var owner = element._owner;
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             // Silently steal the ref from the parent.
             ref = config.ref;
           }
@@ -1905,7 +1975,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // ...and maybe these, too, though we currently rely on them for
+            (enableRefAsProp || propName !== "ref") && // ...and maybe these, too, though we currently rely on them for
             // warnings and debug information in dev. Need to decide if we're OK
             // with dropping them. In the jsx() runtime it's not an issue because
             // the data gets passed as separate arguments instead of props, but
@@ -1915,7 +1985,7 @@ if (__DEV__) {
             propName !== "__source" && // Undefined `ref` is ignored by cloneElement. We treat it the same as
             // if the property were missing. This is mostly for
             // backwards compatibility.
-            !enableRefAsProp
+            !(enableRefAsProp && propName === "ref" && config.ref === undefined)
           ) {
             if (config[propName] === undefined && defaultProps !== undefined) {
               // Resolve default props
@@ -2177,7 +2247,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");
diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
index a28d3952d97f4..70e47f5190e19 100644
--- a/compiled/facebook-www/React-dev.modern.js
+++ b/compiled/facebook-www/React-dev.modern.js
@@ -24,7 +24,7 @@ if (__DEV__) {
     ) {
       __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
     }
-    var ReactVersion = "18.3.0-www-modern-5e309987";
+    var ReactVersion = "18.3.0-www-modern-5ca55b0c";
 
     // ATTENTION
     // When adding new symbols to this file,
@@ -475,11 +475,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
-    // because JSX is an extremely hot path.
-
-    var enableRefAsProp = false; // Flow magic to verify the exports of this file match the original version.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
 
     function getWrappedName(outerType, innerType, wrapperName) {
       var displayName = outerType.displayName;
@@ -1185,9 +1182,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -1273,7 +1272,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -1297,6 +1296,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -1321,13 +1340,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // This tag allows us to uniquely identify this as a React Element
+          $$typeof: REACT_ELEMENT_TYPE,
+          // Built-in properties that belong on the element
+          type: type,
+          key: key,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1563,7 +1633,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1574,7 +1644,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1590,7 +1660,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1600,7 +1670,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1701,7 +1771,7 @@ if (__DEV__) {
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1722,7 +1792,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // Even though we don't use these anymore in the runtime, we don't want
+            (enableRefAsProp || propName !== "ref") && // Even though we don't use these anymore in the runtime, we don't want
             // them to appear as props, so in createElement we filter them out.
             // We don't have to do this in the jsx() runtime because the jsx()
             // transform never passed these as props; it used separate arguments.
@@ -1766,7 +1836,7 @@ if (__DEV__) {
       }
 
       {
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1776,7 +1846,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1803,7 +1873,7 @@ if (__DEV__) {
         oldElement.type,
         newKey, // When enableRefAsProp is on, this argument is ignored. This check only
         // exists to avoid the `ref` access warning.
-        oldElement.ref,
+        enableRefAsProp ? null : oldElement.ref,
         undefined,
         undefined,
         oldElement._owner,
@@ -1829,13 +1899,13 @@ if (__DEV__) {
       var props = assign({}, element.props); // Reserved names are extracted
 
       var key = element.key;
-      var ref = element.ref; // Owner will be preserved, unless ref is overridden
+      var ref = enableRefAsProp ? null : element.ref; // Owner will be preserved, unless ref is overridden
 
       var owner = element._owner;
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             // Silently steal the ref from the parent.
             ref = config.ref;
           }
@@ -1861,7 +1931,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // ...and maybe these, too, though we currently rely on them for
+            (enableRefAsProp || propName !== "ref") && // ...and maybe these, too, though we currently rely on them for
             // warnings and debug information in dev. Need to decide if we're OK
             // with dropping them. In the jsx() runtime it's not an issue because
             // the data gets passed as separate arguments instead of props, but
@@ -1871,7 +1941,7 @@ if (__DEV__) {
             propName !== "__source" && // Undefined `ref` is ignored by cloneElement. We treat it the same as
             // if the property were missing. This is mostly for
             // backwards compatibility.
-            !enableRefAsProp
+            !(enableRefAsProp && propName === "ref" && config.ref === undefined)
           ) {
             if (config[propName] === undefined && defaultProps !== undefined) {
               // Resolve default props
@@ -2133,7 +2203,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");
diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
index 9703f5f5f1462..a07c7c447296b 100644
--- a/compiled/facebook-www/React-prod.classic.js
+++ b/compiled/facebook-www/React-prod.classic.js
@@ -85,6 +85,7 @@ var isArrayImpl = Array.isArray,
   dynamicFeatureFlags = require("ReactFeatureFlags"),
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactCurrentDispatcher = { current: null },
   ReactCurrentCache = { current: null },
   ReactCurrentBatchConfig = { transition: null },
@@ -97,6 +98,8 @@ var isArrayImpl = Array.isArray,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function ReactElement(type, key, _ref, self, source, owner, props) {
+  enableRefAsProp &&
+    ((_ref = props.ref), (_ref = void 0 !== _ref ? _ref : null));
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
@@ -113,11 +116,11 @@ function jsxProd(type, config, maybeKey) {
     ref = null;
   void 0 !== maybeKey && (key = "" + maybeKey);
   void 0 !== config.key && (key = "" + config.key);
-  void 0 !== config.ref && (ref = config.ref);
+  void 0 === config.ref || enableRefAsProp || (ref = config.ref);
   for (propName in config)
     hasOwnProperty.call(config, propName) &&
       "key" !== propName &&
-      "ref" !== propName &&
+      (enableRefAsProp || "ref" !== propName) &&
       (props[propName] = config[propName]);
   if (type && type.defaultProps)
     for (propName in ((config = type.defaultProps), config))
@@ -138,12 +141,14 @@ function createElement(type, config, children) {
     key = null,
     ref = null;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (ref = config.ref),
+    for (propName in (void 0 === config.ref ||
+      enableRefAsProp ||
+      (ref = config.ref),
     void 0 !== config.key && (key = "" + config.key),
     config))
       hasOwnProperty.call(config, propName) &&
         "key" !== propName &&
-        "ref" !== propName &&
+        (enableRefAsProp || "ref" !== propName) &&
         "__self" !== propName &&
         "__source" !== propName &&
         (props[propName] = config[propName]);
@@ -172,7 +177,7 @@ function cloneAndReplaceKey(oldElement, newKey) {
   return ReactElement(
     oldElement.type,
     newKey,
-    oldElement.ref,
+    enableRefAsProp ? null : oldElement.ref,
     void 0,
     void 0,
     oldElement._owner,
@@ -434,20 +439,22 @@ exports.cloneElement = function (element, config, children) {
     );
   var props = assign({}, element.props),
     key = element.key,
-    ref = element.ref,
+    ref = enableRefAsProp ? null : element.ref,
     owner = element._owner;
   if (null != config) {
     void 0 !== config.ref &&
-      ((ref = config.ref), (owner = ReactCurrentOwner.current));
+      (enableRefAsProp || (ref = config.ref),
+      (owner = ReactCurrentOwner.current));
     void 0 !== config.key && (key = "" + config.key);
     if (element.type && element.type.defaultProps)
       var defaultProps = element.type.defaultProps;
     for (propName in config)
-      hasOwnProperty.call(config, propName) &&
-        "key" !== propName &&
-        "ref" !== propName &&
-        "__self" !== propName &&
-        "__source" !== propName &&
+      !hasOwnProperty.call(config, propName) ||
+        "key" === propName ||
+        (!enableRefAsProp && "ref" === propName) ||
+        "__self" === propName ||
+        "__source" === propName ||
+        (enableRefAsProp && "ref" === propName && void 0 === config.ref) ||
         (props[propName] =
           void 0 === config[propName] && void 0 !== defaultProps
             ? defaultProps[propName]
@@ -628,4 +635,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-8284b06d";
+exports.version = "18.3.0-www-classic-523eda18";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
index 69ade073dbb7d..ae4f620bb39ad 100644
--- a/compiled/facebook-www/React-prod.modern.js
+++ b/compiled/facebook-www/React-prod.modern.js
@@ -84,6 +84,7 @@ var isArrayImpl = Array.isArray,
   dynamicFeatureFlags = require("ReactFeatureFlags"),
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactCurrentDispatcher = { current: null },
   ReactCurrentCache = { current: null },
   ReactCurrentBatchConfig = { transition: null },
@@ -96,6 +97,8 @@ var isArrayImpl = Array.isArray,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function ReactElement(type, key, _ref, self, source, owner, props) {
+  enableRefAsProp &&
+    ((_ref = props.ref), (_ref = void 0 !== _ref ? _ref : null));
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
@@ -112,11 +115,11 @@ function jsxProd(type, config, maybeKey) {
     ref = null;
   void 0 !== maybeKey && (key = "" + maybeKey);
   void 0 !== config.key && (key = "" + config.key);
-  void 0 !== config.ref && (ref = config.ref);
+  void 0 === config.ref || enableRefAsProp || (ref = config.ref);
   for (propName in config)
     hasOwnProperty.call(config, propName) &&
       "key" !== propName &&
-      "ref" !== propName &&
+      (enableRefAsProp || "ref" !== propName) &&
       (props[propName] = config[propName]);
   if (type && type.defaultProps)
     for (propName in ((config = type.defaultProps), config))
@@ -135,7 +138,7 @@ function cloneAndReplaceKey(oldElement, newKey) {
   return ReactElement(
     oldElement.type,
     newKey,
-    oldElement.ref,
+    enableRefAsProp ? null : oldElement.ref,
     void 0,
     void 0,
     oldElement._owner,
@@ -397,20 +400,22 @@ exports.cloneElement = function (element, config, children) {
     );
   var props = assign({}, element.props),
     key = element.key,
-    ref = element.ref,
+    ref = enableRefAsProp ? null : element.ref,
     owner = element._owner;
   if (null != config) {
     void 0 !== config.ref &&
-      ((ref = config.ref), (owner = ReactCurrentOwner.current));
+      (enableRefAsProp || (ref = config.ref),
+      (owner = ReactCurrentOwner.current));
     void 0 !== config.key && (key = "" + config.key);
     if (element.type && element.type.defaultProps)
       var defaultProps = element.type.defaultProps;
     for (propName in config)
-      hasOwnProperty.call(config, propName) &&
-        "key" !== propName &&
-        "ref" !== propName &&
-        "__self" !== propName &&
-        "__source" !== propName &&
+      !hasOwnProperty.call(config, propName) ||
+        "key" === propName ||
+        (!enableRefAsProp && "ref" === propName) ||
+        "__self" === propName ||
+        "__source" === propName ||
+        (enableRefAsProp && "ref" === propName && void 0 === config.ref) ||
         (props[propName] =
           void 0 === config[propName] && void 0 !== defaultProps
             ? defaultProps[propName]
@@ -453,12 +458,14 @@ exports.createElement = function (type, config, children) {
     key = null,
     ref = null;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (ref = config.ref),
+    for (propName in (void 0 === config.ref ||
+      enableRefAsProp ||
+      (ref = config.ref),
     void 0 !== config.key && (key = "" + config.key),
     config))
       hasOwnProperty.call(config, propName) &&
         "key" !== propName &&
-        "ref" !== propName &&
+        (enableRefAsProp || "ref" !== propName) &&
         "__self" !== propName &&
         "__source" !== propName &&
         (props[propName] = config[propName]);
@@ -620,4 +627,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-eb7ac9a1";
+exports.version = "18.3.0-www-modern-16a3d0dd";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
index e96c7ad0d8690..6b93899284094 100644
--- a/compiled/facebook-www/React-profiling.classic.js
+++ b/compiled/facebook-www/React-profiling.classic.js
@@ -89,6 +89,7 @@ var isArrayImpl = Array.isArray,
   dynamicFeatureFlags = require("ReactFeatureFlags"),
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactCurrentDispatcher = { current: null },
   ReactCurrentCache = { current: null },
   ReactCurrentBatchConfig = { transition: null },
@@ -101,6 +102,8 @@ var isArrayImpl = Array.isArray,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function ReactElement(type, key, _ref, self, source, owner, props) {
+  enableRefAsProp &&
+    ((_ref = props.ref), (_ref = void 0 !== _ref ? _ref : null));
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
@@ -117,11 +120,11 @@ function jsxProd(type, config, maybeKey) {
     ref = null;
   void 0 !== maybeKey && (key = "" + maybeKey);
   void 0 !== config.key && (key = "" + config.key);
-  void 0 !== config.ref && (ref = config.ref);
+  void 0 === config.ref || enableRefAsProp || (ref = config.ref);
   for (propName in config)
     hasOwnProperty.call(config, propName) &&
       "key" !== propName &&
-      "ref" !== propName &&
+      (enableRefAsProp || "ref" !== propName) &&
       (props[propName] = config[propName]);
   if (type && type.defaultProps)
     for (propName in ((config = type.defaultProps), config))
@@ -142,12 +145,14 @@ function createElement(type, config, children) {
     key = null,
     ref = null;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (ref = config.ref),
+    for (propName in (void 0 === config.ref ||
+      enableRefAsProp ||
+      (ref = config.ref),
     void 0 !== config.key && (key = "" + config.key),
     config))
       hasOwnProperty.call(config, propName) &&
         "key" !== propName &&
-        "ref" !== propName &&
+        (enableRefAsProp || "ref" !== propName) &&
         "__self" !== propName &&
         "__source" !== propName &&
         (props[propName] = config[propName]);
@@ -176,7 +181,7 @@ function cloneAndReplaceKey(oldElement, newKey) {
   return ReactElement(
     oldElement.type,
     newKey,
-    oldElement.ref,
+    enableRefAsProp ? null : oldElement.ref,
     void 0,
     void 0,
     oldElement._owner,
@@ -438,20 +443,22 @@ exports.cloneElement = function (element, config, children) {
     );
   var props = assign({}, element.props),
     key = element.key,
-    ref = element.ref,
+    ref = enableRefAsProp ? null : element.ref,
     owner = element._owner;
   if (null != config) {
     void 0 !== config.ref &&
-      ((ref = config.ref), (owner = ReactCurrentOwner.current));
+      (enableRefAsProp || (ref = config.ref),
+      (owner = ReactCurrentOwner.current));
     void 0 !== config.key && (key = "" + config.key);
     if (element.type && element.type.defaultProps)
       var defaultProps = element.type.defaultProps;
     for (propName in config)
-      hasOwnProperty.call(config, propName) &&
-        "key" !== propName &&
-        "ref" !== propName &&
-        "__self" !== propName &&
-        "__source" !== propName &&
+      !hasOwnProperty.call(config, propName) ||
+        "key" === propName ||
+        (!enableRefAsProp && "ref" === propName) ||
+        "__self" === propName ||
+        "__source" === propName ||
+        (enableRefAsProp && "ref" === propName && void 0 === config.ref) ||
         (props[propName] =
           void 0 === config[propName] && void 0 !== defaultProps
             ? defaultProps[propName]
@@ -632,7 +639,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-9d08c2e5";
+exports.version = "18.3.0-www-classic-d95f23f2";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
index 74c53d64da221..82685169134d7 100644
--- a/compiled/facebook-www/React-profiling.modern.js
+++ b/compiled/facebook-www/React-profiling.modern.js
@@ -88,6 +88,7 @@ var isArrayImpl = Array.isArray,
   dynamicFeatureFlags = require("ReactFeatureFlags"),
   enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactCurrentDispatcher = { current: null },
   ReactCurrentCache = { current: null },
   ReactCurrentBatchConfig = { transition: null },
@@ -100,6 +101,8 @@ var isArrayImpl = Array.isArray,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function ReactElement(type, key, _ref, self, source, owner, props) {
+  enableRefAsProp &&
+    ((_ref = props.ref), (_ref = void 0 !== _ref ? _ref : null));
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
@@ -116,11 +119,11 @@ function jsxProd(type, config, maybeKey) {
     ref = null;
   void 0 !== maybeKey && (key = "" + maybeKey);
   void 0 !== config.key && (key = "" + config.key);
-  void 0 !== config.ref && (ref = config.ref);
+  void 0 === config.ref || enableRefAsProp || (ref = config.ref);
   for (propName in config)
     hasOwnProperty.call(config, propName) &&
       "key" !== propName &&
-      "ref" !== propName &&
+      (enableRefAsProp || "ref" !== propName) &&
       (props[propName] = config[propName]);
   if (type && type.defaultProps)
     for (propName in ((config = type.defaultProps), config))
@@ -139,7 +142,7 @@ function cloneAndReplaceKey(oldElement, newKey) {
   return ReactElement(
     oldElement.type,
     newKey,
-    oldElement.ref,
+    enableRefAsProp ? null : oldElement.ref,
     void 0,
     void 0,
     oldElement._owner,
@@ -401,20 +404,22 @@ exports.cloneElement = function (element, config, children) {
     );
   var props = assign({}, element.props),
     key = element.key,
-    ref = element.ref,
+    ref = enableRefAsProp ? null : element.ref,
     owner = element._owner;
   if (null != config) {
     void 0 !== config.ref &&
-      ((ref = config.ref), (owner = ReactCurrentOwner.current));
+      (enableRefAsProp || (ref = config.ref),
+      (owner = ReactCurrentOwner.current));
     void 0 !== config.key && (key = "" + config.key);
     if (element.type && element.type.defaultProps)
       var defaultProps = element.type.defaultProps;
     for (propName in config)
-      hasOwnProperty.call(config, propName) &&
-        "key" !== propName &&
-        "ref" !== propName &&
-        "__self" !== propName &&
-        "__source" !== propName &&
+      !hasOwnProperty.call(config, propName) ||
+        "key" === propName ||
+        (!enableRefAsProp && "ref" === propName) ||
+        "__self" === propName ||
+        "__source" === propName ||
+        (enableRefAsProp && "ref" === propName && void 0 === config.ref) ||
         (props[propName] =
           void 0 === config[propName] && void 0 !== defaultProps
             ? defaultProps[propName]
@@ -457,12 +462,14 @@ exports.createElement = function (type, config, children) {
     key = null,
     ref = null;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (ref = config.ref),
+    for (propName in (void 0 === config.ref ||
+      enableRefAsProp ||
+      (ref = config.ref),
     void 0 !== config.key && (key = "" + config.key),
     config))
       hasOwnProperty.call(config, propName) &&
         "key" !== propName &&
-        "ref" !== propName &&
+        (enableRefAsProp || "ref" !== propName) &&
         "__self" !== propName &&
         "__source" !== propName &&
         (props[propName] = config[propName]);
@@ -624,7 +631,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-df6fe9f7";
+exports.version = "18.3.0-www-modern-12626cf3";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
index af733f64a46e6..78eeaab49b6af 100644
--- a/compiled/facebook-www/ReactART-dev.classic.js
+++ b/compiled/facebook-www/ReactART-dev.classic.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-classic-cbef9601";
+    var ReactVersion = "18.3.0-www-classic-2f254d96";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -188,7 +188,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, false is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -6458,7 +6459,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -6478,6 +6485,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -14678,7 +14710,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -16005,7 +16051,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
index 58f45a7b13cc4..93e27daf402a3 100644
--- a/compiled/facebook-www/ReactART-dev.modern.js
+++ b/compiled/facebook-www/ReactART-dev.modern.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-modern-e9e265be";
+    var ReactVersion = "18.3.0-www-modern-388a31ab";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -188,7 +188,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, true is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -6223,7 +6224,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -6243,6 +6250,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -14402,7 +14434,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -15699,7 +15745,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
index aa6d947060a80..ca1787d1b8082 100644
--- a/compiled/facebook-www/ReactART-prod.classic.js
+++ b/compiled/facebook-www/ReactART-prod.classic.js
@@ -84,6 +84,7 @@ var ReactSharedInternals =
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -1864,13 +1865,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -4378,12 +4390,17 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
@@ -10577,7 +10594,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-ca1292bb",
+    version: "18.3.0-www-classic-36516bcc",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1320 = {
@@ -10608,7 +10625,7 @@ var internals$jscomp$inline_1320 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-ca1292bb"
+  reconcilerVersion: "18.3.0-www-classic-36516bcc"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1321 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
index e56a8c2d01136..b11e58662f2de 100644
--- a/compiled/facebook-www/ReactART-prod.modern.js
+++ b/compiled/facebook-www/ReactART-prod.modern.js
@@ -84,6 +84,7 @@ var ReactSharedInternals =
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -1660,13 +1661,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -4159,12 +4171,17 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
@@ -10232,7 +10249,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-0a467636",
+    version: "18.3.0-www-modern-630a2790",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1300 = {
@@ -10263,7 +10280,7 @@ var internals$jscomp$inline_1300 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-0a467636"
+  reconcilerVersion: "18.3.0-www-modern-630a2790"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
index 525d438307bbc..d5c6059dd6d6b 100644
--- a/compiled/facebook-www/ReactDOM-dev.classic.js
+++ b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -153,7 +153,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, false is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -11105,7 +11106,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -11125,6 +11132,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -19551,7 +19583,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -21056,7 +21102,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
@@ -35894,7 +35940,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-classic-69ce38b6";
+    var ReactVersion = "18.3.0-www-classic-ba863f98";
 
     function createPortal$1(
       children,
diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
index a269ab1d2f839..e34f908086dd1 100644
--- a/compiled/facebook-www/ReactDOM-dev.modern.js
+++ b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -139,7 +139,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, true is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -11056,7 +11057,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -11076,6 +11083,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -19461,7 +19493,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -20936,7 +20982,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
@@ -35730,7 +35776,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-2372e606";
+    var ReactVersion = "18.3.0-www-modern-fbeafe0c";
 
     function createPortal$1(
       children,
diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
index 6b37e6f50a19a..10cce320f6361 100644
--- a/compiled/facebook-www/ReactDOM-prod.classic.js
+++ b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -63,6 +63,7 @@ var ReactSharedInternals =
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -2595,13 +2596,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5286,22 +5298,27 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -17161,7 +17178,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1819 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-380fe00f",
+  version: "18.3.0-www-classic-28d4f1a1",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2179 = {
@@ -17191,7 +17208,7 @@ var internals$jscomp$inline_2179 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-380fe00f"
+  reconcilerVersion: "18.3.0-www-classic-28d4f1a1"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2180 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17534,4 +17551,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-classic-380fe00f";
+exports.version = "18.3.0-www-classic-28d4f1a1";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
index f9c6cee632050..06d20507a1f9e 100644
--- a/compiled/facebook-www/ReactDOM-prod.modern.js
+++ b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -66,6 +66,7 @@ var assign = Object.assign,
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactSharedInternals =
     React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher,
@@ -2478,13 +2479,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5154,22 +5166,27 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -16677,7 +16694,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1778 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-e062351c",
+  version: "18.3.0-www-modern-469be386",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2143 = {
@@ -16708,7 +16725,7 @@ var internals$jscomp$inline_2143 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-e062351c"
+  reconcilerVersion: "18.3.0-www-modern-469be386"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2144 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16979,4 +16996,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-modern-e062351c";
+exports.version = "18.3.0-www-modern-469be386";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
index 1e70a259437d5..f9405321ff5cc 100644
--- a/compiled/facebook-www/ReactDOM-profiling.classic.js
+++ b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -67,6 +67,7 @@ var ReactSharedInternals =
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   enableProfilerNestedUpdateScheduledHook =
     dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook,
   enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler,
@@ -2735,13 +2736,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5499,24 +5511,29 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   enableSchedulingProfiler && markComponentRenderStarted(workInProgress);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   enableSchedulingProfiler && markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -17930,7 +17947,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1904 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-e2f0d381",
+  version: "18.3.0-www-classic-86040999",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17974,7 +17991,7 @@ var devToolsConfig$jscomp$inline_1904 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-e2f0d381"
+  reconcilerVersion: "18.3.0-www-classic-86040999"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -18304,7 +18321,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-classic-e2f0d381";
+exports.version = "18.3.0-www-classic-86040999";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
index 502850d232480..16abce0867ba1 100644
--- a/compiled/facebook-www/ReactDOM-profiling.modern.js
+++ b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -70,6 +70,7 @@ var assign = Object.assign,
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   enableProfilerNestedUpdateScheduledHook =
     dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook,
   enableSchedulingProfiler = dynamicFeatureFlags.enableSchedulingProfiler,
@@ -2618,13 +2619,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5367,24 +5379,29 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   enableSchedulingProfiler && markComponentRenderStarted(workInProgress);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   enableSchedulingProfiler && markComponentRenderStopped();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -17440,7 +17457,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1863 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-e9e265be",
+  version: "18.3.0-www-modern-388a31ab",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -17485,7 +17502,7 @@ var devToolsConfig$jscomp$inline_1863 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-e9e265be"
+  reconcilerVersion: "18.3.0-www-modern-388a31ab"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -17743,7 +17760,7 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-modern-e9e265be";
+exports.version = "18.3.0-www-modern-388a31ab";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
index d7a042e5b6553..2ad7dbf9ae306 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "18.3.0-www-classic-1805c8f4";
+    var ReactVersion = "18.3.0-www-classic-53767808";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -681,8 +681,8 @@ if (__DEV__) {
     var enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
       enableUseDeferredValueInitialArg =
         dynamicFeatureFlags.enableUseDeferredValueInitialArg,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, false is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
     var enableFloat = true;
 
     // $FlowFixMe[method-unbinding]
@@ -12173,7 +12173,21 @@ if (__DEV__) {
       task.componentStack = createFunctionComponentStack(task, type.render);
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in props) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in props) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = props[key];
+          }
+        }
+      } else {
         propsWithoutRef = props;
       }
 
@@ -12687,7 +12701,13 @@ if (__DEV__) {
             var props = element.props;
             var ref;
 
-            {
+            if (enableRefAsProp) {
+              // TODO: This is a temporary, intermediate step. Once the feature
+              // flag is removed, we should get the ref off the props object right
+              // before using it.
+              var refProp = props.ref;
+              ref = refProp !== undefined ? refProp : null;
+            } else {
               ref = element.ref;
             }
 
diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
index 961961576ed2f..7c54444bfeb5f 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "18.3.0-www-modern-a9f7c4dc";
+    var ReactVersion = "18.3.0-www-modern-4b346c06";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -681,8 +681,8 @@ if (__DEV__) {
     var enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
       enableUseDeferredValueInitialArg =
         dynamicFeatureFlags.enableUseDeferredValueInitialArg,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableFloat = true;
 
     // $FlowFixMe[method-unbinding]
@@ -12083,7 +12083,21 @@ if (__DEV__) {
       task.componentStack = createFunctionComponentStack(task, type.render);
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in props) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in props) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = props[key];
+          }
+        }
+      } else {
         propsWithoutRef = props;
       }
 
@@ -12597,7 +12611,13 @@ if (__DEV__) {
             var props = element.props;
             var ref;
 
-            {
+            if (enableRefAsProp) {
+              // TODO: This is a temporary, intermediate step. Once the feature
+              // flag is removed, we should get the ref off the props object right
+              // before using it.
+              var refProp = props.ref;
+              ref = refProp !== undefined ? refProp : null;
+            } else {
               ref = element.ref;
             }
 
diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
index dbe62a22594a8..04604e92a7617 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -133,6 +133,7 @@ var assign = Object.assign,
   enableUseDeferredValueInitialArg =
     dynamicFeatureFlags.enableUseDeferredValueInitialArg,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   VALID_ATTRIBUTE_NAME_REGEX = RegExp(
     "^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"
@@ -2592,16 +2593,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1595 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1596 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1609 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1610 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1611 = new Set(),
-    JSCompiler_object_inline_styles_1612 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1613 = new Set(),
-    JSCompiler_object_inline_scripts_1614 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1615 = new Set(),
-    JSCompiler_object_inline_preloads_1616 = {
+  var JSCompiler_object_inline_preconnects_1610 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1611 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1612 = new Set(),
+    JSCompiler_object_inline_styles_1613 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1614 = new Set(),
+    JSCompiler_object_inline_scripts_1615 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1616 = new Set(),
+    JSCompiler_object_inline_preloads_1617 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2638,7 +2639,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1613.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1614.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2679,7 +2680,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1613.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1614.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2694,7 +2695,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1595,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1596,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2714,14 +2715,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1609,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1610,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1611,
-    styles: JSCompiler_object_inline_styles_1612,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1613,
-    scripts: JSCompiler_object_inline_scripts_1614,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1615,
-    preloads: JSCompiler_object_inline_preloads_1616,
+    preconnects: JSCompiler_object_inline_preconnects_1610,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1611,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1612,
+    styles: JSCompiler_object_inline_styles_1613,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1614,
+    scripts: JSCompiler_object_inline_scripts_1615,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1616,
+    preloads: JSCompiler_object_inline_preloads_1617,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -3786,16 +3787,16 @@ function renderContextProvider(request, task, keyPath, context, props) {
 function renderElement(request, task, keyPath, type, props, ref) {
   if ("function" === typeof type)
     if (type.prototype && type.prototype.isReactComponent) {
-      ref = task.componentStack;
+      var previousComponentStack = task.componentStack;
       task.componentStack = { tag: 2, parent: task.componentStack, type: type };
-      var maskedContext = getMaskedContext(type, task.legacyContext);
+      ref = getMaskedContext(type, task.legacyContext);
       var JSCompiler_inline_result = type.contextType;
       JSCompiler_inline_result = new type(
         props,
         "object" === typeof JSCompiler_inline_result &&
         null !== JSCompiler_inline_result
           ? JSCompiler_inline_result._currentValue2
-          : maskedContext
+          : ref
       );
       var initialState =
         void 0 !== JSCompiler_inline_result.state
@@ -3810,7 +3811,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
       JSCompiler_inline_result.context =
         "object" === typeof contextType && null !== contextType
           ? contextType._currentValue2
-          : maskedContext;
+          : ref;
       contextType = type.getDerivedStateFromProps;
       "function" === typeof contextType &&
         ((contextType = contextType(props, initialState)),
@@ -3865,7 +3866,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
                       JSCompiler_inline_result,
                       internalInstance,
                       props,
-                      maskedContext
+                      ref
                     )
                   : partial;
               null != partial &&
@@ -3878,15 +3879,15 @@ function renderElement(request, task, keyPath, type, props, ref) {
           }
         } else internalInstance.queue = null;
       props = JSCompiler_inline_result.render();
-      maskedContext = type.childContextTypes;
-      if (null !== maskedContext && void 0 !== maskedContext) {
+      ref = type.childContextTypes;
+      if (null !== ref && void 0 !== ref) {
         keyPath = task.legacyContext;
         if ("function" !== typeof JSCompiler_inline_result.getChildContext)
           type = keyPath;
         else {
           JSCompiler_inline_result = JSCompiler_inline_result.getChildContext();
           for (var contextKey in JSCompiler_inline_result)
-            if (!(contextKey in maskedContext))
+            if (!(contextKey in ref))
               throw Error(
                 formatProdErrorMessage(
                   108,
@@ -3904,16 +3905,23 @@ function renderElement(request, task, keyPath, type, props, ref) {
           (task.keyPath = keyPath),
           renderNodeDestructive(request, task, props, -1),
           (task.keyPath = type);
-      task.componentStack = ref;
+      task.componentStack = previousComponentStack;
     } else
-      (ref = getMaskedContext(type, task.legacyContext)),
+      (previousComponentStack = getMaskedContext(type, task.legacyContext)),
         (contextKey = task.componentStack),
         (task.componentStack = {
           tag: 1,
           parent: task.componentStack,
           type: type
         }),
-        (props = renderWithHooks(request, task, keyPath, type, props, ref)),
+        (props = renderWithHooks(
+          request,
+          task,
+          keyPath,
+          type,
+          props,
+          previousComponentStack
+        )),
         finishFunctionComponent(
           request,
           task,
@@ -3927,33 +3935,33 @@ function renderElement(request, task, keyPath, type, props, ref) {
   else if ("string" === typeof type) {
     contextKey = task.componentStack;
     task.componentStack = createBuiltInComponentStack(task, type);
-    ref = task.blockedSegment;
-    if (null === ref)
-      (ref = props.children),
+    previousComponentStack = task.blockedSegment;
+    if (null === previousComponentStack)
+      (previousComponentStack = props.children),
         (JSCompiler_inline_result = task.formatContext),
-        (maskedContext = task.keyPath),
+        (ref = task.keyPath),
         (task.formatContext = getChildFormatContext(
           JSCompiler_inline_result,
           type,
           props
         )),
         (task.keyPath = keyPath),
-        renderNode(request, task, ref, -1),
+        renderNode(request, task, previousComponentStack, -1),
         (task.formatContext = JSCompiler_inline_result),
-        (task.keyPath = maskedContext);
+        (task.keyPath = ref);
     else {
-      maskedContext = pushStartInstance(
-        ref.chunks,
+      ref = pushStartInstance(
+        previousComponentStack.chunks,
         type,
         props,
         request.resumableState,
         request.renderState,
         task.hoistableState,
         task.formatContext,
-        ref.lastPushedText,
+        previousComponentStack.lastPushedText,
         task.isFallback
       );
-      ref.lastPushedText = !1;
+      previousComponentStack.lastPushedText = !1;
       JSCompiler_inline_result = task.formatContext;
       internalInstance = task.keyPath;
       task.formatContext = getChildFormatContext(
@@ -3962,11 +3970,11 @@ function renderElement(request, task, keyPath, type, props, ref) {
         props
       );
       task.keyPath = keyPath;
-      renderNode(request, task, maskedContext, -1);
+      renderNode(request, task, ref, -1);
       task.formatContext = JSCompiler_inline_result;
       task.keyPath = internalInstance;
       a: {
-        keyPath = ref.chunks;
+        keyPath = previousComponentStack.chunks;
         request = request.resumableState;
         switch (type) {
           case "title":
@@ -4002,7 +4010,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
         }
         keyPath.push(endChunkForTag(type));
       }
-      ref.lastPushedText = !1;
+      previousComponentStack.lastPushedText = !1;
     }
     task.componentStack = contextKey;
   } else {
@@ -4107,16 +4115,16 @@ function renderElement(request, task, keyPath, type, props, ref) {
           } catch (error) {
             (contentRootSegment.status = 4),
               (internalInstance.status = 4),
-              (JSCompiler_inline_result = getThrownInfo(
+              (previousComponentStack = getThrownInfo(
                 request,
                 task.componentStack
               )),
-              (maskedContext = logRecoverableError(
+              (JSCompiler_inline_result = logRecoverableError(
                 request,
                 error,
-                JSCompiler_inline_result
+                previousComponentStack
               )),
-              (internalInstance.errorDigest = maskedContext),
+              (internalInstance.errorDigest = JSCompiler_inline_result),
               untrackBoundary(request, internalInstance);
           } finally {
             (task.blockedBoundary = contextKey),
@@ -4125,22 +4133,26 @@ function renderElement(request, task, keyPath, type, props, ref) {
               (task.keyPath = oldReplace),
               (task.componentStack = contextType);
           }
-          JSCompiler_inline_result = [
+          previousComponentStack = [
             keyPath[0],
             "Suspense Fallback",
             keyPath[2]
           ];
-          maskedContext = request.trackedPostpones;
-          null !== maskedContext &&
+          JSCompiler_inline_result = request.trackedPostpones;
+          null !== JSCompiler_inline_result &&
             ((contextType = [
-              JSCompiler_inline_result[1],
-              JSCompiler_inline_result[2],
+              previousComponentStack[1],
+              previousComponentStack[2],
               [],
               null
             ]),
-            maskedContext.workingMap.set(JSCompiler_inline_result, contextType),
+            JSCompiler_inline_result.workingMap.set(
+              previousComponentStack,
+              contextType
+            ),
             5 === internalInstance.status
-              ? (maskedContext.workingMap.get(keyPath)[4] = contextType)
+              ? (JSCompiler_inline_result.workingMap.get(keyPath)[4] =
+                  contextType)
               : (internalInstance.trackedFallbackNode = contextType));
           task = createRenderTask(
             request,
@@ -4151,7 +4163,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
             initialState,
             internalInstance.fallbackState,
             props,
-            JSCompiler_inline_result,
+            previousComponentStack,
             task.formatContext,
             task.legacyContext,
             task.context,
@@ -4172,12 +4184,18 @@ function renderElement(request, task, keyPath, type, props, ref) {
             parent: task.componentStack,
             type: type.render
           };
+          if (enableRefAsProp && "ref" in props)
+            for (internalInstance in ((previousComponentStack = {}), props))
+              "ref" !== internalInstance &&
+                (previousComponentStack[internalInstance] =
+                  props[internalInstance]);
+          else previousComponentStack = props;
           props = renderWithHooks(
             request,
             task,
             keyPath,
             type.render,
-            props,
+            previousComponentStack,
             ref
           );
           finishFunctionComponent(
@@ -4214,8 +4232,8 @@ function renderElement(request, task, keyPath, type, props, ref) {
         case REACT_LAZY_TYPE:
           contextKey = task.componentStack;
           task.componentStack = createBuiltInComponentStack(task, "Lazy");
-          ref = type._init;
-          type = ref(type._payload);
+          previousComponentStack = type._init;
+          type = previousComponentStack(type._payload);
           props = resolveDefaultProps(type, props);
           renderElement(request, task, keyPath, type, props, void 0);
           task.componentStack = contextKey;
@@ -4267,14 +4285,18 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
           var type = node$jscomp$0.type,
             key = node$jscomp$0.key,
             props = node$jscomp$0.props;
-          var ref = node$jscomp$0.ref;
+          enableRefAsProp
+            ? ((node$jscomp$0 = props.ref),
+              (node$jscomp$0 = void 0 !== node$jscomp$0 ? node$jscomp$0 : null))
+            : (node$jscomp$0 = node$jscomp$0.ref);
           var name = getComponentNameFromType(type),
             keyOrIndex =
               null == key ? (-1 === childIndex ? 0 : childIndex) : key;
           key = [task.keyPath, name, keyOrIndex];
           if (null !== task.replay)
             a: {
-              var replay = task.replay;
+              var ref = node$jscomp$0,
+                replay = task.replay;
               childIndex = replay.nodes;
               for (
                 node$jscomp$0 = 0;
@@ -4339,10 +4361,10 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                         )
                       );
                     b: {
-                      replay = void 0;
-                      type = node[5];
-                      ref = node[2];
-                      name = node[3];
+                      type = void 0;
+                      replay = node[5];
+                      name = node[2];
+                      ref = node[3];
                       keyOrIndex = null === node[4] ? [] : node[4][2];
                       node = null === node[4] ? null : node[4][3];
                       var previousComponentStack = task.componentStack,
@@ -4360,12 +4382,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                           fallbackAbortSet
                         );
                       resumedBoundary.parentFlushed = !0;
-                      resumedBoundary.rootSegmentID = type;
+                      resumedBoundary.rootSegmentID = replay;
                       task.blockedBoundary = resumedBoundary;
                       task.hoistableState = resumedBoundary.contentState;
                       task.replay = {
-                        nodes: ref,
-                        slots: name,
+                        nodes: name,
+                        slots: ref,
                         pendingTasks: 1
                       };
                       try {
@@ -4390,12 +4412,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                             request,
                             task.componentStack
                           )),
-                          (replay = logRecoverableError(
+                          (type = logRecoverableError(
                             request,
                             error,
                             childNodes
                           )),
-                          (resumedBoundary.errorDigest = replay),
+                          (resumedBoundary.errorDigest = type),
                           task.replay.pendingTasks--,
                           request.clientRenderedBoundaries.push(
                             resumedBoundary
@@ -4432,15 +4454,15 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                 }
               }
             }
-          else renderElement(request, task, key, type, props, ref);
+          else renderElement(request, task, key, type, props, node$jscomp$0);
           return;
         case REACT_PORTAL_TYPE:
           throw Error(formatProdErrorMessage(257));
         case REACT_LAZY_TYPE:
           props = task.componentStack;
           task.componentStack = createBuiltInComponentStack(task, "Lazy");
-          key = node$jscomp$0._init;
-          node$jscomp$0 = key(node$jscomp$0._payload);
+          childNodes = node$jscomp$0._init;
+          node$jscomp$0 = childNodes(node$jscomp$0._payload);
           task.componentStack = props;
           renderNodeDestructive(request, task, node$jscomp$0, childIndex);
           return;
@@ -4458,10 +4480,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
       if (props && (props = props.call(node$jscomp$0))) {
         node$jscomp$0 = props.next();
         if (!node$jscomp$0.done) {
-          key = [];
-          do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
+          childNodes = [];
+          do
+            childNodes.push(node$jscomp$0.value),
+              (node$jscomp$0 = props.next());
           while (!node$jscomp$0.done);
-          renderChildrenArray(request, task, key, childIndex);
+          renderChildrenArray(request, task, childNodes, childIndex);
         }
         return;
       }
@@ -5679,4 +5703,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-09361a1f";
+exports.version = "18.3.0-www-classic-5ac0969c";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
index 9d612566683d1..4c82d29a8b665 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -133,6 +133,7 @@ var assign = Object.assign,
   enableUseDeferredValueInitialArg =
     dynamicFeatureFlags.enableUseDeferredValueInitialArg,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   VALID_ATTRIBUTE_NAME_REGEX = RegExp(
     "^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"
@@ -2592,16 +2593,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1582 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1583 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1596 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1597 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1598 = new Set(),
-    JSCompiler_object_inline_styles_1599 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1600 = new Set(),
-    JSCompiler_object_inline_scripts_1601 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1602 = new Set(),
-    JSCompiler_object_inline_preloads_1603 = {
+  var JSCompiler_object_inline_preconnects_1597 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1598 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1599 = new Set(),
+    JSCompiler_object_inline_styles_1600 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1601 = new Set(),
+    JSCompiler_object_inline_scripts_1602 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1603 = new Set(),
+    JSCompiler_object_inline_preloads_1604 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2638,7 +2639,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1600.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1601.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2679,7 +2680,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1600.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1601.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2694,7 +2695,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1582,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1583,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2714,14 +2715,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     charsetChunks: [],
     viewportChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1596,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1597,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1598,
-    styles: JSCompiler_object_inline_styles_1599,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1600,
-    scripts: JSCompiler_object_inline_scripts_1601,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1602,
-    preloads: JSCompiler_object_inline_preloads_1603,
+    preconnects: JSCompiler_object_inline_preconnects_1597,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1598,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1599,
+    styles: JSCompiler_object_inline_styles_1600,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1601,
+    scripts: JSCompiler_object_inline_scripts_1602,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1603,
+    preloads: JSCompiler_object_inline_preloads_1604,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
   };
@@ -4023,18 +4024,18 @@ function renderElement(request, task, keyPath, type, props, ref) {
           JSCompiler_inline_result = props.fallback;
           var content = props.children;
           props = new Set();
-          contextType = createSuspenseBoundary(request, props);
+          contextType$jscomp$0 = createSuspenseBoundary(request, props);
           null !== request.trackedPostpones &&
-            (contextType.trackedContentKeyPath = keyPath);
-          initialState = createPendingSegment(
+            (contextType$jscomp$0.trackedContentKeyPath = keyPath);
+          partial = createPendingSegment(
             request,
             parentSegment.chunks.length,
-            contextType,
+            contextType$jscomp$0,
             task.formatContext,
             !1,
             !1
           );
-          parentSegment.children.push(initialState);
+          parentSegment.children.push(partial);
           parentSegment.lastPushedText = !1;
           var contentRootSegment = createPendingSegment(
             request,
@@ -4045,8 +4046,8 @@ function renderElement(request, task, keyPath, type, props, ref) {
             !1
           );
           contentRootSegment.parentFlushed = !0;
-          task.blockedBoundary = contextType;
-          task.hoistableState = contextType.contentState;
+          task.blockedBoundary = contextType$jscomp$0;
+          task.hoistableState = contextType$jscomp$0.contentState;
           task.blockedSegment = contentRootSegment;
           task.keyPath = keyPath;
           try {
@@ -4057,27 +4058,21 @@ function renderElement(request, task, keyPath, type, props, ref) {
                   contentRootSegment.textEmbedded &&
                   contentRootSegment.chunks.push("\x3c!-- --\x3e")),
               (contentRootSegment.status = 1),
-              queueCompletedSegment(contextType, contentRootSegment),
-              0 === contextType.pendingTasks && 0 === contextType.status)
+              queueCompletedSegment(contextType$jscomp$0, contentRootSegment),
+              0 === contextType$jscomp$0.pendingTasks &&
+                0 === contextType$jscomp$0.status)
             ) {
-              contextType.status = 1;
+              contextType$jscomp$0.status = 1;
               task.componentStack = previousComponentStack;
               break a;
             }
           } catch (error) {
             (contentRootSegment.status = 4),
-              (contextType.status = 4),
-              (contextType$jscomp$0 = getThrownInfo(
-                request,
-                task.componentStack
-              )),
-              (partial = logRecoverableError(
-                request,
-                error,
-                contextType$jscomp$0
-              )),
-              (contextType.errorDigest = partial),
-              untrackBoundary(request, contextType);
+              (contextType$jscomp$0.status = 4),
+              (contextType = getThrownInfo(request, task.componentStack)),
+              (initialState = logRecoverableError(request, error, contextType)),
+              (contextType$jscomp$0.errorDigest = initialState),
+              untrackBoundary(request, contextType$jscomp$0);
           } finally {
             (task.blockedBoundary = ref),
               (task.hoistableState = parentHoistableState),
@@ -4085,32 +4080,31 @@ function renderElement(request, task, keyPath, type, props, ref) {
               (task.keyPath = prevKeyPath),
               (task.componentStack = previousComponentStack);
           }
-          contextType$jscomp$0 = [keyPath[0], "Suspense Fallback", keyPath[2]];
-          partial = request.trackedPostpones;
-          null !== partial &&
+          contextType = [keyPath[0], "Suspense Fallback", keyPath[2]];
+          initialState = request.trackedPostpones;
+          null !== initialState &&
             ((previousComponentStack = [
-              contextType$jscomp$0[1],
-              contextType$jscomp$0[2],
+              contextType[1],
+              contextType[2],
               [],
               null
             ]),
-            partial.workingMap.set(
-              contextType$jscomp$0,
-              previousComponentStack
-            ),
-            5 === contextType.status
-              ? (partial.workingMap.get(keyPath)[4] = previousComponentStack)
-              : (contextType.trackedFallbackNode = previousComponentStack));
+            initialState.workingMap.set(contextType, previousComponentStack),
+            5 === contextType$jscomp$0.status
+              ? (initialState.workingMap.get(keyPath)[4] =
+                  previousComponentStack)
+              : (contextType$jscomp$0.trackedFallbackNode =
+                  previousComponentStack));
           task = createRenderTask(
             request,
             null,
             JSCompiler_inline_result,
             -1,
             ref,
-            initialState,
-            contextType.fallbackState,
+            partial,
+            contextType$jscomp$0.fallbackState,
             props,
-            contextType$jscomp$0,
+            contextType,
             task.formatContext,
             task.legacyContext,
             task.context,
@@ -4125,18 +4119,24 @@ function renderElement(request, task, keyPath, type, props, ref) {
     if ("object" === typeof type && null !== type)
       switch (type.$$typeof) {
         case REACT_FORWARD_REF_TYPE:
-          JSCompiler_inline_result = task.componentStack;
+          contextType = task.componentStack;
           task.componentStack = {
             tag: 1,
             parent: task.componentStack,
             type: type.render
           };
+          if (enableRefAsProp && "ref" in props)
+            for (JSCompiler_inline_result in ((initialState = {}), props))
+              "ref" !== JSCompiler_inline_result &&
+                (initialState[JSCompiler_inline_result] =
+                  props[JSCompiler_inline_result]);
+          else initialState = props;
           props = renderWithHooks(
             request,
             task,
             keyPath,
             type.render,
-            props,
+            initialState,
             ref
           );
           finishFunctionComponent(
@@ -4148,7 +4148,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
             formStateCounter,
             formStateMatchingIndex
           );
-          task.componentStack = JSCompiler_inline_result;
+          task.componentStack = contextType;
           return;
         case REACT_MEMO_TYPE:
           type = type.type;
@@ -4226,14 +4226,18 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
           var type = node$jscomp$0.type,
             key = node$jscomp$0.key,
             props = node$jscomp$0.props;
-          var ref = node$jscomp$0.ref;
+          enableRefAsProp
+            ? ((node$jscomp$0 = props.ref),
+              (node$jscomp$0 = void 0 !== node$jscomp$0 ? node$jscomp$0 : null))
+            : (node$jscomp$0 = node$jscomp$0.ref);
           var name = getComponentNameFromType(type),
             keyOrIndex =
               null == key ? (-1 === childIndex ? 0 : childIndex) : key;
           key = [task.keyPath, name, keyOrIndex];
           if (null !== task.replay)
             a: {
-              var replay = task.replay;
+              var ref = node$jscomp$0,
+                replay = task.replay;
               childIndex = replay.nodes;
               for (
                 node$jscomp$0 = 0;
@@ -4298,10 +4302,10 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                         )
                       );
                     b: {
-                      replay = void 0;
-                      type = node[5];
-                      ref = node[2];
-                      name = node[3];
+                      type = void 0;
+                      replay = node[5];
+                      name = node[2];
+                      ref = node[3];
                       keyOrIndex = null === node[4] ? [] : node[4][2];
                       node = null === node[4] ? null : node[4][3];
                       var previousComponentStack = task.componentStack,
@@ -4319,12 +4323,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                           fallbackAbortSet
                         );
                       resumedBoundary.parentFlushed = !0;
-                      resumedBoundary.rootSegmentID = type;
+                      resumedBoundary.rootSegmentID = replay;
                       task.blockedBoundary = resumedBoundary;
                       task.hoistableState = resumedBoundary.contentState;
                       task.replay = {
-                        nodes: ref,
-                        slots: name,
+                        nodes: name,
+                        slots: ref,
                         pendingTasks: 1
                       };
                       try {
@@ -4349,12 +4353,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                             request,
                             task.componentStack
                           )),
-                          (replay = logRecoverableError(
+                          (type = logRecoverableError(
                             request,
                             error,
                             childNodes
                           )),
-                          (resumedBoundary.errorDigest = replay),
+                          (resumedBoundary.errorDigest = type),
                           task.replay.pendingTasks--,
                           request.clientRenderedBoundaries.push(
                             resumedBoundary
@@ -4391,15 +4395,15 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                 }
               }
             }
-          else renderElement(request, task, key, type, props, ref);
+          else renderElement(request, task, key, type, props, node$jscomp$0);
           return;
         case REACT_PORTAL_TYPE:
           throw Error(formatProdErrorMessage(257));
         case REACT_LAZY_TYPE:
           props = task.componentStack;
           task.componentStack = createBuiltInComponentStack(task, "Lazy");
-          key = node$jscomp$0._init;
-          node$jscomp$0 = key(node$jscomp$0._payload);
+          childNodes = node$jscomp$0._init;
+          node$jscomp$0 = childNodes(node$jscomp$0._payload);
           task.componentStack = props;
           renderNodeDestructive(request, task, node$jscomp$0, childIndex);
           return;
@@ -4417,10 +4421,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
       if (props && (props = props.call(node$jscomp$0))) {
         node$jscomp$0 = props.next();
         if (!node$jscomp$0.done) {
-          key = [];
-          do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
+          childNodes = [];
+          do
+            childNodes.push(node$jscomp$0.value),
+              (node$jscomp$0 = props.next());
           while (!node$jscomp$0.done);
-          renderChildrenArray(request, task, key, childIndex);
+          renderChildrenArray(request, task, childNodes, childIndex);
         }
         return;
       }
@@ -5638,4 +5644,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-4433d0a1";
+exports.version = "18.3.0-www-modern-654a7213";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
index 7240473e1a60d..e3cf33572b918 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -678,8 +678,8 @@ if (__DEV__) {
     var enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
       enableUseDeferredValueInitialArg =
         dynamicFeatureFlags.enableUseDeferredValueInitialArg,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableFloat = true;
 
     // $FlowFixMe[method-unbinding]
@@ -11964,7 +11964,21 @@ if (__DEV__) {
       task.componentStack = createFunctionComponentStack(task, type.render);
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in props) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in props) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = props[key];
+          }
+        }
+      } else {
         propsWithoutRef = props;
       }
 
@@ -12478,7 +12492,13 @@ if (__DEV__) {
             var props = element.props;
             var ref;
 
-            {
+            if (enableRefAsProp) {
+              // TODO: This is a temporary, intermediate step. Once the feature
+              // flag is removed, we should get the ref off the props object right
+              // before using it.
+              var refProp = props.ref;
+              ref = refProp !== undefined ? refProp : null;
+            } else {
               ref = element.ref;
             }
 
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
index 88f8729bd97a7..105575b87acb2 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -125,6 +125,7 @@ var assign = Object.assign,
   enableUseDeferredValueInitialArg =
     dynamicFeatureFlags.enableUseDeferredValueInitialArg,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   hasOwnProperty = Object.prototype.hasOwnProperty,
   VALID_ATTRIBUTE_NAME_REGEX = RegExp(
     "^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$"
@@ -3844,18 +3845,18 @@ function renderElement(request, task, keyPath, type, props, ref) {
           JSCompiler_inline_result = props.fallback;
           var content = props.children;
           props = new Set();
-          contextType = createSuspenseBoundary(request, props);
+          contextType$jscomp$0 = createSuspenseBoundary(request, props);
           null !== request.trackedPostpones &&
-            (contextType.trackedContentKeyPath = keyPath);
-          initialState = createPendingSegment(
+            (contextType$jscomp$0.trackedContentKeyPath = keyPath);
+          partial = createPendingSegment(
             request,
             parentSegment.chunks.length,
-            contextType,
+            contextType$jscomp$0,
             task.formatContext,
             !1,
             !1
           );
-          parentSegment.children.push(initialState);
+          parentSegment.children.push(partial);
           parentSegment.lastPushedText = !1;
           var contentRootSegment = createPendingSegment(
             request,
@@ -3866,8 +3867,8 @@ function renderElement(request, task, keyPath, type, props, ref) {
             !1
           );
           contentRootSegment.parentFlushed = !0;
-          task.blockedBoundary = contextType;
-          task.hoistableState = contextType.contentState;
+          task.blockedBoundary = contextType$jscomp$0;
+          task.hoistableState = contextType$jscomp$0.contentState;
           task.blockedSegment = contentRootSegment;
           task.keyPath = keyPath;
           try {
@@ -3877,27 +3878,21 @@ function renderElement(request, task, keyPath, type, props, ref) {
                 contentRootSegment.textEmbedded &&
                 contentRootSegment.chunks.push("\x3c!-- --\x3e"),
               (contentRootSegment.status = 1),
-              queueCompletedSegment(contextType, contentRootSegment),
-              0 === contextType.pendingTasks && 0 === contextType.status)
+              queueCompletedSegment(contextType$jscomp$0, contentRootSegment),
+              0 === contextType$jscomp$0.pendingTasks &&
+                0 === contextType$jscomp$0.status)
             ) {
-              contextType.status = 1;
+              contextType$jscomp$0.status = 1;
               task.componentStack = previousComponentStack;
               break a;
             }
           } catch (error) {
             (contentRootSegment.status = 4),
-              (contextType.status = 4),
-              (contextType$jscomp$0 = getThrownInfo(
-                request,
-                task.componentStack
-              )),
-              (partial = logRecoverableError(
-                request,
-                error,
-                contextType$jscomp$0
-              )),
-              (contextType.errorDigest = partial),
-              untrackBoundary(request, contextType);
+              (contextType$jscomp$0.status = 4),
+              (contextType = getThrownInfo(request, task.componentStack)),
+              (initialState = logRecoverableError(request, error, contextType)),
+              (contextType$jscomp$0.errorDigest = initialState),
+              untrackBoundary(request, contextType$jscomp$0);
           } finally {
             (task.blockedBoundary = ref),
               (task.hoistableState = parentHoistableState),
@@ -3905,32 +3900,31 @@ function renderElement(request, task, keyPath, type, props, ref) {
               (task.keyPath = prevKeyPath),
               (task.componentStack = previousComponentStack);
           }
-          contextType$jscomp$0 = [keyPath[0], "Suspense Fallback", keyPath[2]];
-          partial = request.trackedPostpones;
-          null !== partial &&
+          contextType = [keyPath[0], "Suspense Fallback", keyPath[2]];
+          initialState = request.trackedPostpones;
+          null !== initialState &&
             ((previousComponentStack = [
-              contextType$jscomp$0[1],
-              contextType$jscomp$0[2],
+              contextType[1],
+              contextType[2],
               [],
               null
             ]),
-            partial.workingMap.set(
-              contextType$jscomp$0,
-              previousComponentStack
-            ),
-            5 === contextType.status
-              ? (partial.workingMap.get(keyPath)[4] = previousComponentStack)
-              : (contextType.trackedFallbackNode = previousComponentStack));
+            initialState.workingMap.set(contextType, previousComponentStack),
+            5 === contextType$jscomp$0.status
+              ? (initialState.workingMap.get(keyPath)[4] =
+                  previousComponentStack)
+              : (contextType$jscomp$0.trackedFallbackNode =
+                  previousComponentStack));
           task = createRenderTask(
             request,
             null,
             JSCompiler_inline_result,
             -1,
             ref,
-            initialState,
-            contextType.fallbackState,
+            partial,
+            contextType$jscomp$0.fallbackState,
             props,
-            contextType$jscomp$0,
+            contextType,
             task.formatContext,
             task.legacyContext,
             task.context,
@@ -3945,18 +3939,24 @@ function renderElement(request, task, keyPath, type, props, ref) {
     if ("object" === typeof type && null !== type)
       switch (type.$$typeof) {
         case REACT_FORWARD_REF_TYPE:
-          JSCompiler_inline_result = task.componentStack;
+          contextType = task.componentStack;
           task.componentStack = {
             tag: 1,
             parent: task.componentStack,
             type: type.render
           };
+          if (enableRefAsProp && "ref" in props)
+            for (JSCompiler_inline_result in ((initialState = {}), props))
+              "ref" !== JSCompiler_inline_result &&
+                (initialState[JSCompiler_inline_result] =
+                  props[JSCompiler_inline_result]);
+          else initialState = props;
           props = renderWithHooks(
             request,
             task,
             keyPath,
             type.render,
-            props,
+            initialState,
             ref
           );
           finishFunctionComponent(
@@ -3968,7 +3968,7 @@ function renderElement(request, task, keyPath, type, props, ref) {
             formStateCounter,
             formStateMatchingIndex
           );
-          task.componentStack = JSCompiler_inline_result;
+          task.componentStack = contextType;
           return;
         case REACT_MEMO_TYPE:
           type = type.type;
@@ -4047,14 +4047,18 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
           var type = node$jscomp$0.type,
             key = node$jscomp$0.key,
             props = node$jscomp$0.props;
-          var ref = node$jscomp$0.ref;
+          enableRefAsProp
+            ? ((node$jscomp$0 = props.ref),
+              (node$jscomp$0 = void 0 !== node$jscomp$0 ? node$jscomp$0 : null))
+            : (node$jscomp$0 = node$jscomp$0.ref);
           var name = getComponentNameFromType(type),
             keyOrIndex =
               null == key ? (-1 === childIndex ? 0 : childIndex) : key;
           key = [task.keyPath, name, keyOrIndex];
           if (null !== task.replay)
             a: {
-              var replay = task.replay;
+              var ref = node$jscomp$0,
+                replay = task.replay;
               childIndex = replay.nodes;
               for (
                 node$jscomp$0 = 0;
@@ -4125,10 +4129,10 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                           ">. The tree doesn't match so React will fallback to client rendering."
                       );
                     b: {
-                      replay = void 0;
-                      type = node[5];
-                      ref = node[2];
-                      name = node[3];
+                      type = void 0;
+                      replay = node[5];
+                      name = node[2];
+                      ref = node[3];
                       keyOrIndex = null === node[4] ? [] : node[4][2];
                       node = null === node[4] ? null : node[4][3];
                       var previousComponentStack = task.componentStack,
@@ -4146,12 +4150,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                           fallbackAbortSet
                         );
                       resumedBoundary.parentFlushed = !0;
-                      resumedBoundary.rootSegmentID = type;
+                      resumedBoundary.rootSegmentID = replay;
                       task.blockedBoundary = resumedBoundary;
                       task.hoistableState = resumedBoundary.contentState;
                       task.replay = {
-                        nodes: ref,
-                        slots: name,
+                        nodes: name,
+                        slots: ref,
                         pendingTasks: 1
                       };
                       try {
@@ -4178,12 +4182,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                             request,
                             task.componentStack
                           )),
-                          (replay = logRecoverableError(
+                          (type = logRecoverableError(
                             request,
                             error,
                             childNodes
                           )),
-                          (resumedBoundary.errorDigest = replay),
+                          (resumedBoundary.errorDigest = type),
                           task.replay.pendingTasks--,
                           request.clientRenderedBoundaries.push(
                             resumedBoundary
@@ -4220,7 +4224,7 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
                 }
               }
             }
-          else renderElement(request, task, key, type, props, ref);
+          else renderElement(request, task, key, type, props, node$jscomp$0);
           return;
         case REACT_PORTAL_TYPE:
           throw Error(
@@ -4229,8 +4233,8 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
         case REACT_LAZY_TYPE:
           props = task.componentStack;
           task.componentStack = createBuiltInComponentStack(task, "Lazy");
-          key = node$jscomp$0._init;
-          node$jscomp$0 = key(node$jscomp$0._payload);
+          childNodes = node$jscomp$0._init;
+          node$jscomp$0 = childNodes(node$jscomp$0._payload);
           task.componentStack = props;
           renderNodeDestructive(request, task, node$jscomp$0, childIndex);
           return;
@@ -4248,10 +4252,12 @@ function renderNodeDestructive(request, task, node$jscomp$0, childIndex) {
       if (props && (props = props.call(node$jscomp$0))) {
         node$jscomp$0 = props.next();
         if (!node$jscomp$0.done) {
-          key = [];
-          do key.push(node$jscomp$0.value), (node$jscomp$0 = props.next());
+          childNodes = [];
+          do
+            childNodes.push(node$jscomp$0.value),
+              (node$jscomp$0 = props.next());
           while (!node$jscomp$0.done);
-          renderChildrenArray(request, task, key, childIndex);
+          renderChildrenArray(request, task, childNodes, childIndex);
         }
         return;
       }
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
index 04fb988a0710c..4873481744ccc 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -145,7 +145,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, false is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, false is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -11242,7 +11243,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -11262,6 +11269,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -19688,7 +19720,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -21193,7 +21239,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
@@ -36518,7 +36564,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-classic-8284b06d";
+    var ReactVersion = "18.3.0-www-classic-523eda18";
 
     function createPortal$1(
       children,
diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
index 4c8c8ddd286ec..9b747c8cb2828 100644
--- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -131,7 +131,8 @@ if (__DEV__) {
       enableInfiniteRenderLoopDetection =
         dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
       enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
-      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode; // On WWW, true is used for a new modern build.
+      useModernStrictMode = dynamicFeatureFlags.useModernStrictMode,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableProfilerTimer = true;
     var enableProfilerCommitHooks = true;
     var enableProfilerNestedUpdatePhase = true;
@@ -11193,7 +11194,13 @@ if (__DEV__) {
     function coerceRef(returnFiber, current, workInProgress, element) {
       var mixedRef;
 
-      {
+      if (enableRefAsProp) {
+        // TODO: This is a temporary, intermediate step. When enableRefAsProp is on,
+        // we should resolve the `ref` prop during the begin phase of the component
+        // it's attached to (HostComponent, ClassComponent, etc).
+        var refProp = element.props.ref;
+        mixedRef = refProp !== undefined ? refProp : null;
+      } else {
         // Old behavior.
         mixedRef = element.ref;
       }
@@ -11213,6 +11220,31 @@ if (__DEV__) {
           element,
           mixedRef
         );
+
+        if (enableRefAsProp) {
+          // When enableRefAsProp is on, we should always use the props as the
+          // source of truth for refs. Not a field on the fiber.
+          //
+          // In the case of string refs, this presents a problem, because string
+          // refs are not passed around internally as strings; they are converted to
+          // callback refs. The ref used by the reconciler is not the same as the
+          // one the user provided.
+          //
+          // But since this is a deprecated feature anyway, what we can do is clone
+          // the props object and replace it with the internal callback ref. Then we
+          // can continue to use the props object as the source of truth.
+          //
+          // This means the internal callback ref will leak into userspace. The
+          // receiving component will receive a callback ref even though the parent
+          // passed a string. Which is weird, but again, this is a deprecated
+          // feature, and we're only leaving it around behind a flag so that Meta
+          // can keep using string refs temporarily while they finish migrating
+          // their codebase.
+          var userProvidedProps = workInProgress.pendingProps;
+          var propsWithInternalCallbackRef = assign({}, userProvidedProps);
+          propsWithInternalCallbackRef.ref = coercedRef;
+          workInProgress.pendingProps = propsWithInternalCallbackRef;
+        }
       } else {
         coercedRef = mixedRef;
       } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
@@ -19598,7 +19630,21 @@ if (__DEV__) {
       var ref = workInProgress.ref;
       var propsWithoutRef;
 
-      {
+      if (enableRefAsProp && "ref" in nextProps) {
+        // `ref` is just a prop now, but `forwardRef` expects it to not appear in
+        // the props object. This used to happen in the JSX runtime, but now we do
+        // it here.
+        propsWithoutRef = {};
+
+        for (var key in nextProps) {
+          // Since `ref` should only appear in props via the JSX transform, we can
+          // assume that this is a plain object. So we don't need a
+          // hasOwnProperty check.
+          if (key !== "ref") {
+            propsWithoutRef[key] = nextProps[key];
+          }
+        }
+      } else {
         propsWithoutRef = nextProps;
       } // The rest is a fork of updateFunctionComponent
 
@@ -21073,7 +21119,7 @@ if (__DEV__) {
           }
         }
 
-        if (workInProgress.ref !== null) {
+        if (!enableRefAsProp && workInProgress.ref !== null) {
           var info = "";
           var componentName = getComponentNameFromType(Component) || "Unknown";
           var ownerName = getCurrentFiberOwnerNameInDevOrNull();
@@ -36354,7 +36400,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-c06c83c7";
+    var ReactVersion = "18.3.0-www-modern-d6778e7a";
 
     function createPortal$1(
       children,
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
index 7f259856bf1cf..f170600f9796d 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -63,6 +63,7 @@ var ReactSharedInternals =
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -2681,13 +2682,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5372,22 +5384,27 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -17490,7 +17507,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1824 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-9d08c2e5",
+  version: "18.3.0-www-classic-d95f23f2",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2191 = {
@@ -17520,7 +17537,7 @@ var internals$jscomp$inline_2191 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-classic-9d08c2e5"
+  reconcilerVersion: "18.3.0-www-classic-d95f23f2"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2192 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -18014,4 +18031,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-classic-9d08c2e5";
+exports.version = "18.3.0-www-classic-d95f23f2";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
index 2cdb265172c89..7148757f0f9ec 100644
--- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -66,6 +66,7 @@ var assign = Object.assign,
   enableInfiniteRenderLoopDetection =
     dynamicFeatureFlags.enableInfiniteRenderLoopDetection,
   enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactSharedInternals =
     React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   ReactCurrentDispatcher$2 = ReactSharedInternals.ReactCurrentDispatcher,
@@ -2625,13 +2626,24 @@ function convertStringRefToCallbackRef(
   return ref;
 }
 function coerceRef(returnFiber, current, workInProgress, element) {
-  var mixedRef = element.ref;
-  returnFiber =
-    null !== mixedRef &&
-    "function" !== typeof mixedRef &&
-    "object" !== typeof mixedRef
-      ? convertStringRefToCallbackRef(returnFiber, current, element, mixedRef)
-      : mixedRef;
+  if (enableRefAsProp) {
+    var mixedRef = element.props.ref;
+    mixedRef = void 0 !== mixedRef ? mixedRef : null;
+  } else mixedRef = element.ref;
+  null !== mixedRef &&
+  "function" !== typeof mixedRef &&
+  "object" !== typeof mixedRef
+    ? ((returnFiber = convertStringRefToCallbackRef(
+        returnFiber,
+        current,
+        element,
+        mixedRef
+      )),
+      enableRefAsProp &&
+        ((current = assign({}, workInProgress.pendingProps)),
+        (current.ref = returnFiber),
+        (workInProgress.pendingProps = current)))
+    : (returnFiber = mixedRef);
   workInProgress.ref = returnFiber;
 }
 function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -5301,22 +5313,27 @@ function updateForwardRef(
 ) {
   Component = Component.render;
   var ref = workInProgress.ref;
+  if (enableRefAsProp && "ref" in nextProps) {
+    var propsWithoutRef = {};
+    for (var key in nextProps)
+      "ref" !== key && (propsWithoutRef[key] = nextProps[key]);
+  } else propsWithoutRef = nextProps;
   prepareToReadContext(workInProgress, renderLanes);
   nextProps = renderWithHooks(
     current,
     workInProgress,
     Component,
-    nextProps,
+    propsWithoutRef,
     ref,
     renderLanes
   );
-  Component = checkDidRenderIdHook();
+  key = checkDidRenderIdHook();
   if (null !== current && !didReceiveUpdate)
     return (
       bailoutHooks(current, workInProgress, renderLanes),
       bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
     );
-  isHydrating && Component && pushMaterializedTreeId(workInProgress);
+  isHydrating && key && pushMaterializedTreeId(workInProgress);
   workInProgress.flags |= 1;
   reconcileChildren(current, workInProgress, nextProps, renderLanes);
   return workInProgress.child;
@@ -17067,7 +17084,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1783 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-0df9e753",
+  version: "18.3.0-www-modern-97e7ee15",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2154 = {
@@ -17098,7 +17115,7 @@ var internals$jscomp$inline_2154 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-0df9e753"
+  reconcilerVersion: "18.3.0-www-modern-97e7ee15"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2155 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17519,4 +17536,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactCurrentDispatcher$2.current.useHostTransitionStatus();
 };
-exports.version = "18.3.0-www-modern-0df9e753";
+exports.version = "18.3.0-www-modern-97e7ee15";
diff --git a/compiled/facebook-www/ReactFlightDOMClient-dev.modern.js b/compiled/facebook-www/ReactFlightDOMClient-dev.modern.js
index b652cdabd1bd0..bd1ba7e8c5fd5 100644
--- a/compiled/facebook-www/ReactFlightDOMClient-dev.modern.js
+++ b/compiled/facebook-www/ReactFlightDOMClient-dev.modern.js
@@ -19,7 +19,9 @@ if (__DEV__) {
     var ReactDOM = require("react-dom");
 
     // Re-export dynamic flags from the www version.
-    require("ReactFeatureFlags");
+    var dynamicFeatureFlags = require("ReactFeatureFlags");
+
+    var enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
     var enableBinaryFlight = false;
 
     function createStringDecoder() {
@@ -557,10 +559,29 @@ if (__DEV__) {
       });
     }
 
+    function nullRefGetter() {
+      {
+        return null;
+      }
+    }
+
     function createElement(type, key, props) {
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // `ref` is non-enumerable in dev
+        element = {
+          $$typeof: REACT_ELEMENT_TYPE,
+          type: type,
+          key: key,
+          props: props,
+          _owner: null
+        };
+        Object.defineProperty(element, "ref", {
+          enumerable: false,
+          get: nullRefGetter
+        });
+      } else {
         element = {
           // This tag allows us to uniquely identify this as a React Element
           $$typeof: REACT_ELEMENT_TYPE,
diff --git a/compiled/facebook-www/ReactFlightDOMServer-dev.modern.js b/compiled/facebook-www/ReactFlightDOMServer-dev.modern.js
index 50ff4ae429827..c64b92492ce31 100644
--- a/compiled/facebook-www/ReactFlightDOMServer-dev.modern.js
+++ b/compiled/facebook-www/ReactFlightDOMServer-dev.modern.js
@@ -106,7 +106,9 @@ if (__DEV__) {
     }
 
     // Re-export dynamic flags from the www version.
-    require("ReactFeatureFlags");
+    var dynamicFeatureFlags = require("ReactFeatureFlags");
+
+    var enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
 
     function stringToChunk(content) {
       return content;
@@ -2138,7 +2140,13 @@ if (__DEV__) {
             var props = element.props;
             var ref;
 
-            {
+            if (enableRefAsProp) {
+              // TODO: This is a temporary, intermediate step. Once the feature
+              // flag is removed, we should get the ref off the props object right
+              // before using it.
+              var refProp = props.ref;
+              ref = refProp !== undefined ? refProp : null;
+            } else {
               ref = element.ref;
             } // Attempt to render the Server Component.
 
diff --git a/compiled/facebook-www/ReactFlightDOMServer-prod.modern.js b/compiled/facebook-www/ReactFlightDOMServer-prod.modern.js
index bc617314467d5..c462d6fdea9d1 100644
--- a/compiled/facebook-www/ReactFlightDOMServer-prod.modern.js
+++ b/compiled/facebook-www/ReactFlightDOMServer-prod.modern.js
@@ -20,8 +20,8 @@ function isClientReference(reference) {
     throw Error("Expected implementation for checkIsClientReference.");
   return checkIsClientReference(reference);
 }
-require("ReactFeatureFlags");
-var byteLengthImpl = null;
+var enableRefAsProp = require("ReactFeatureFlags").enableRefAsProp,
+  byteLengthImpl = null;
 function writeChunkAndReturn(destination, chunk) {
   destination.write(chunk);
   return !0;
@@ -795,13 +795,19 @@ function renderModelDestructive(
                   serializeByValueID(request))
                 : serializeByValueID(parentPropertyName);
         } else parent.set(value, -1);
+        parent = value.props;
+        enableRefAsProp
+          ? ((parentPropertyName = parent.ref),
+            (parentPropertyName =
+              void 0 !== parentPropertyName ? parentPropertyName : null))
+          : (parentPropertyName = value.ref);
         return renderElement(
           request,
           task,
           value.type,
           value.key,
-          value.ref,
-          value.props
+          parentPropertyName,
+          parent
         );
       case REACT_LAZY_TYPE:
         return (
diff --git a/compiled/facebook-www/ReactServer-dev.modern.js b/compiled/facebook-www/ReactServer-dev.modern.js
index 3880572746dfe..3d8f891f40d58 100644
--- a/compiled/facebook-www/ReactServer-dev.modern.js
+++ b/compiled/facebook-www/ReactServer-dev.modern.js
@@ -84,11 +84,8 @@ if (__DEV__) {
 
     var enableDebugTracing = dynamicFeatureFlags.enableDebugTracing,
       enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
-      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext;
-    // On WWW, true is used for a new modern build.
-    // because JSX is an extremely hot path.
-
-    var enableRefAsProp = false; // Flow magic to verify the exports of this file match the original version.
+      enableRenderableContext = dynamicFeatureFlags.enableRenderableContext,
+      enableRefAsProp = dynamicFeatureFlags.enableRefAsProp; // On WWW, true is used for a new modern build.
 
     /**
      * Keeps track of the current Cache dispatcher.
@@ -898,9 +895,11 @@ if (__DEV__) {
     var specialPropKeyWarningShown;
     var specialPropRefWarningShown;
     var didWarnAboutStringRefs;
+    var didWarnAboutElementRef;
 
     {
       didWarnAboutStringRefs = {};
+      didWarnAboutElementRef = {};
     }
 
     function hasValidRef(config) {
@@ -986,7 +985,7 @@ if (__DEV__) {
     }
 
     function defineRefPropWarningGetter(props, displayName) {
-      {
+      if (!enableRefAsProp) {
         {
           var warnAboutAccessingRef = function () {
             if (!specialPropRefWarningShown) {
@@ -1010,6 +1009,26 @@ if (__DEV__) {
         }
       }
     }
+
+    function elementRefGetterWithDeprecationWarning() {
+      {
+        var componentName = getComponentNameFromType(this.type);
+
+        if (!didWarnAboutElementRef[componentName]) {
+          didWarnAboutElementRef[componentName] = true;
+
+          error(
+            "Accessing element.ref is no longer supported. ref is now a " +
+              "regular prop. It will be removed from the JSX Element " +
+              "type in a future release."
+          );
+        } // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        var refProp = this.props.ref;
+        return refProp !== undefined ? refProp : null;
+      }
+    }
     /**
      * Factory method to create a new React element. This no longer adheres to
      * the class pattern, so do not use new to call it. Also, instanceof check
@@ -1034,13 +1053,64 @@ if (__DEV__) {
     function ReactElement(type, key, _ref, self, source, owner, props) {
       var ref;
 
-      {
+      if (enableRefAsProp) {
+        // When enableRefAsProp is on, ignore whatever was passed as the ref
+        // argument and treat `props.ref` as the source of truth. The only thing we
+        // use this for is `element.ref`, which will log a deprecation warning on
+        // access. In the next release, we can remove `element.ref` as well as the
+        // `ref` argument.
+        var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
+        // backwards compatibility.
+
+        ref = refProp !== undefined ? refProp : null;
+      } else {
         ref = _ref;
       }
 
       var element;
 
-      {
+      if (enableRefAsProp) {
+        // In dev, make `ref` a non-enumerable property with a warning. It's non-
+        // enumerable so that test matchers and serializers don't access it and
+        // trigger the warning.
+        //
+        // `ref` will be removed from the element completely in a future release.
+        element = {
+          // This tag allows us to uniquely identify this as a React Element
+          $$typeof: REACT_ELEMENT_TYPE,
+          // Built-in properties that belong on the element
+          type: type,
+          key: key,
+          props: props,
+          // Record the component responsible for creating this element.
+          _owner: owner
+        };
+
+        if (ref !== null) {
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            get: elementRefGetterWithDeprecationWarning
+          });
+        } else {
+          // Don't warn on access if a ref is not given. This reduces false
+          // positives in cases where a test serializer uses
+          // getOwnPropertyDescriptors to compare objects, like Jest does, which is
+          // a problem because it bypasses non-enumerability.
+          //
+          // So unfortunately this will trigger a false positive warning in Jest
+          // when the diff is printed:
+          //
+          //   expect(<div ref={ref} />).toEqual(<span ref={ref} />);
+          //
+          // A bit sketchy, but this is what we've done for the `props.key` and
+          // `props.ref` accessors for years, which implies it will be good enough
+          // for `element.ref`, too. Let's see if anyone complains.
+          Object.defineProperty(element, "ref", {
+            enumerable: false,
+            value: null
+          });
+        }
+      } else {
         // In prod, `ref` is a regular property. It will be removed in a
         // future release.
         element = {
@@ -1276,7 +1346,7 @@ if (__DEV__) {
         }
 
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1287,7 +1357,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref"
+            (enableRefAsProp || propName !== "ref")
           ) {
             props[propName] = config[propName];
           }
@@ -1303,7 +1373,7 @@ if (__DEV__) {
           }
         }
 
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1313,7 +1383,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1414,7 +1484,7 @@ if (__DEV__) {
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             ref = config.ref;
           }
 
@@ -1435,7 +1505,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // Even though we don't use these anymore in the runtime, we don't want
+            (enableRefAsProp || propName !== "ref") && // Even though we don't use these anymore in the runtime, we don't want
             // them to appear as props, so in createElement we filter them out.
             // We don't have to do this in the jsx() runtime because the jsx()
             // transform never passed these as props; it used separate arguments.
@@ -1479,7 +1549,7 @@ if (__DEV__) {
       }
 
       {
-        if (key || ref) {
+        if (key || (!enableRefAsProp && ref)) {
           var displayName =
             typeof type === "function"
               ? type.displayName || type.name || "Unknown"
@@ -1489,7 +1559,7 @@ if (__DEV__) {
             defineKeyPropWarningGetter(props, displayName);
           }
 
-          if (ref) {
+          if (!enableRefAsProp && ref) {
             defineRefPropWarningGetter(props, displayName);
           }
         }
@@ -1516,7 +1586,7 @@ if (__DEV__) {
         oldElement.type,
         newKey, // When enableRefAsProp is on, this argument is ignored. This check only
         // exists to avoid the `ref` access warning.
-        oldElement.ref,
+        enableRefAsProp ? null : oldElement.ref,
         undefined,
         undefined,
         oldElement._owner,
@@ -1542,13 +1612,13 @@ if (__DEV__) {
       var props = assign({}, element.props); // Reserved names are extracted
 
       var key = element.key;
-      var ref = element.ref; // Owner will be preserved, unless ref is overridden
+      var ref = enableRefAsProp ? null : element.ref; // Owner will be preserved, unless ref is overridden
 
       var owner = element._owner;
 
       if (config != null) {
         if (hasValidRef(config)) {
-          {
+          if (!enableRefAsProp) {
             // Silently steal the ref from the parent.
             ref = config.ref;
           }
@@ -1574,7 +1644,7 @@ if (__DEV__) {
           if (
             hasOwnProperty.call(config, propName) && // Skip over reserved prop names
             propName !== "key" &&
-            propName !== "ref" && // ...and maybe these, too, though we currently rely on them for
+            (enableRefAsProp || propName !== "ref") && // ...and maybe these, too, though we currently rely on them for
             // warnings and debug information in dev. Need to decide if we're OK
             // with dropping them. In the jsx() runtime it's not an issue because
             // the data gets passed as separate arguments instead of props, but
@@ -1584,7 +1654,7 @@ if (__DEV__) {
             propName !== "__source" && // Undefined `ref` is ignored by cloneElement. We treat it the same as
             // if the property were missing. This is mostly for
             // backwards compatibility.
-            !enableRefAsProp
+            !(enableRefAsProp && propName === "ref" && config.ref === undefined)
           ) {
             if (config[propName] === undefined && defaultProps !== undefined) {
               // Resolve default props
@@ -1846,7 +1916,7 @@ if (__DEV__) {
           }
         }
 
-        if (fragment.ref !== null) {
+        if (!enableRefAsProp && fragment.ref !== null) {
           setCurrentlyValidatingElement(fragment);
 
           error("Invalid attribute `ref` supplied to `React.Fragment`.");
@@ -2766,7 +2836,7 @@ if (__DEV__) {
             console["error"](error);
           };
 
-    var ReactVersion = "18.3.0-www-modern-5cc54b73";
+    var ReactVersion = "18.3.0-www-modern-44998407";
 
     // Patch fetch
     var Children = {
diff --git a/compiled/facebook-www/ReactServer-prod.modern.js b/compiled/facebook-www/ReactServer-prod.modern.js
index 39673c6428a39..c3d7cb1cc13e0 100644
--- a/compiled/facebook-www/ReactServer-prod.modern.js
+++ b/compiled/facebook-www/ReactServer-prod.modern.js
@@ -12,8 +12,9 @@
 
 "use strict";
 var assign = Object.assign,
-  enableTransitionTracing =
-    require("ReactFeatureFlags").enableTransitionTracing,
+  dynamicFeatureFlags = require("ReactFeatureFlags"),
+  enableTransitionTracing = dynamicFeatureFlags.enableTransitionTracing,
+  enableRefAsProp = dynamicFeatureFlags.enableRefAsProp,
   ReactCurrentCache = { current: null },
   ReactCurrentDispatcher = { current: null },
   ReactSharedInternals = {
@@ -57,6 +58,8 @@ function getIteratorFn(maybeIterable) {
 var hasOwnProperty = Object.prototype.hasOwnProperty,
   ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 function ReactElement(type, key, _ref, self, source, owner, props) {
+  enableRefAsProp &&
+    ((_ref = props.ref), (_ref = void 0 !== _ref ? _ref : null));
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
@@ -73,11 +76,11 @@ function jsxProd(type, config, maybeKey) {
     ref = null;
   void 0 !== maybeKey && (key = "" + maybeKey);
   void 0 !== config.key && (key = "" + config.key);
-  void 0 !== config.ref && (ref = config.ref);
+  void 0 === config.ref || enableRefAsProp || (ref = config.ref);
   for (propName in config)
     hasOwnProperty.call(config, propName) &&
       "key" !== propName &&
-      "ref" !== propName &&
+      (enableRefAsProp || "ref" !== propName) &&
       (props[propName] = config[propName]);
   if (type && type.defaultProps)
     for (propName in ((config = type.defaultProps), config))
@@ -96,7 +99,7 @@ function cloneAndReplaceKey(oldElement, newKey) {
   return ReactElement(
     oldElement.type,
     newKey,
-    oldElement.ref,
+    enableRefAsProp ? null : oldElement.ref,
     void 0,
     void 0,
     oldElement._owner,
@@ -391,20 +394,22 @@ exports.cloneElement = function (element, config, children) {
     throw Error(formatProdErrorMessage(267, element));
   var props = assign({}, element.props),
     key = element.key,
-    ref = element.ref,
+    ref = enableRefAsProp ? null : element.ref,
     owner = element._owner;
   if (null != config) {
     void 0 !== config.ref &&
-      ((ref = config.ref), (owner = ReactCurrentOwner.current));
+      (enableRefAsProp || (ref = config.ref),
+      (owner = ReactCurrentOwner.current));
     void 0 !== config.key && (key = "" + config.key);
     if (element.type && element.type.defaultProps)
       var defaultProps = element.type.defaultProps;
     for (propName in config)
-      hasOwnProperty.call(config, propName) &&
-        "key" !== propName &&
-        "ref" !== propName &&
-        "__self" !== propName &&
-        "__source" !== propName &&
+      !hasOwnProperty.call(config, propName) ||
+        "key" === propName ||
+        (!enableRefAsProp && "ref" === propName) ||
+        "__self" === propName ||
+        "__source" === propName ||
+        (enableRefAsProp && "ref" === propName && void 0 === config.ref) ||
         (props[propName] =
           void 0 === config[propName] && void 0 !== defaultProps
             ? defaultProps[propName]
@@ -425,12 +430,14 @@ exports.createElement = function (type, config, children) {
     key = null,
     ref = null;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (ref = config.ref),
+    for (propName in (void 0 === config.ref ||
+      enableRefAsProp ||
+      (ref = config.ref),
     void 0 !== config.key && (key = "" + config.key),
     config))
       hasOwnProperty.call(config, propName) &&
         "key" !== propName &&
-        "ref" !== propName &&
+        (enableRefAsProp || "ref" !== propName) &&
         "__self" !== propName &&
         "__source" !== propName &&
         (props[propName] = config[propName]);
@@ -517,4 +524,4 @@ exports.useId = function () {
 exports.useMemo = function (create, deps) {
   return ReactCurrentDispatcher.current.useMemo(create, deps);
 };
-exports.version = "18.3.0-www-modern-bd59da2c";
+exports.version = "18.3.0-www-modern-e6d37b19";
diff --git a/compiled/facebook-www/ReactTestRenderer-dev.modern.js b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
index cea3d300dacdb..78f713274305b 100644
--- a/compiled/facebook-www/ReactTestRenderer-dev.modern.js
+++ b/compiled/facebook-www/ReactTestRenderer-dev.modern.js
@@ -26077,7 +26077,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-www-modern-5913a749";
+    var ReactVersion = "18.3.0-www-modern-5cf311c2";
 
     // Might add PROFILE later.