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?