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

# 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 for multiple reasons:

1. Having a mismatch between the versions of react and react-dom.
2. Having multiple versions of the react package in the same project.
3. Trying to call a component as a function, e.g. App() instead of <App />
4. Using hooks inside of classes or a function that isn't a component or a custom hook.

# A mismatch between the versions of react and react-dom

Open your terminal in your project's root directory and update the versions of your react and react-dom packages to make sure the versions match and you aren't using an outdated version.

Copied!
# 👇️ with NPM
npm install react@latest react-dom@latest

# 👇️ ONLY If you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest

# ----------------------------------------------

# 👇️ with YARN
yarn add react@latest react-dom@latest

# 👇️ ONLY If you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

If the error persists, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

# Delete your node_modules and reinstall your dependencies

The error is often caused by having multiple versions of react in the same project.

If you are on macOS or Linux, issue the following commands in bash or zsh.

Copied!
#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are on Windows, issue the following commands in CMD.

Copied!
# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean your npm cache
npm cache clean --force

# 👇️ install packages
npm install

Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and needs a reboot.

# Calling a component as a function

Here is another example of how the error occurs.

Copied!
import {useState} from 'react';

// 👇️ Don't call components as functions 👇️
App();

export default function App() {
  /**
   * ⛔️ 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
   */
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

You should only use components with the JSX syntax, e.g. <App country="Austria" age="30" />, and not App({country: 'Austria', age: 30}).

If you have a class, convert it to a function to be able to use hooks.

# Only use hooks in components and custom hooks

Here is an example of how the error is caused in a function that is neither a component nor a custom hook.

Copied!
import {useState, useEffect} from 'react';

// 👇️ Not a component nor custom hook ⛔️⛔️⛔️
// so it can't use hooks
function counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('hello world');
  }, []);
}

The counter function starts with a lowercase c, so it's not considered a component by React because all component names must start with a capital letter.

It also isn't a custom hook because its name doesn't start with use, e.g. useCounter.

We are only able to use hooks inside of function components or custom hooks, so one way to be able to use hooks is to rename counter to useCounter.

Copied!
import {useState, useEffect} from 'react';

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

  useEffect(() => {
    console.log('hello world');
  }, []);
}

React now recognizes useCounter as a custom hook, so it allows us to use hooks inside of it.

Like the documentation states:

• Only call hooks from React function components or from custom hooks.
• Only call hooks at the top level.
• Don't call hooks inside loops, conditions or nested functions.
• Always use hooks at the top level of your React function, before any early returns.

# Conclusion

To solve the error "Invalid hook call. Hooks can only be called inside the body of a function component", make sure:

1. You don't have a mismatch between the versions of react and react-dom.
2. You don't have multiple versions of react installed.
3. You aren't trying to call a component as a function, e.g. App() instead of <App />.
4. You don't use hooks inside of a class or a function that is not a component or a custom hook.