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

by

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.

More Related Contents:

  1. State not updating when using React state hook within setInterval
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Wrong React hooks behaviour with event listener
  7. React hooks – right way to clear timeouts and intervals
  8. How to call loading function with React useEffect only once
  9. React Hooks useState() with Object
  10. How to use componentWillMount() in React Hooks?
  11. Is it possible to share states between components using the useState() hook in React?
  12. react useEffect comparing objects
  13. React useState hook event handler using initial state
  14. Multiple calls to state updater from useState in component causes multiple re-renders
  15. What’s the difference between `useRef` and `createRef`?
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. How to programmatically clear/reset React-Select?
  18. React – useState – why setTimeout function does not have latest state value?
  19. What does useCallback/useMemo do in React?
  20. React Hooks useState+useEffect+event gives stale state
  21. How to add “refs” dynamically with react hooks?
  22. Do we still need functional setState way in react hooks?
  23. Why can’t React Hooks be called inside loops or nested function?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. Equivalent to componentDidUpdate using React hooks
  26. Performance penalty of creating handlers on every render with react-hooks
  27. Function inside functional component in React hooks – Performance
  28. Updating state to the same value directly in the component body during render causes infinite loop
  29. React Hooks render twice
  30. Why would we use useEffect without a dependency array?

Leave a Comment