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 a mismatched version of React and React DOM.
  2. When trying to break 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 dive deep into the above reasons.

Mismatched versions of React and React DOM.

We can check the version of react-dom by running the command npm ls react-dom. The react-dom version < 16.8.0 does not support react hooks. Always make sure the versions match and you aren't using an outdated version.

For updating the versions of react and react-dom packages, open the terminal in your project's root directory and run the below command.

npm install [email protected] [email protected]

If we are using typescript, run the below command.

npm install --save-dev @types/[email protected] @types/[email protected]

Breaking the Rules of Hooks

When breaking the rules of hooks may lead to React error “Invalid hook call. Hooks can only be called inside the body of a function component”. We should take care of the following rules when we use hooks.

  1. Only Call Hooks at the Top Level 
    Do not call react hooks inside any loops, conditions, or nested functions. Instead, call the react hooks at the top level of our React function or component, before any early returns. By following this rule, 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 from regular JavaScript functions. Instead, call hooks from React function components or from custom hooks.

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

If react imports resolve to two different exports objects it may lead to the above error. 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, we need to figure out and fix your dependency tree. Then install node modules by the below command.

npm install

Trying to call a react component as a function

Error "Invalid hook call. Hooks can only be called inside the body of a function component" may occur when we call a component as a function. 

We can only use components with the JSX syntax, e.g. <Product name="shirt" price="100" />, and not App({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”, check the version of react-dom we are using in the project. The react-dom version < 16.8.0 does not support react hooks. Make sure to call hooks at the top level in the component and not inside any conditions or regular javascript functions. Also, make sure to avoid multiple versions of react in the same project.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.