add warning when owner and self are different for string refs

facebook · Jan 17, 2020 · 8da85b2 · 8da85b2
1 parent 29b4d07
commit 8da85b2
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 9 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js
@@ -69,4 +69,55 @@ 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: Owner and self do not match for the string ref "refComponent". Support for ' +
+      'string refs will be removed in a future major release, and refs ' +
+      'where owner and self are different cannot be safely codemoded. ' +
+      'We recommend fixing these by hand by using useRef() or createRef() ' +
+      'instead. Learn more about using refs safely here: ' +
+      'https://fb.me/react-strict-mode-string-ref' +
+      '\n    in Component (at **)',
+    ]);
+
+  })
+
 });
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -120,16 +120,29 @@ function coerceRef(
         const componentName = getComponentName(returnFiber.type) || 'Component';
         if (!didWarnAboutStringRefs[componentName]) {
           if (warnAboutStringRefs) {
-            console.error(
-              'Component "%s" contains the string ref "%s". 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: ' +
+            if (element._owner && element._self && element._owner.stateNode !== element._self) {
+              console.error(
+                'Owner and self do not match for the string ref "%s". Support for ' +
+                'string refs will be removed in a future major release, and refs ' +
+                'where owner and self are different cannot be safely codemoded. ' +
+                'We recommend fixing these by hand by using useRef() or createRef() ' +
+                'instead. Learn more about using refs safely here: ' +
                 'https://fb.me/react-strict-mode-string-ref%s',
-              componentName,
-              mixedRef,
-              getStackByFiberInDevAndProd(returnFiber),
-            );
+                mixedRef,
+                getStackByFiberInDevAndProd(returnFiber),
+              )
+            } else {
+              console.error(
+                'Component "%s" contains the string ref "%s". 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%s',
+                componentName,
+                mixedRef,
+                getStackByFiberInDevAndProd(returnFiber),
+              );
+            }
           } else {
             console.error(
               'A string ref, "%s", has been found within a strict mode tree. ' +