[Fix] 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”, is an error that is invoked when you are working laravel version 8 and are trying to install some packages. Given below is the snippet of the error you might get:

Invalid hook call. Hooks can only be called inside the body of a function component

Warning: Invalid hook call. Hooks can only be
   * called inside of the body of a function component.
   *  This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I would like to share with you the steps I took to fix the “Invalid hook call. Hooks can only be called inside the body of a function component”

Why “Invalid hook call. Hooks can only be called inside the body of a function component” Error is Seen?

The error, “Invalid hook call. Hooks can only be called inside the body of a function component” is seen because of one of the below mentioned reasons:

Cause 1: This error can be caused because of a discrepancy between react and react-dom versions in your project versions.

Cause 2: This error is also caused if you are using hooks inside of classes or functions that are not components or custom hooks.

Cause 3: This error can be caused because of having different react package versions in the same project.

Cause 4: The error is caused when attempting to invoke a component as a function, for as by using App() rather than App />.

Error “Invalid hook call. Hooks can only be called inside the body of a function component” is basically seen because of discrepancy between react and react-dom versions, if you are using hooks inside of classes or functions that are not components or custom hooks or when you are attempting to invoke a component as a function, as by using App() rather than App />.

The detailed solution to fix the error “Invalid hook call. Hooks can only be called inside the body of a function component”, is given below:

How to Fix “Invalid hook. call Hooks can only be called inside the body of a function component” Error?

To fix the error “Invalid hook call. Hooks can only be called inside the body of a function component”, first you will have to make sure to Update your versions of your react and react-dom to the latest version (18.2.0) in your system and error “Invalid hook call. Hooks can only be called inside the body of a function component” will be fixed.

Alternatively try deleting your package-lock.json and node modules files, run npm install again, and restart your IDE. Make sure to use the ‘App’ component appropriately and finally use hooks only inside of a component or a custom hook and error “Invalid hook call. Hooks can only be called inside the body of a function component” will be fixed.

To fix the error, “Invalid hook call. Hooks can only be called inside the body of a function component“, you will have to follow the steps mentioned below:

Step 1: Update Versions of react and react-dom

To fix the error, make that the versions of your react and react-dom packages match and that you are not using an outdated version by opening your terminal in the root directory of your project. Follow the below mentioned code to update your react and react-dom:

# For NPM
npm install react@latest react-dom@latest

# For TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest


# For YARN
yarn add react@latest react-dom@latest

# For TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

This should fix the error, “Invalid hook call. Hooks can only be called inside the body of a function component”

Step 2:  Delete node_modules and package-lock.json

If you are still facing the error, it is likely that the error is caused by having different versions of ‘react’ in your system.

Try deleting your package-lock.json and node modules files, running npm install again, and restarting your IDE. Make sure not to delete your package.json.

To do so follow the below mentioned code:

# For deleting node_modules and package-lock.json

rm -rf node_modules
rm -f package-lock.json

# To clean npm cache
npm cache clean --force

npm install

Note: If the error continues, make sure you restart your IDE and development server. VSCode frequently develops bugs and requires a restart.

This should fix the error, “Invalid hook call. Hooks can only be called inside the body of a function component”

Step 3:  Use the ‘App’ component appropriately

If you still face the error then it is likely that you are not using the ‘App’ component appropriately.

For example you must be using the app component like this:App({Ocean: ‘Oceana’, area: sea}), instead you should be using it as like this: <App Ocean=”Oceana”area=”sea” />. Fixing this will immediately fix your error.

This should fix the error, “Invalid hook call. Hooks can only be called inside the body of a function component”

Step 4:  Use Hooks only Inside of a Component or Custom Hook

If you still face the error then it is likely that you are not using hooks only inside of a component or a custom hook.

Given below is an example if you are using counter to use hooks and how you may fix error “Invalid hook call. Hooks can only be called inside the body of a function component”:

import {useState, useEffect} from 'react';

// neither a component nor custom hook

function counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Welcome to the Network community');
  }, []);
}

Renaming counter to useCounter is one technique to enable hook usage as we can only use hooks inside of function components or custom hooks.

We may now utilize hooks inside of useCounter because React now recognizes it as a custom hook. Given below is an example how to fix error:

import {useState, useEffect} from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Welcome to the Network community');
  }, []);
}

Here will be some rules that you will have to keep in mind while using hooks. Hooks shouldn’t be called inside of loops, conditions, or nested functions.

Use hooks first, before any early returns, in the top level of your React method. Call hooks only at the top level. Call hooks only from custom hooks or React function components.

This should fix the error, “Invalid hook call. Hooks can only be called inside the body of a function component”

Conclusion

To fix the error “Invalid hook call. Hooks can only be called inside the body of a function component”, first you will have to make sure to Update your versions of your react and react-dom to the latest version (18.2.0) in your system and error will be fixed.

If you still face the error try deleting your package-lock.json and node modules files, running npm install again, and restarting your IDE.

Make sure to use the ‘App’ component appropriately and finally use hooks only inside of a component or a custom hook and error “Invalid hook call. Hooks can only be called inside the body of a function component” will be fixed.