0

I'm developing a React app, created with create-react-app v2. Recently I began to use a CSS-in-JS library, namely, styled-components. Beforehand, I didn't care much whether the whole app is reloaded on each change or there is hot module replacement. But with CSS-in-JSS it's very annoying when the whole app is reloaded when I change css.

I found out that despite the fact, the hot option of webpack config is enabled by CRA2, there is no hot reloading.

I should say that I have never configured HMR by myself in webpack, so I don't have a solid knowledge of how it should be used.

I searched for a decision, but it's all rather vague for me. I came up with the following questions:

  1. What is the difference between react-hot-loader and usual HMR? Can I have hot module replacement (at least for css) without react-hot loader?

  2. Can I enable HMR somehow without ejecting? I have seen solutions for CRA1, but I use CRA2. Also I use craco to adjust default CRA2 webpack config, so I will be glad to find a solution with a slight change of webpack configuration too.

  3. Why HMR isn't enabled by default by CRA2? Actually I always thought that it's enabled and the whole reload is just required by some reasons - I didn't care much about it and everything was ok for me.

RussCoder
  • 889
  • 1
  • 7
  • 18

1 Answers1

3

What is the difference between react-hot-loader and usual HMR? Can I have hot module replacement (at least for css) without react-hot loader?

Hot Module Replacement (HMR) is a core capability offered by Webpack. Webpack's compiler offers a module.hot.accept() API. Your application code can register callbacks to run when certain files have been recompiled.

react-hot-loader is a separate library that uses webpack's HMR to preserve the component's state. If you only use HMR, on each save it will reload or re-render your application, therefore all the state of your application would be lost. To avoid this you would need RHL or react-hot-loader.

CRA2 already has HMR enabled by default, I created one and ejected it to see the config of webpack. If you do not need your application state preserved then you can just use HMR without installing RHL.

References :

  1. Webpack HMR vs React-Hot-Loader
  2. Webpack configurations
Utsav Patel
  • 2,789
  • 1
  • 16
  • 26