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

avatar
Borislav Hadzhiev

Last updated: Jan 15, 2023
4 min

banner

# 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.

invalid hook call hooks can only be called

# 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.

shell
# ๐Ÿ‘‡๏ธ 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

solve mismatch between react and react dom

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.

shell
# for macOS and Linux rm -rf node_modules rm -f package-lock.json rm -f yarn.lock # ๐Ÿ‘‡๏ธ clean npm cache npm cache clean --force # ๐Ÿ‘‡๏ธ install packages npm install

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

cmd
# for Windows rd /s /q "node_modules" del package-lock.json del -f yarn.lock # ๐Ÿ‘‡๏ธ clean 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.

App.js
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> ); }
The issue is that we are calling the App component as a function.

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

Make sure you aren't calling hooks inside of a class component or a function that is neither a component nor a custom hook.

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.

App.js
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.

App.js
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.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev