{
+ this.refs.P = current;
+ }}
+ id="P">
+
{
+ this.refs.P_P1 = current;
+ }}
+ id="P_P1">
+ {
+ this.refs.P_P1_C1 = current;
+ }}
+ id="P_P1_C1"
+ />
+ {
+ this.refs.P_P1_C2 = current;
+ }}
+ id="P_P1_C2"
+ />
-
+
{
+ this.refs.P_OneOff = current;
+ }}
+ id="P_OneOff"
+ />
);
}
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index a7b2d3e949797..f015c3c141354 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -98,6 +98,10 @@ if (__DEV__) {
};
}
+function isReactClass(type) {
+ return type.prototype && type.prototype.isReactComponent;
+}
+
function coerceRef(
returnFiber: Fiber,
current: Fiber | null,
@@ -121,7 +125,16 @@ function coerceRef(
element._owner &&
element._self &&
element._owner.stateNode !== element._self
- )
+ ) &&
+ // Will already throw with "Function components cannot have string refs"
+ !(
+ element._owner &&
+ ((element._owner: any): Fiber).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
) {
const componentName =
getComponentNameFromFiber(returnFiber) || 'Component';
@@ -224,6 +237,38 @@ function coerceRef(
}
}
}
+
+ if (typeof mixedRef === 'function' && element._owner) {
+ const owner: ?Fiber = (element._owner: any);
+ if (owner) {
+ const ownerFiber = ((owner: any): Fiber);
+
+ if (ownerFiber.tag === ClassComponent) {
+ const functionRef = mixedRef;
+ const resolvedInst = ownerFiber.stateNode;
+
+ // Check if previous function ref matches new function ref
+ if (
+ current !== null &&
+ current.ref !== null &&
+ typeof current.ref === 'function' &&
+ current.ref._functionRef === functionRef
+ ) {
+ return current.ref;
+ }
+
+ const ref = function(value) {
+ if (resolvedInst.refs === emptyRefsObject) {
+ // This is a lazy pooled frozen object, so we need to initialize.
+ resolvedInst.refs = {};
+ }
+ functionRef.call(resolvedInst, value);
+ };
+ ref._functionRef = functionRef;
+ return ref;
+ }
+ }
+ }
return mixedRef;
}
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 4c880a3e5283d..27bf0ac993bc2 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -98,6 +98,10 @@ if (__DEV__) {
};
}
+function isReactClass(type) {
+ return type.prototype && type.prototype.isReactComponent;
+}
+
function coerceRef(
returnFiber: Fiber,
current: Fiber | null,
@@ -121,7 +125,16 @@ function coerceRef(
element._owner &&
element._self &&
element._owner.stateNode !== element._self
- )
+ ) &&
+ // Will already throw with "Function components cannot have string refs"
+ !(
+ element._owner &&
+ ((element._owner: any): Fiber).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
) {
const componentName =
getComponentNameFromFiber(returnFiber) || 'Component';
@@ -224,6 +237,38 @@ function coerceRef(
}
}
}
+
+ if (typeof mixedRef === 'function' && element._owner) {
+ const owner: ?Fiber = (element._owner: any);
+ if (owner) {
+ const ownerFiber = ((owner: any): Fiber);
+
+ if (ownerFiber.tag === ClassComponent) {
+ const functionRef = mixedRef;
+ const resolvedInst = ownerFiber.stateNode;
+
+ // Check if previous function ref matches new function ref
+ if (
+ current !== null &&
+ current.ref !== null &&
+ typeof current.ref === 'function' &&
+ current.ref._functionRef === functionRef
+ ) {
+ return current.ref;
+ }
+
+ const ref = function(value) {
+ if (resolvedInst.refs === emptyRefsObject) {
+ // This is a lazy pooled frozen object, so we need to initialize.
+ resolvedInst.refs = {};
+ }
+ functionRef.call(resolvedInst, value);
+ };
+ ref._functionRef = functionRef;
+ return ref;
+ }
+ }
+ }
return mixedRef;
}
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 2ee501d2a433f..84807fbcfa082 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -128,7 +128,11 @@ export type Fiber = {
// I'll avoid adding an owner field for prod and model that as functions.
ref:
| null
- | (((handle: mixed) => void) & {_stringRef: ?string, ...})
+ | (((handle: mixed) => void) & {
+ _stringRef?: string,
+ _functionRef?: (handle: mixed) => void,
+ ...
+ })
| RefObject,
// Input is the data coming into process this fiber. Arguments. Props.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index e09c866d6d67d..712c0e7d07fe9 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -11,6 +11,7 @@
'use strict';
let React;
+let ReactFeatureFlags;
let ReactNoop;
let Scheduler;
@@ -19,6 +20,7 @@ describe('ReactIncrementalSideEffects', () => {
jest.resetModules();
React = require('react');
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactNoop = require('react-noop-renderer');
Scheduler = require('scheduler');
});
@@ -1306,8 +1308,19 @@ describe('ReactIncrementalSideEffects', () => {
}
ReactNoop.render(
);
- expect(Scheduler).toFlushWithoutYielding();
-
+ expect(() => {
+ expect(Scheduler).toFlushWithoutYielding();
+ }).toErrorDev(
+ ReactFeatureFlags.warnAboutStringRefs
+ ? [
+ 'Warning: Component "Foo" contains the string ref "bar". ' +
+ '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\n' +
+ ' in Foo (at **)',
+ ]
+ : [],
+ );
expect(fooInstance.refs.bar.test).toEqual('test');
});
});
diff --git a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
index c7e7a31acaaf6..585480c5a5891 100644
--- a/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js
@@ -500,7 +500,13 @@ describe('ReactShallowRenderer', () => {
it('can shallow render with a ref', () => {
class SomeComponent extends React.Component {
render() {
- return
;
+ return (
+
{
+ this.refs.hello = current;
+ }}
+ />
+ );
}
}
@@ -983,7 +989,11 @@ describe('ReactShallowRenderer', () => {
render() {
instance = this;
return (
-