[React Hooks] Incompatibility with react-hot-loader

[bkniffler]

Description

The new react hooks API does not work with react-hot-loader. Using the example in my app with export default hot(module)(App); at the bottom of app.js, the following error occurs:

Expected behavior

Should work.

Actual behavior

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

Reproducible Demo

Dunno of a demo is needed, just ping me if you need one.

[bkniffler]

Partially related
facebook/react#13972

[simmo]

Yes I've just seen the same. I tried removing my hot(module)(App) equivalent but also required removing babel plugin to get hooks to work.

[theKashey]

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.

[harisvsulaiman]

This could be a workaround gatsbyjs/gatsby#9489 (comment)

[theKashey]

Next version of RHL, with 16.6 support will add memo and lazy support, and thus break this "fix".

Right now memo-ed components are invisible to RHL, as long they are not functions, but objects.

[theKashey]

There is a more proper fix, which would work my better and ever after - cold API

You may disable RHL for any custom type.

import { cold } from 'react-hot-loader';
cold(MyComponent);

or just search for "useState/useEffect" inside component source code, and ❄️it.

import { setConfig, cold } from 'react-hot-loader'
setConfig({
  onComponentRegister: (type, name, file) =>
    (String(type).indexOf('useState') > 0 ||  String(type).indexOf('useEffect') > 0) && cold(type),
})

[theKashey]

Meanwhile, everything depends on this - reactjs/rfcs#74

[pedronauck]

I just set pureSFC and everything works fine, this can be a problem for other pieces @theKashey?

setConfig({ pureSFC: true })

[painedpineapple]

Using setConfig({ pureSFC: true }) does it for me. Even though I get the error below, it still hot-reloads even the components using hooks.

index.js:1452 React-hot-loader: reconciliation failed could not dive into [ ƒ children(props) {
          var child = _children(item, state, i);

          return child ? child(props) : null;
        } ] while some elements are still present in the tree.

[theKashey]

Probably pureSFC is a good option. Just

• don't wrap SFC with hot - top component should be a component to be able to update nested tree on HMR.
• don't define contextTypes on it (not a problem for hooks)
• it would probably fail to reconcile updates, and will generate some error in "hot-render", and then continue from the next renderable component.

So - just don't use "hidden" components (ie not exported as a top level variables) - and that would be ok.
Also - there could be a problem with force update.

[theKashey]

PS: While we found a way to handle hooks, React.memo and lazy is not yet supported
(#1084)