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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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

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

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.

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

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and needs a reboot.

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.

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