Support writing to this.refs from userspace (#28867)

Previously, the `refs` property of a class component instance was read-only by user code — only React could write to it, and until/unless a string ref was used, it pointed to a shared empty object that was frozen in dev to prevent userspace mutations. Because string refs are deprecated, we want users to be able to codemod all their string refs to callback refs. The safest way to do this is to output a callback ref that assigns to `this.refs`. So to support this, we need to make `this.refs` writable by userspace. DiffTrain build for [ea24427](ea24427)
facebook · Apr 18, 2024 · fb3bede · fb3bede
1 parent e69bce2
commit fb3bede
Show file tree

Hide file tree

Showing 23 changed files with 57 additions and 89 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-da6ba53b10d8240fc251ba14a3e5878604d3dc7d
+ea24427d16f3ac9b0f3bb45cdc7919ac208130c9
diff --git 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 = "19.0.0-www-classic-dd15d2bd";
+    var ReactVersion = "19.0.0-www-classic-830ece8b";
 
     // ATTENTION
     // When adding new symbols to this file,
@@ -233,20 +233,14 @@ if (__DEV__) {
 
     var assign = Object.assign;
 
-    var emptyObject = {};
-
-    {
-      Object.freeze(emptyObject);
-    }
     /**
      * Base class helpers for the updating state of a component.
      */
 
     function Component(props, context, updater) {
       this.props = props;
-      this.context = context; // If a component has string refs, we will assign a different object later.
-
-      this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
+      this.context = context;
+      this.refs = {}; // We initialize the default updater but the real one gets injected by the
       // renderer.
 
       this.updater = updater || ReactNoopUpdateQueue;
@@ -363,7 +357,7 @@ if (__DEV__) {
       this.props = props;
       this.context = context; // If a component has string refs, we will assign a different object later.
 
-      this.refs = emptyObject;
+      this.refs = {};
       this.updater = updater || ReactNoopUpdateQueue;
     }
 

diff --git 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 = "19.0.0-www-modern-8003ee33";
+    var ReactVersion = "19.0.0-www-modern-b720dc57";
 
     // ATTENTION
     // When adding new symbols to this file,
@@ -233,20 +233,14 @@ if (__DEV__) {
 
     var assign = Object.assign;
 
-    var emptyObject = {};
-
-    {
-      Object.freeze(emptyObject);
-    }
     /**
      * Base class helpers for the updating state of a component.
      */
 
     function Component(props, context, updater) {
       this.props = props;
-      this.context = context; // If a component has string refs, we will assign a different object later.
-
-      this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
+      this.context = context;
+      this.refs = {}; // We initialize the default updater but the real one gets injected by the
       // renderer.
 
       this.updater = updater || ReactNoopUpdateQueue;
@@ -363,7 +357,7 @@ if (__DEV__) {
       this.props = props;
       this.context = context; // If a component has string refs, we will assign a different object later.
 
-      this.refs = emptyObject;
+      this.refs = {};
       this.updater = updater || ReactNoopUpdateQueue;
     }
 

diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -45,12 +45,11 @@ var ReactNoopUpdateQueue = {
     enqueueReplaceState: function () {},
     enqueueSetState: function () {}
   },
-  assign = Object.assign,
-  emptyObject = {};
+  assign = Object.assign;
 function Component(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 Component.prototype.isReactComponent = {};
@@ -73,7 +72,7 @@ ComponentDummy.prototype = Component.prototype;
 function PureComponent(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
@@ -695,4 +694,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-c379aa62";
+exports.version = "19.0.0-www-classic-69b8fc3f";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -45,12 +45,11 @@ var ReactNoopUpdateQueue = {
     enqueueReplaceState: function () {},
     enqueueSetState: function () {}
   },
-  assign = Object.assign,
-  emptyObject = {};
+  assign = Object.assign;
 function Component(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 Component.prototype.isReactComponent = {};
@@ -73,7 +72,7 @@ ComponentDummy.prototype = Component.prototype;
 function PureComponent(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
@@ -695,4 +694,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-c379aa62";
+exports.version = "19.0.0-www-modern-69b8fc3f";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
@@ -49,12 +49,11 @@ var ReactNoopUpdateQueue = {
     enqueueReplaceState: function () {},
     enqueueSetState: function () {}
   },
-  assign = Object.assign,
-  emptyObject = {};
+  assign = Object.assign;
 function Component(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 Component.prototype.isReactComponent = {};
@@ -77,7 +76,7 @@ ComponentDummy.prototype = Component.prototype;
 function PureComponent(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
@@ -699,7 +698,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-classic-6d3239ac";
+exports.version = "19.0.0-www-classic-3379708b";
 "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
@@ -49,12 +49,11 @@ var ReactNoopUpdateQueue = {
     enqueueReplaceState: function () {},
     enqueueSetState: function () {}
   },
-  assign = Object.assign,
-  emptyObject = {};
+  assign = Object.assign;
 function Component(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 Component.prototype.isReactComponent = {};
@@ -77,7 +76,7 @@ ComponentDummy.prototype = Component.prototype;
 function PureComponent(props, context, updater) {
   this.props = props;
   this.context = context;
-  this.refs = emptyObject;
+  this.refs = {};
   this.updater = updater || ReactNoopUpdateQueue;
 }
 var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
@@ -699,7 +698,7 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-exports.version = "19.0.0-www-modern-6d3239ac";
+exports.version = "19.0.0-www-modern-3379708b";
 "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
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "19.0.0-www-classic-033703c4";
+    var ReactVersion = "19.0.0-www-classic-9f5bb472";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -13846,7 +13846,6 @@ if (__DEV__) {
       var instance = workInProgress.stateNode;
       instance.props = newProps;
       instance.state = workInProgress.memoizedState;
-      instance.refs = {};
       initializeUpdateQueue(workInProgress);
       var contextType = ctor.contextType;
 

diff --git 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 = "19.0.0-www-modern-7fadda4f";
+    var ReactVersion = "19.0.0-www-modern-a3d75b83";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
@@ -13574,7 +13574,6 @@ if (__DEV__) {
       var instance = workInProgress.stateNode;
       instance.props = newProps;
       instance.state = workInProgress.memoizedState;
-      instance.refs = {};
       initializeUpdateQueue(workInProgress);
       var contextType = ctor.contextType;
 

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -3891,7 +3891,6 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   var instance = workInProgress.stateNode;
   instance.props = newProps;
   instance.state = workInProgress.memoizedState;
-  instance.refs = {};
   initializeUpdateQueue(workInProgress);
   var contextType = ctor.contextType;
   "object" === typeof contextType && null !== contextType
@@ -10619,7 +10618,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-classic-e5fcf28b",
+    version: "19.0.0-www-classic-3d35a032",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1322 = {
@@ -10650,7 +10649,7 @@ var internals$jscomp$inline_1322 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-e5fcf28b"
+  reconcilerVersion: "19.0.0-www-classic-3d35a032"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1323 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -4364,7 +4364,6 @@ function updateClassComponent(
     context = workInProgress.stateNode;
     context.props = nextProps;
     context.state = workInProgress.memoizedState;
-    context.refs = {};
     initializeUpdateQueue(workInProgress);
     contextType = Component.contextType;
     context.context =
@@ -10098,7 +10097,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "19.0.0-www-modern-20a4f736",
+    version: "19.0.0-www-modern-954d0f23",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1307 = {
@@ -10129,7 +10128,7 @@ var internals$jscomp$inline_1307 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-20a4f736"
+  reconcilerVersion: "19.0.0-www-modern-954d0f23"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1308 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -18627,7 +18627,6 @@ if (__DEV__) {
       var instance = workInProgress.stateNode;
       instance.props = newProps;
       instance.state = workInProgress.memoizedState;
-      instance.refs = {};
       initializeUpdateQueue(workInProgress);
       var contextType = ctor.contextType;
 
@@ -36253,7 +36252,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-classic-509be4f1";
+    var ReactVersion = "19.0.0-www-classic-849b84c4";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -31723,7 +31723,6 @@ if (__DEV__) {
       var instance = workInProgress.stateNode;
       instance.props = newProps;
       instance.state = workInProgress.memoizedState;
-      instance.refs = {};
       initializeUpdateQueue(workInProgress);
       var contextType = ctor.contextType;
 
@@ -45769,7 +45768,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-www-modern-8b7a101a";
+    var ReactVersion = "19.0.0-www-modern-1c20f055";
 
     function createPortal$1(
       children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -4742,7 +4742,6 @@ function mountClassInstance(workInProgress, ctor, newProps, renderLanes) {
   var instance = workInProgress.stateNode;
   instance.props = newProps;
   instance.state = workInProgress.memoizedState;
-  instance.refs = {};
   initializeUpdateQueue(workInProgress);
   var contextType = ctor.contextType;
   "object" === typeof contextType && null !== contextType
@@ -17033,7 +17032,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1729 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-38c43cf6",
+  version: "19.0.0-www-classic-4f60324b",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2160 = {
@@ -17063,7 +17062,7 @@ var internals$jscomp$inline_2160 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-38c43cf6"
+  reconcilerVersion: "19.0.0-www-classic-4f60324b"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2161 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17529,4 +17528,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-38c43cf6";
+exports.version = "19.0.0-www-classic-4f60324b";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -7796,7 +7796,6 @@ function updateClassComponent(
     context = workInProgress.stateNode;
     context.props = nextProps;
     context.state = workInProgress.memoizedState;
-    context.refs = {};
     initializeUpdateQueue(workInProgress);
     contextType = Component.contextType;
     context.context =
@@ -16395,7 +16394,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1722 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-modern-1217c10a",
+  version: "19.0.0-www-modern-6bb7ac6f",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2162 = {
@@ -16425,7 +16424,7 @@ var internals$jscomp$inline_2162 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-modern-1217c10a"
+  reconcilerVersion: "19.0.0-www-modern-6bb7ac6f"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2163 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16733,4 +16732,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-modern-1217c10a";
+exports.version = "19.0.0-www-modern-6bb7ac6f";