Mention forwardRef() in <Fn ref={...} /> errors and warnings (faceboo…

…k#14644)
n8schloss · Jan 31, 2019 · b8963d6 · b8963d6
1 parent 3a2810a
commit b8963d6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -192,7 +192,9 @@ describe('ReactFunctionComponent', () => {
       ReactTestUtils.renderIntoDocument(<ParentUsingStringRef />),
     ).toWarnDev(
       'Warning: Function components cannot be given refs. ' +
-        'Attempts to access this ref will fail.\n\nCheck the render method ' +
+        'Attempts to access this ref will fail. ' +
+        'Did you mean to use React.forwardRef()?\n\n' +
+        'Check the render method ' +
         'of `ParentUsingStringRef`.\n' +
         '    in FunctionComponent (at **)\n' +
         '    in div (at **)\n' +
@@ -228,7 +230,9 @@ describe('ReactFunctionComponent', () => {
       ReactTestUtils.renderIntoDocument(<ParentUsingFunctionRef />),
     ).toWarnDev(
       'Warning: Function components cannot be given refs. ' +
-        'Attempts to access this ref will fail.\n\nCheck the render method ' +
+        'Attempts to access this ref will fail. ' +
+        'Did you mean to use React.forwardRef()?\n\n' +
+        'Check the render method ' +
         'of `ParentUsingFunctionRef`.\n' +
         '    in FunctionComponent (at **)\n' +
         '    in div (at **)\n' +
@@ -332,7 +336,9 @@ describe('ReactFunctionComponent', () => {
 
     expect(() => ReactTestUtils.renderIntoDocument(<Parent />)).toWarnDev(
       'Warning: Function components cannot be given refs. ' +
-        'Attempts to access this ref will fail.\n\nCheck the render method ' +
+        'Attempts to access this ref will fail. ' +
+        'Did you mean to use React.forwardRef()?\n\n' +
+        'Check the render method ' +
         'of `Parent`.\n' +
         '    in Child (at **)\n' +
         '    in Parent (at **)',

diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -138,7 +138,8 @@ function coerceRef(
         const ownerFiber = ((owner: any): Fiber);
         invariant(
           ownerFiber.tag === ClassComponent,
-          'Function components cannot have refs.',
+          'Function components cannot have refs. ' +
+            'Did you mean to use React.forwardRef()?',
         );
         inst = ownerFiber.stateNode;
       }

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -1293,7 +1293,8 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
       warning(
         false,
         'Function components cannot be given refs. ' +
-          'Attempts to access this ref will fail.%s',
+          'Attempts to access this ref will fail. ' +
+          'Did you mean to use React.forwardRef()?%s',
         info,
       );
     }

diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.internal.js
@@ -1202,7 +1202,9 @@ describe('ReactIncrementalSideEffects', () => {
     ReactNoop.render(<Foo show={true} />);
     expect(ReactNoop.flush).toWarnDev(
       'Warning: Function components cannot be given refs. ' +
-        'Attempts to access this ref will fail.\n\nCheck the render method ' +
+        'Attempts to access this ref will fail. ' +
+        'Did you mean to use React.forwardRef()?\n\n' +
+        'Check the render method ' +
         'of `Foo`.\n' +
         '    in FunctionComponent (at **)\n' +
         '    in div (at **)\n' +

diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
@@ -282,7 +282,9 @@ describe('ReactTestRenderer', () => {
     ReactTestRenderer.create(<Baz />);
     expect(() => ReactTestRenderer.create(<Foo />)).toWarnDev(
       'Warning: Function components cannot be given refs. Attempts ' +
-        'to access this ref will fail.\n\nCheck the render method of `Foo`.\n' +
+        'to access this ref will fail. ' +
+        'Did you mean to use React.forwardRef()?\n\n' +
+        'Check the render method of `Foo`.\n' +
         '    in Bar (at **)\n' +
         '    in Foo (at **)',
     );