Does the create-react-app e with built-in support for HMR? I have seen react app reloads on changes. But that's not HMR. What webpack configuration I need to add to enable HMR. I read online about setting hot option in webpack-dev-serve to true. I'm confused about HMR in react.

After searching for a while I came across this

import React from 'react'
import ReactDOM from 'react-dom'
import App from './ponents/App'

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Then it says to add HotModuleReplacementPlugin in webpack.config.js
Do I need to manually add it or it es pre-added. Also I read that react uses ReactRefreshWebpackPlugin. I'm confused please help.

Does the create-react-app e with built-in support for HMR? I have seen react app reloads on changes. But that's not HMR. What webpack configuration I need to add to enable HMR. I read online about setting hot option in webpack-dev-serve to true. I'm confused about HMR in react.

After searching for a while I came across this

import React from 'react'
import ReactDOM from 'react-dom'
import App from './ponents/App'

// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Then it says to add HotModuleReplacementPlugin in webpack.config.js
Do I need to manually add it or it es pre-added. Also I read that react uses ReactRefreshWebpackPlugin. I'm confused please help.

• javascript
• reactjs
• webpack
• hot-module-replacement

1 Answer 1

First, we have to remember how HMR works:

It allows all kinds of modules to be updated at runtime without the need for a full refresh.

Second, we have to remember how React works: It only updates the parts of the DOM that need to be updated. For instance, if you have a React app and you add a paragraph to it, a DOM node for the paragraph will be added and the page won't reload. If you change the contents of an existing paragraph, only the DOM node that represents the contents of the paragraph will be reloaded, because it needs to be re-written.

Third,

Since webpack-dev-server v4.0.0, Hot Module Replacement is enabled by default.

Fourth,

Create React App uses webpack underneath the hood. You can see the entire configuration by ejecting it through the following cammand:

npm run eject

Putting it all together, Create React App does e with HMR enabled by default. You can confirm that by following the steps bellow:

1. Create and run an app by executing these mands:

    npx create-react-app my-app
    cd my-app
    npm start

2. After the app opens in your browser, select a piece of text, for instance, the word "reload". Then, go to your source code and change the background color of the application in the App.js file. You'll notice that the background color changes without a full refresh, since the text remains selected. Now, if you change the contents of the paragraph in your source code, you'll see that the selection disappears. This is React taking place an re-writing the DOM, only the small piece that needs to be updated. Furthermore, if select the text of the paragraph in your browser and go to your source code and change the contents of the link, you'll see that the content of the link is updated without clearing the selection, again, because React will only update the pieces of the DOM that need to be updated.