add warning when owner and self are different for string refs

facebook · Jan 18, 2020 · 3bd634a · 3bd634a
1 parent 29b4d07
commit 3bd634a
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 10 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,51 @@ 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,33 @@ 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: ' +
-                'https://fb.me/react-strict-mode-string-ref%s',
-              componentName,
-              mixedRef,
-              getStackByFiberInDevAndProd(returnFiber),
-            );
+            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',
+                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. ' +