Invalid hook call. Hooks can only be called inside the body of a function component
The error "Invalid hook call. Hooks can only be called inside the body of a function component" occurs due to the following reasons.
- Have mismatched versions of React and React DOM.
- Breaking the Rules of Hooks.
- You might have more than one copy of React in the same app.
- When trying to call a react component as a function, e.g. App() instead of <App />.
Let us discuss the above reasons in detail.
Mismatched versions of React and React DOM.
Mismatched versions of React and React DOM may cause the error “Invalid hook call”. The react-dom version < 16.8.0 does not support react hooks. So always make sure that you aren't using an outdated version of react-dom.
You can check the version of react-dom by running the below command.
npm ls react-dom
To update the versions of react and react-dom packages, open the terminal in your project's root directory and run the below command.
npm install react@latest react-dom@latest
If we are using typescript, run the below command.
npm install --save-dev @types/react@latest @types/react-dom@latest
Breaking the Rules of Hooks
The error “Invalid hook call” may also happen when you break the rules of hooks. We should take care of the following rules when you use React hooks.
- Only Call Hooks at the Top Level
Do not call react hooks inside any loops, conditions, or nested functions. You can call the react hooks on top before any return statements. By doing this, we are ensuring that react hooks are called in the same order each time a component renders. - Only Call Hooks from React Functions
Do not call react hooks inside a regular JavaScript function. Instead, you can call hooks from React functional components or you can use hooks inside a custom hook.
Apart from the above rules, react hook is not supported in the following cases.
- Do not call React hooks inside a class component.
- Do not call React hooks in event handlers.
- Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.
Multiple versions of react in the same project
The multiple versions of React in the same project will lead to the error “Invalid hook call”. React imports may resolve to two different export objects when you have multiple versions of React. This may happen if you accidentally end up with two copies of the react package. We can list the react packages installed by the following command.
npm ls react
If more than one React is listed, you need to figure out and fix your dependency tree. Then install node modules by the below command.
npm install
“Invalid hook call” error when calling react component as a function
The error "Invalid hook call. Hooks can only be called inside the body of a function component" may also occur when you call a component as a function.
We can only use components with the JSX syntax, e.g. <Product name="shirt" price="100" />
, and not Product({name: 'shirt', price: 100})
.
Conclusion
To solve the React error “Invalid hook call. Hooks can only be called inside the body of a function component”, make sure you are not using react-dom version < 16.8.0 does not support react hooks, and call hooks at the top level in the component. Also make sure to not use react hooks inside any conditions or regular javascript functions and avoid multiple versions of react in the same project.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
Invalid DOM property `for`. Did you mean `htmlFor`
Can't Perform a React State Update on an Unmounted Component
Warning: The tag is unrecognized in this browser
How to disable a Link in React
Get the Mouse Position (coordinates) in React
Pass data from child to parent component in React
How to check internet connection(online or offline) in React
React objects are not valid as a react child
Explore All Blogs