Published under React.
"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.
You cannot call hooks in class components:
You cannot call hooks inside event handlers:
You cannot call hooks inside
You cannot call hooks outside of React altogether:
Instead, call hooks at the top level function of your component: