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.

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

Closed

Conversation

hwinkler
Copy link

@hwinkler hwinkler commented Apr 25, 2021

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:

  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" />

(#13991 (comment))

Summary

Test Plan

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))
@sizebot
Copy link

sizebot commented Apr 25, 2021

Comparing: 4874042...0be3f5b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 122.76 kB 122.76 kB = 39.42 kB 39.42 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 129.34 kB 129.34 kB = 41.51 kB 41.51 kB
facebook-www/ReactDOM-prod.classic.js = 412.52 kB 412.52 kB = 76.35 kB 76.35 kB
facebook-www/ReactDOM-prod.modern.js = 400.55 kB 400.55 kB = 74.45 kB 74.45 kB
facebook-www/ReactDOMForked-prod.classic.js = 412.52 kB 412.52 kB = 76.35 kB 76.35 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 0be3f5b

"4. You might be invoking the function directly rather than using React.createElement"
@hwinkler
Copy link
Author

afaik all tests passed, yet I see

ci/circleci: yarn_test--r=stable --env=development --persistent Pending — CircleCI is running

But when I click Details it shows "Success".

@stale
Copy link

stale bot commented Jan 9, 2022

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.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Jan 9, 2022
@sebmarkbage sebmarkbage deleted the branch facebook:master October 20, 2022 20:42
@gaearon
Copy link
Collaborator

gaearon commented Oct 20, 2022

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 main. I can't promise when we'll get to reviewing, but if there is still interest in this PR, we'd appreciate a resubmit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Resolution: Stale Automatically closed due to inactivity
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants