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 **)',
);