From 2c4221ce8bc5765bfddc4b32af4af602077a4a3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 21 Feb 2020 10:12:34 -0800 Subject: [PATCH] Change string refs in function component message (#18031) This should refer to string refs specifically. The forwardRef part doesn't make any sense in this case. I think this was just an oversight. --- .../react-dom/src/__tests__/ReactFunctionComponent-test.js | 2 +- packages/react-reconciler/src/ReactChildFiber.js | 6 ++++-- scripts/error-codes/codes.json | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js index 2b33321358ffd..c80a05c2113be 100644 --- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js @@ -159,7 +159,7 @@ describe('ReactFunctionComponent', () => { ReactTestUtils.renderIntoDocument(); }).toThrowError( __DEV__ - ? 'Function components cannot have refs.' + ? 'Function components cannot have string refs. We recommend using useRef() instead.' : // It happens because we don't save _owner in production for // function components. 'Element ref was specified as a string (me) but no owner was set. This could happen for one of' + diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index 59508f776e1ad..279b4b227f130 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -163,8 +163,10 @@ function coerceRef( const ownerFiber = ((owner: any): Fiber); invariant( ownerFiber.tag === ClassComponent, - 'Function components cannot have refs. ' + - 'Did you mean to use React.forwardRef()?', + 'Function components cannot have string refs. ' + + 'We recommend using useRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref', ); inst = ownerFiber.stateNode; } diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 5a2e9b8075e1e..dad5a7be3c7d2 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -307,7 +307,7 @@ "306": "Element type is invalid. Received a promise that resolves to: %s. Lazy element type must resolve to a class or function.%s", "307": "Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)", "308": "Context can only be read while React is rendering. In classes, you can read it in the render method or getDerivedStateFromProps. In function components, you can read it directly in the function body, but not inside Hooks like useReducer() or useMemo().", - "309": "Function components cannot have refs. Did you mean to use React.forwardRef()?", + "309": "Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://fb.me/react-strict-mode-string-ref", "310": "Rendered more hooks than during the previous render.", "311": "Should have a queue. This is likely a bug in React. Please file an issue.", "312": "Rendered more hooks than during the previous render",