Skip to content

Commit

Permalink
Support writing to this.refs from userspace (#28867)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
acdlite committed Apr 18, 2024
1 parent e69bce2 commit fb3bede
Show file tree
Hide file tree
Showing 23 changed files with 57 additions and 89 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
da6ba53b10d8240fc251ba14a3e5878604d3dc7d
ea24427d16f3ac9b0f3bb45cdc7919ac208130c9
14 changes: 4 additions & 10 deletions compiled/facebook-www/React-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
14 changes: 4 additions & 10 deletions compiled/facebook-www/React-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
9 changes: 4 additions & 5 deletions compiled/facebook-www/React-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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());
Expand Down Expand Up @@ -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";
9 changes: 4 additions & 5 deletions compiled/facebook-www/React-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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());
Expand Down Expand Up @@ -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";
9 changes: 4 additions & 5 deletions compiled/facebook-www/React-profiling.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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());
Expand Down Expand Up @@ -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 &&
Expand Down
9 changes: 4 additions & 5 deletions compiled/facebook-www/React-profiling.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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());
Expand Down Expand Up @@ -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 &&
Expand Down
3 changes: 1 addition & 2 deletions compiled/facebook-www/ReactART-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
3 changes: 1 addition & 2 deletions compiled/facebook-www/ReactART-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
5 changes: 2 additions & 3 deletions compiled/facebook-www/ReactART-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down
5 changes: 2 additions & 3 deletions compiled/facebook-www/ReactART-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down
3 changes: 1 addition & 2 deletions compiled/facebook-www/ReactDOM-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions compiled/facebook-www/ReactDOM-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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,
Expand Down
7 changes: 3 additions & 4 deletions compiled/facebook-www/ReactDOM-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down Expand Up @@ -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";
7 changes: 3 additions & 4 deletions compiled/facebook-www/ReactDOM-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down Expand Up @@ -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";
Loading

0 comments on commit fb3bede

Please sign in to comment.