Include module.hot.accept in template or docs for HMR

[nickserv]

I was pleasantly surprised to learn that CRA has built in HMR support, and enabling it can be as simple as adding module.hot && module.hot.accept() to the end of src/index.js. I no longer have a flash of content when trying to compare style differences between renders, which is very helpful in development. While I'm happy with my current implementation, I wish it was more discoverable without prior Webpack HMR experience, as the feature is disabled by default and not mentioned in the user guide or readme.

I propose adding module.hot && module.hot.accept() to src/index.js so it can be modified or removed by users with more complex setups. Alternatively if we can't change the template, we can add an HMR section to the user guide to explain recommendations for a manual setup (assuming the user isn't ejecting) and make the feature more obvious, or at least mention the feature is supported by react-scripts in the readme.

Note: It seems like #2304 is related but has a much wider scope. I'm interesting in a simple stopgap solution until we have that functionality built into react-scripts.

[Timer]

We are not going to advertise this as we suggest no one use HMR. It can lead to very difficult and hard to diagnose state bugs when used improperly.

Thanks for the suggestion!

[nickserv]

Do you have an example? I've never had issues with it, and I actually find it much harder to troubleshoot style changes without HMR because of the FOUC.

[bugzpodder]

I had a bad experience with it. I ended up in a state where there is a compile error or something and I could never resolve the issue even after if I fixed the code (stopping the devserver and restarting didn't help).

[Timer]

Style changes made in a .css file already hot reload, but reloading components is not safe.
Great examples that start to produce state errors are side-effect systems like redux-observable or redux-saga if you don't properly unsubscribe and re-subscribe to the reloaded module. Catching all edge cases and teaching people how to properly clean up after their components and registered events are hard.

[alexeyMohnatkin]

So maybe make this feature optional?

[murbanowicz]

If HMR is that bad, why React Native supports it natively?

[ozyman42]

Maybe there needs to be more of an effort to teach people how to properly clean up a module before it is swapped out for a new version. Maybe a better hot module API could aid in teaching people this.