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

Updated: 2018-Dec

New version of react-hot-loader is out now, link. Hooks is now working out of the box. Thank to the author, theKashey.

Check out this boilerplate https://github.com/ReeganExE/react-hooks-boilerplate

• React Hooks
• React Hot Loader
• Webpack, Babel, ESLint Airbnb

Previous Answer:

First, make sure you installed react@next and react-dom@next.

Then check for you are using react-hot-loader or not.

In my case, disable hot loader & HMR could get it work.

See https://github.com/gaearon/react-hot-loader/issues/1088.

Quoted:

Yes. RHL is 100% not compatible with hooks. There is just a few reasons behind it:

SFC are being converted to Class components. There is reason - to be able to forceUpdate on HMR, as long there is no "update" method on SFC. I am looking for other way of forcing the update (like this. So RHL is killing SFC.

"hotReplacementRender". RHL is trying to do React's job, and render the old and the new app, to merge them. So, obviously, that's broken now.

I am going to draft a PR, to mitigate both problems. It will work, but not today.

There is a more proper fix, which would work - cold API

You may disable RHL for any custom type.

import { cold } from 'react-hot-loader';

cold(MyComponent);

Search for "useState/useEffect" inside component source code, and "cold" it.

Updated:

As per updated from react-hot-loader maintainer, you could try react-hot-loader@next and set the config as bellow:

import { setConfig } from 'react-hot-loader';

setConfig({
  // set this flag to support SFC if patch is not landed
  pureSFC: true
});

Thank to @loganfromlogan for the update.

My problem was forgetting to update react-dom module. See issue.

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

<Route render={ComponentUsingHooks} />

instead of

<Route component={ComponentUsingHooks} />

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.