Hooks are not called when using webpack-dev-server and HMR

Note: I wasn’t sure if it made sense to open this issue here or in the webpack repo… sorry if it doesn’t make sense!

Do you want to request a feature or report a bug? bug

What is the current behavior? Hooks are not being called when using webpack-dev-server with HotModuleReplacementPlugin

More specifically (see link to repo for source code): The callback given to useEffect is not run and typing into the input does no update

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I have created a repository that reproduces the bug: https://github.com/terrencewwong/hooks-webpack-hmr-bug

What is the expected behavior?

1. The callback given to useEffect should run and log “USING EFFECT WITH HMR”
2. Typing into the input should update the text state: …

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React:16.7.0-alpha.0 I’m using Mac OS 10.13.6 and Chrome 70.0.3538.77

Did this work in previous versions of React?

No

[gaearon]

Please file this issue with react-hot-loader (ironically I started that project, but I’m not currently maintaining it). Due to lack of certain necessary features in React, this project currently uses some techniques which break Hooks. AFAIK there’s some way to work around them, although I’m not sure what those are exactly. You can probably search that repo’s issues for mentions of Hooks.

I plan to work on fixing this since Hooks should enable us to implement hot reloading in a much simpler way.

[andersblom]

There’s no reason why Hooks wouldn’t work in development mode 🙂

I think React Hot Loader just does the hacky stuff in dev mode only. Which is why disabling it fixes the issue.

But we don’t recommend disabling development mode in development.

Ah, right. I wasn’t implying it was a Hooks problem, although I can see it might have come across like that. My bad - and you’re totally right, if I use Hooks without HMR in development mode everything works!