Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change string refs in function component message #18031

Merged
merged 1 commit into from
Feb 21, 2020
Merged

Change string refs in function component message #18031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ describe('ReactFunctionComponent', () => {
ReactTestUtils.renderIntoDocument(<Child test="test" />);
}).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' +
Expand Down
6 changes: 4 additions & 2 deletions packages/react-reconciler/src/ReactChildFiber.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion scripts/error-codes/codes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update this doc to mention useRef?

"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",
Expand Down