diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js index 7b7d5fa6198e2..f6359e20190b0 100644 --- 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(), ).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(), ).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()).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 index fd1aa488c6654..29e1a5c12939a 100644 --- 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 index 8328b694f0724..63623033af146 100644 --- 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 index 42f60af9aa5ea..f5195298614ec 100644 --- 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(); 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 index 17fc7f1c50334..8240fbe75a8a4 100644 --- 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(); expect(() => ReactTestRenderer.create()).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 **)', );