Convert string ref props to callback props (#28398)

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.

DiffTrain build for [dc30644](dc30644)

Author: acdlite

compiled/facebook-www/REVISION

@@ -1 +1 @@
-353ecd05160a318a3f75260ee7906fd12e05cb9d
+dc30644ca77e52a2760e81fbdbcfbd2f2fd4979c

compiled/facebook-www/React-prod.classic.js

@@ -628,4 +628,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-a3d0776b";
+exports.version = "18.3.0-www-classic-9dbcb358";

compiled/facebook-www/React-profiling.classic.js

@@ -632,7 +632,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-classic-3d32b702";
+exports.version = "18.3.0-www-classic-1cd2cf0b";
 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
   "function" ===
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-classic-cd924c55";
+    var ReactVersion = "18.3.0-www-classic-cbef9601";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -6352,127 +6352,138 @@ if (__DEV__) {
       return trackUsedThenable(thenableState$1, thenable, index);
     }
 
-    function coerceRef(returnFiber, current, element) {
-      var mixedRef;
-
-      {
-        // Old behavior.
-        mixedRef = element.ref;
-      }
-
-      if (
-        mixedRef !== null &&
-        typeof mixedRef !== "function" &&
-        typeof mixedRef !== "object"
-      ) {
-        {
-          if (
-            // Will already throw with "Function components cannot have string refs"
-            !(element._owner && element._owner.tag !== ClassComponent) && // Will already warn with "Function components cannot be given refs"
-            !(
-              typeof element.type === "function" && !isReactClass(element.type)
-            ) && // Will already throw with "Element ref was specified as a string (someStringRef) but no owner was set"
-            element._owner
-          ) {
-            var componentName =
-              getComponentNameFromFiber(returnFiber) || "Component";
-
-            if (!didWarnAboutStringRefs[componentName]) {
-              error(
-                'Component "%s" contains the string ref "%s". Support for string refs ' +
-                  "will be removed in a future major release. We recommend using " +
-                  "useRef() or createRef() instead. " +
-                  "Learn more about using refs safely here: " +
-                  "https://reactjs.org/link/strict-mode-string-ref",
-                componentName,
-                mixedRef
-              );
+    function convertStringRefToCallbackRef(
+      returnFiber,
+      current,
+      element,
+      mixedRef
+    ) {
+      var owner = element._owner;
 
-              didWarnAboutStringRefs[componentName] = true;
-            }
-          }
+      if (!owner) {
+        if (typeof mixedRef !== "string") {
+          throw new Error(
+            "Expected ref to be a function, a string, an object returned by React.createRef(), or null."
+          );
         }
 
-        if (element._owner) {
-          var owner = element._owner;
-          var inst;
+        throw new Error(
+          "Element ref was specified as a string (" +
+            mixedRef +
+            ") but no owner was set. This could happen for one of" +
+            " the following reasons:\n" +
+            "1. You may be adding a ref to a function component\n" +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            "3. You have multiple copies of React loaded\n" +
+            "See https://reactjs.org/link/refs-must-have-owner for more information."
+        );
+      }
 
-          if (owner) {
-            var ownerFiber = owner;
+      if (owner.tag !== ClassComponent) {
+        throw new Error(
+          "Function components cannot have string refs. " +
+            "We recommend using useRef() instead. " +
+            "Learn more about using refs safely here: " +
+            "https://reactjs.org/link/strict-mode-string-ref"
+        );
+      } // At this point, we know the ref isn't an object or function but it could
+      // be a number. Coerce it to a string.
 
-            if (ownerFiber.tag !== ClassComponent) {
-              throw new Error(
-                "Function components cannot have string refs. " +
-                  "We recommend using useRef() instead. " +
-                  "Learn more about using refs safely here: " +
-                  "https://reactjs.org/link/strict-mode-string-ref"
-              );
-            }
+      {
+        checkPropStringCoercion(mixedRef, "ref");
+      }
 
-            inst = ownerFiber.stateNode;
-          }
+      var stringRef = "" + mixedRef;
 
-          if (!inst) {
-            throw new Error(
-              "Missing owner for string ref " +
-                mixedRef +
-                ". This error is likely caused by a " +
-                "bug in React. Please file an issue."
-            );
-          } // Assigning this to a const so Flow knows it won't change in the closure
+      {
+        if (
+          // Will already warn with "Function components cannot be given refs"
+          !(typeof element.type === "function" && !isReactClass(element.type))
+        ) {
+          var componentName =
+            getComponentNameFromFiber(returnFiber) || "Component";
 
-          var resolvedInst = inst;
+          if (!didWarnAboutStringRefs[componentName]) {
+            error(
+              'Component "%s" contains the string ref "%s". Support for string refs ' +
+                "will be removed in a future major release. We recommend using " +
+                "useRef() or createRef() instead. " +
+                "Learn more about using refs safely here: " +
+                "https://reactjs.org/link/strict-mode-string-ref",
+              componentName,
+              stringRef
+            );
 
-          {
-            checkPropStringCoercion(mixedRef, "ref");
+            didWarnAboutStringRefs[componentName] = true;
           }
+        }
+      }
 
-          var stringRef = "" + mixedRef; // Check if previous string ref matches new string ref
+      var inst = owner.stateNode;
 
-          if (
-            current !== null &&
-            current.ref !== null &&
-            typeof current.ref === "function" &&
-            current.ref._stringRef === stringRef
-          ) {
-            return current.ref;
-          }
+      if (!inst) {
+        throw new Error(
+          "Missing owner for string ref " +
+            stringRef +
+            ". This error is likely caused by a " +
+            "bug in React. Please file an issue."
+        );
+      } // Check if previous string ref matches new string ref
 
-          var ref = function (value) {
-            var refs = resolvedInst.refs;
+      if (
+        current !== null &&
+        current.ref !== null &&
+        typeof current.ref === "function" &&
+        current.ref._stringRef === stringRef
+      ) {
+        // Reuse the existing string ref
+        var currentRef = current.ref;
+        return currentRef;
+      } // Create a new string ref
 
-            if (value === null) {
-              delete refs[stringRef];
-            } else {
-              refs[stringRef] = value;
-            }
-          };
+      var ref = function (value) {
+        var refs = inst.refs;
 
-          ref._stringRef = stringRef;
-          return ref;
+        if (value === null) {
+          delete refs[stringRef];
         } else {
-          if (typeof mixedRef !== "string") {
-            throw new Error(
-              "Expected ref to be a function, a string, an object returned by React.createRef(), or null."
-            );
-          }
-
-          if (!element._owner) {
-            throw new Error(
-              "Element ref was specified as a string (" +
-                mixedRef +
-                ") but no owner was set. This could happen for one of" +
-                " the following reasons:\n" +
-                "1. You may be adding a ref to a function component\n" +
-                "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-                "3. You have multiple copies of React loaded\n" +
-                "See https://reactjs.org/link/refs-must-have-owner for more information."
-            );
-          }
+          refs[stringRef] = value;
         }
+      };
+
+      ref._stringRef = stringRef;
+      return ref;
+    }
+
+    function coerceRef(returnFiber, current, workInProgress, element) {
+      var mixedRef;
+
+      {
+        // Old behavior.
+        mixedRef = element.ref;
       }
 
-      return mixedRef;
+      var coercedRef;
+
+      if (
+        mixedRef !== null &&
+        typeof mixedRef !== "function" &&
+        typeof mixedRef !== "object"
+      ) {
+        // Assume this is a string ref. If it's not, then this will throw an error
+        // to the user.
+        coercedRef = convertStringRefToCallbackRef(
+          returnFiber,
+          current,
+          element,
+          mixedRef
+        );
+      } else {
+        coercedRef = mixedRef;
+      } // TODO: If enableRefAsProp is on, we shouldn't use the `ref` field. We
+      // should always read the ref from the prop.
+
+      workInProgress.ref = coercedRef;
     }
 
     function throwOnInvalidObjectType(returnFiber, newChild) {
@@ -6728,7 +6739,7 @@ if (__DEV__) {
           ) {
             // Move based on index
             var existing = useFiber(current, element.props);
-            existing.ref = coerceRef(returnFiber, current, element);
+            coerceRef(returnFiber, current, existing, element);
             existing.return = returnFiber;
 
             {
@@ -6741,7 +6752,7 @@ if (__DEV__) {
         } // Insert
 
         var created = createFiberFromElement(element, returnFiber.mode, lanes);
-        created.ref = coerceRef(returnFiber, current, element);
+        coerceRef(returnFiber, current, created, element);
         created.return = returnFiber;
 
         {
@@ -6847,7 +6858,7 @@ if (__DEV__) {
                 lanes
               );
 
-              _created.ref = coerceRef(returnFiber, null, newChild);
+              coerceRef(returnFiber, null, _created, newChild);
               _created.return = returnFiber;
 
               {
@@ -7710,7 +7721,7 @@ if (__DEV__) {
 
                 var _existing = useFiber(child, element.props);
 
-                _existing.ref = coerceRef(returnFiber, child, element);
+                coerceRef(returnFiber, child, _existing, element);
                 _existing.return = returnFiber;
 
                 {
@@ -7752,7 +7763,7 @@ if (__DEV__) {
             lanes
           );
 
-          _created4.ref = coerceRef(returnFiber, currentFirstChild, element);
+          coerceRef(returnFiber, currentFirstChild, _created4, element);
           _created4.return = returnFiber;
 
           {