Skip to content

Commit

Permalink
add warning when owner and self are different for string refs
Browse files Browse the repository at this point in the history
  • Loading branch information
lunaruan committed Jan 21, 2020
1 parent 29b4d07 commit 6cb196b
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,50 @@ describe('ReactDeprecationWarnings', () => {
'\n in Component (at **)',
);
});

it('should not warn when owner and self are the same for string refs', () => {
class RefComponent extends React.Component {
render() {
return null;
}
}
class Component extends React.Component {
render() {
return <RefComponent ref="refComponent" __self={this} />;
}
}

ReactNoop.render(<Component />);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
'Warning: Component "Component" contains the string ref "refComponent". ' +
'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://fb.me/react-strict-mode-string-ref' +
'\n in Component (at **)',
]);
});

it('should warn when owner and self are different for string refs', () => {
class RefComponent extends React.Component {
render() {
return null;
}
}
class Component extends React.Component {
render() {
return <RefComponent ref="refComponent" __self={{}} />;
}
}

ReactNoop.render(<Component />);
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
'Warning: Component "Component" contains the string ref "refComponent". ' +
'Support for string refs will be removed in a future major release. ' +
'This case cannot be automatically converted to an arrow function. ' +
'We as you to manually fix this case by using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://fb.me/react-strict-mode-string-ref',
]);
});
});
12 changes: 11 additions & 1 deletion packages/react-reconciler/src/ReactChildFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,17 @@ function coerceRef(
if (__DEV__) {
// TODO: Clean this up once we turn on the string ref warning for
// everyone, because the strict mode case will no longer be relevant
if (returnFiber.mode & StrictMode || warnAboutStringRefs) {
if (
(returnFiber.mode & StrictMode || warnAboutStringRefs) &&
// We warn in ReactElement.js if owner and self are equal for string refs
// because these cannot be automatically converted to an arrow function
// using a codemod. Therefore, we don't have to warn about string refs again.
!(
element._owner &&
element._self &&
element._owner.stateNode !== element._self
)
) {
const componentName = getComponentName(returnFiber.type) || 'Component';
if (!didWarnAboutStringRefs[componentName]) {
if (warnAboutStringRefs) {
Expand Down
38 changes: 37 additions & 1 deletion packages/react/src/ReactElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import invariant from 'shared/invariant';
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';

import ReactCurrentOwner from './ReactCurrentOwner';
import getComponentName from 'shared/getComponentName';

const hasOwnProperty = Object.prototype.hasOwnProperty;

Expand All @@ -19,7 +20,13 @@ const RESERVED_PROPS = {
__source: true,
};

let specialPropKeyWarningShown, specialPropRefWarningShown;
let specialPropKeyWarningShown,
specialPropRefWarningShown,
didWarnAboutStringRefs;

if (__DEV__) {
didWarnAboutStringRefs = {};
}

function hasValidRef(config) {
if (__DEV__) {
Expand Down Expand Up @@ -89,6 +96,31 @@ function defineRefPropWarningGetter(props, displayName) {
});
}

function warnIfStringRefCannotBeAutoConverted(config) {
if (
typeof config.ref === 'string' &&
ReactCurrentOwner.current &&
config.__self &&
ReactCurrentOwner.current.stateNode !== config.__self
) {
const componentName = getComponentName(ReactCurrentOwner.current.type);

if (!didWarnAboutStringRefs[componentName]) {
console.error(
'Component "%s" contains the string ref "%s". ' +
'Support for string refs will be removed in a future major release. ' +
'This case cannot be automatically converted to an arrow function. ' +
'We as you to manually fix this case by using useRef() or createRef() instead. ' +
'Learn more about using refs safely here: ' +
'https://fb.me/react-strict-mode-string-ref',
getComponentName(ReactCurrentOwner.current.type),
config.ref,
);
didWarnAboutStringRefs[componentName] = true;
}
}
}

/**
* 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
Expand Down Expand Up @@ -260,6 +292,7 @@ export function jsxDEV(type, config, maybeKey, source, self) {

if (hasValidRef(config)) {
ref = config.ref;
warnIfStringRefCannotBeAutoConverted(config);
}

// Remaining properties are added to a new props object
Expand Down Expand Up @@ -324,6 +357,9 @@ export function createElement(type, config, children) {
if (config != null) {
if (hasValidRef(config)) {
ref = config.ref;
if (__DEV__) {
warnIfStringRefCannotBeAutoConverted(config);
}
}
if (hasValidKey(config)) {
key = '' + config.key;
Expand Down

0 comments on commit 6cb196b

Please sign in to comment.