React Hooks Error: Hooks can only be called inside the body of a function component

Question

I am getting this error when using the useState hook. I have this in it\'s basic form, looking at the react docs for a reference, but am still getting this erro

Answer 1

If you are using Create React App, you have to update "react-scripts" version also with react and react-dom version.

 "react-scripts": "2.1.5",
 "react": "^16.8.1",
 "react-dom": "^16.8.1",

this combination works fine.

Answer 2

Had the same issue. My problem was related to React Router. I had accidentally used

<Route render={ComponentUsingHooks} />

instead of

<Route component={ComponentUsingHooks} />

Answer 3

For fellow users of yarn workspaces, here's my situation and how I figured it out.

• packages
  • foo
    • react@16.8.6
  • bar
    • react@16.10.1

The Facebook docs on Invalid Hook Call Warning say nothing about yarn workspaces, so I assumed my config was correct. But it wasn't. You can fix the error only by using the same version across all your packages.

In the example above, you have to bump the version of react from "foo" to 16.10.1, so that it matches the react version from "bar".

Bonus: see this discussion on GitHub for a beautiful collection of emotional baggage offloaded on the Internet.

Answer 4

I was able to solve this by importing React's primitive hooks in the component file, then passing them into my custom hooks. For some reason, the error only occurs when I import the React hook (like useState) in my custom hook file.

I'm importing useState in my component file:

import React, {useState} from 'react'; // import useState

import {useCustomHook} from '../hooks/custom-hook'; // import custom hook

const initialState = {items: []};
export default function MyComponent(props) {
    const [state, actions] = useCustomHook(initialState, {useState});
    ...
}

Then in my hook file:

// do not import useState here

export function useCustomHook(initialValue, {useState}) {
    const [state, setState] = useState(initialValue || {items: []});

    const actions = {
        add: (item) => setState(currentState => {
            const newItems = currentState.items.concat([item]);
            return {
                ...currentState,
                items: newItems,
            };
        }),
    };

    return [state, actions];
}

This method has improved the testability of my hooks because I don't need to mock React's library to provide the primitive hooks. Instead, we can pass in a mock useState hook right into the custom hook's function. I think this improves code quality, as your custom hooks now have no coupling with the React library, allowing for more natural functional programming and testing.

Answer 5

For those who come across this issue when using MobX and wrapping a component with an observer, make sure you use mobx-react-lite instead of mobx-react.

MAY 29 UPDATE

From mobx-react 6.0.0 onward, hook based components are now supported by mobx-react, thus, there is no need for mobx-react-lite usage anymore (if that was your problem).

Answer 6

For me, this was occurring because I had a new version of react (16.8.6) and an old version of react-dom (16.6.1).

https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom

Upgrading both to @latest (16.8.6) fixed the error.