Skip to content

Commit 8da85b2

Browse files
committed
add warning when owner and self are different for string refs
1 parent 29b4d07 commit 8da85b2

File tree

2 files changed

+73
-9
lines changed

2 files changed

+73
-9
lines changed

packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,55 @@ describe('ReactDeprecationWarnings', () => {
6969
'\n in Component (at **)',
7070
);
7171
});
72+
73+
it ('should not warn when owner and self are the same for string refs', () => {
74+
class RefComponent extends React.Component {
75+
render() {
76+
return null;
77+
}
78+
}
79+
class Component extends React.Component {
80+
81+
render() {
82+
return <RefComponent ref="refComponent" __self={this}/>;
83+
}
84+
}
85+
86+
ReactNoop.render(<Component />);
87+
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
88+
'Warning: Component "Component" contains the string ref "refComponent". ' +
89+
'Support for string refs will be removed in a future major release. ' +
90+
'We recommend using useRef() or createRef() instead. ' +
91+
'Learn more about using refs safely here: ' +
92+
'https://fb.me/react-strict-mode-string-ref' +
93+
'\n in Component (at **)',
94+
]);
95+
})
96+
97+
it ('should warn when owner and self are different for string refs', () => {
98+
class RefComponent extends React.Component {
99+
render() {
100+
return null;
101+
}
102+
}
103+
class Component extends React.Component {
104+
105+
render() {
106+
return <RefComponent ref="refComponent" __self={{}}/>;
107+
}
108+
}
109+
110+
ReactNoop.render(<Component />);
111+
expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
112+
'Warning: Owner and self do not match for the string ref "refComponent". Support for ' +
113+
'string refs will be removed in a future major release, and refs ' +
114+
'where owner and self are different cannot be safely codemoded. ' +
115+
'We recommend fixing these by hand by using useRef() or createRef() ' +
116+
'instead. Learn more about using refs safely here: ' +
117+
'https://fb.me/react-strict-mode-string-ref' +
118+
'\n in Component (at **)',
119+
]);
120+
121+
})
122+
72123
});

packages/react-reconciler/src/ReactChildFiber.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -120,16 +120,29 @@ function coerceRef(
120120
const componentName = getComponentName(returnFiber.type) || 'Component';
121121
if (!didWarnAboutStringRefs[componentName]) {
122122
if (warnAboutStringRefs) {
123-
console.error(
124-
'Component "%s" contains the string ref "%s". Support for string refs ' +
125-
'will be removed in a future major release. We recommend using ' +
126-
'useRef() or createRef() instead. ' +
127-
'Learn more about using refs safely here: ' +
123+
if (element._owner && element._self && element._owner.stateNode !== element._self) {
124+
console.error(
125+
'Owner and self do not match for the string ref "%s". Support for ' +
126+
'string refs will be removed in a future major release, and refs ' +
127+
'where owner and self are different cannot be safely codemoded. ' +
128+
'We recommend fixing these by hand by using useRef() or createRef() ' +
129+
'instead. Learn more about using refs safely here: ' +
128130
'https://fb.me/react-strict-mode-string-ref%s',
129-
componentName,
130-
mixedRef,
131-
getStackByFiberInDevAndProd(returnFiber),
132-
);
131+
mixedRef,
132+
getStackByFiberInDevAndProd(returnFiber),
133+
)
134+
} else {
135+
console.error(
136+
'Component "%s" contains the string ref "%s". Support for string refs ' +
137+
'will be removed in a future major release. We recommend using ' +
138+
'useRef() or createRef() instead. ' +
139+
'Learn more about using refs safely here: ' +
140+
'https://fb.me/react-strict-mode-string-ref%s',
141+
componentName,
142+
mixedRef,
143+
getStackByFiberInDevAndProd(returnFiber),
144+
);
145+
}
133146
} else {
134147
console.error(
135148
'A string ref, "%s", has been found within a strict mode tree. ' +

0 commit comments

Comments
 (0)