Reload on Save is triggering full HMR reload

[gnoff]

Hi It's been a while since I have set up a new React project with HMR functionality so I apologize if this is known and/or expected.

When I create-react-app new-app and npm start updates to App.js are reloaded but the webpack HMR is doing a full reload.

My specific steps were

1. create new app with create-react-app
2. start app and visit index with npm start (browser window opened automatically
3. Changed App.js line 14:

To get started, edit <code>src/App.js</code> and save to reload.

to

To get started, edit <code>src/App.js</code> and save to reload.............

1. reviewed the browser console and saw:

[WDS] App updated. Recompiling...
client:90 [WDS] App hot update...
dev-server.js:55 [HMR] Checking for updates on the server...
dev-server.js:18 [HMR] Cannot apply update. Need to do a full reload!
dev-server.js:19 [HMR] Error: Aborted because 256 is not accepted
    at hotApply (http://localhost:3000/static/js/bundle.js:391:31)
    at hotUpdateDownloaded (http://localhost:3000/static/js/bundle.js:304:13)
    at hotAddUpdateChunk (http://localhost:3000/static/js/bundle.js:284:13)
    at webpackHotUpdateCallback (http://localhost:3000/static/js/bundle.js:5:12)
    at http://localhost:3000/0.0234ed6f7496ad680301.hot-update.js:1:1

I know there are some limitations with HMR and react hot reloader so if this is expected per the configuration then I'll quickly close this issue but it was surprising behavior to me

[gaearon]

There is by design.
(I know it’s confusing because of WDS logs: #263)

Hot reloading is currently only supported for CSS. React Hot Loader is not included in this setup because it’s not stable enough to be recommended as a default setup for everyone. If it’s ever stable enough, we will include it in the future.

[gnoff]

Thanks I figured it was something like this.

[aleemb]

@gaearon hot reload is the primary reason I came looking here. If you could have a dev channel with hot reload, a lot of people would find it useful.

[gaearon]

One step at a time 😉

[srhise]

So, you have to eject to get HMR working at the component level. Just making sure.

[gaearon]

Technically you can write a top-level module.hot.accept handler in src/index.js and re-render your app with a new version of <App> component on change but that will reset the internal component state. For granular updates, yes, currently you would have to eject.

[aleemb]

For my purposes, I added React StoryBook and was able to get HMR. It has the added advantage of showing the errors directly on the screen which has better visibility than having to look at the CLI manually for errors.

[gaearon]

@aleemb If you’d like, you can contribute “Adding Storybook” to the Usage Guide.

[dzannotti]

For those reaching here from google, you can technically add

if (module.hot) {
  module.hot.accept('./App', function () {
    var NextApp = require('./App').default
    ReactDOM.render(<NextApp />, document.getElementById('root'))
  })
}

to your src/App.js and it'll work. Please do note that HMR for React/dom is not stable yet, and has downsides (which is why it's not enabled by default).

💀 use at your own risk 💀

(imho still better than ejecting)

[gaearon]

It will work but not preserve the state, which is not much better than a full refresh. Depends on whether you use something like Redux I guess 😄 .

[jonstuebe]

@gaearon by not preserving state, do you mean it's re-mounting components and thus resetting state?

[bordi]

@jonstuebe exactly. it will reset internal state

[cubodehelio]

I'm using redux with react, but I cant find any modern example on how to use it with hmr without loosing the redux state :(

[gaearon]

@cubodehelio What have you tried?

[cubodehelio]

hey @gaearon it turns out that i'm still learning here, sometimes everything works just fine and others it doesn't, normal stuff. Thanks for you work!

[gaearon]

If you create a new issue describing what you've tried (and maybe attaching a project) we could help.

[fingermark]

Was surprised to find that hot component reloading didn't work out of the box. Should have read the README. Would it be possible to have this enabled with an experimental flag?

[gaearon]

No until it is implemented in a proper stable way.

We are adding the error box in 0.10 which is a good first step towards this. We will look at enabling it for functional components at some point after that.

[AlexanderOtavka]

@dzannotti I tried your snippet, and while it works for regular react-scripts, it doesn't work when using react-scripts-ts. It looks like index.tsx gets wrapped in webpackHotUpdate() and the callback in module.hot.accept never gets called.

I don't really understand how hot works. Any advice?