Skip to content

Commit 2c4221c

Browse files
authored
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.
1 parent 65bbda7 commit 2c4221c

File tree

3 files changed

+6
-4
lines changed

3 files changed

+6
-4
lines changed

packages/react-dom/src/__tests__/ReactFunctionComponent-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ describe('ReactFunctionComponent', () => {
159159
ReactTestUtils.renderIntoDocument(<Child test="test" />);
160160
}).toThrowError(
161161
__DEV__
162-
? 'Function components cannot have refs.'
162+
? 'Function components cannot have string refs. We recommend using useRef() instead.'
163163
: // It happens because we don't save _owner in production for
164164
// function components.
165165
'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +

packages/react-reconciler/src/ReactChildFiber.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,10 @@ function coerceRef(
163163
const ownerFiber = ((owner: any): Fiber);
164164
invariant(
165165
ownerFiber.tag === ClassComponent,
166-
'Function components cannot have refs. ' +
167-
'Did you mean to use React.forwardRef()?',
166+
'Function components cannot have string refs. ' +
167+
'We recommend using useRef() instead. ' +
168+
'Learn more about using refs safely here: ' +
169+
'https://fb.me/react-strict-mode-string-ref',
168170
);
169171
inst = ownerFiber.stateNode;
170172
}

scripts/error-codes/codes.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@
307307
"306": "Element type is invalid. Received a promise that resolves to: %s. Lazy element type must resolve to a class or function.%s",
308308
"307": "Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)",
309309
"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().",
310-
"309": "Function components cannot have refs. Did you mean to use React.forwardRef()?",
310+
"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",
311311
"310": "Rendered more hooks than during the previous render.",
312312
"311": "Should have a queue. This is likely a bug in React. Please file an issue.",
313313
"312": "Rendered more hooks than during the previous render",

0 commit comments

Comments
 (0)