"Hooks can only be called inside the body of a function component" ReactJS error

Published under React.

📺  Click here to skip to the video attached to this post  👇

"Hooks can only be called inside the body of a function component."

This is a common warning that developers run into when starting out with hooks in React. There are 3 possible reasons for this warning:

  • You may have mismatching versions of React and ReactDOM.

  • You may have more than one copy of React running in your application such that the version of React imported by ReactDOM is not that same version that you import in your application.

  • Most common: You're breaking the rules of hooks. You must only call hooks while React is rendering a function component.

The rules of hooks

You cannot call hooks in class components:

You cannot call hooks inside event handlers:

You cannot call hooks inside useMemouseReducer, or useEffect:

You cannot call hooks outside of React altogether:

Instead, call hooks at the top level function of your component:

Thanks for reading!

Did you find this post useful? Let me know on Twitter! If you found an issue with the content, submit a pull request!

Subscribe to my newsletter to know when I publish more content in the future.

❤️ Likes: 0
📣 Retweets: 0
💬 Replies: 0
🙊 Mentions: 0