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.
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
Enhance hooks error message #21351
Enhance hooks error message #21351
Conversation
Several commenters on issue facebook#13991 encountered the "Hooks can only be called inside the body of a function component" message because they invoked a function component without JSX decoration (that is, without calling React.createElement). That pattern may be a common source of error because it works as the developer intended until at some later data they add, for example, a call to `useState`. I had been successfully using a function component within another component, invoking it as: const Outer = () => Inner({a: 1}) Later, I added a call to `useState` within `Inner()`, and encountered the hooks error message. To avoid the problem I changed it to const Outer = () => <Inner a="1" /> (facebook#13991 (comment))
Comparing: 4874042...0be3f5b Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
"4. You might be invoking the function directly rather than using React.createElement"
afaik all tests passed, yet I see
But when I click Details it shows "Success". |
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
Apologies for closing. We've accidentally pushed a master branch to the repo (due to an old fork), then deleted it, and this lead to a bunch of PRs getting auto-closed. GitHub seems confused and unfortunately does not offer a way to reopen this against |
Several commenters on issue #13991 encountered the
"Hooks can only be called inside the body of a function component" message because they
invoked a function component without JSX decoration (that is, without calling
React.createElement). That pattern may be a common source of error because it works
as the developer intended until at some later date they add, for example, a call to
useState
.I had been successfully using a function component within another component, invoking it as:
Later, I added a call to
useState
withinInner()
, and encountered the hooks errormessage. To avoid the problem I changed it to
(#13991 (comment))
Summary
Test Plan