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.

1. Have mismatched versions of React and React DOM.
2. Breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.
4. 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.

1. 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.
2. 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.