Enable Hot Module Replacement(HMR) in React

Home Q&A Enable Hot Module Replacement(HMR) in React

React supports Hot Module Replacement (HMR), and it’s a great way to preserve state while editing components during development. Let’s clear up some of the confusion around HMR, especially when using create-react-app (CRA) vs. a custom webpack setup.

What is Hot Module Replacement (HMR)?

HMR is a webpack feature that lets us replace modules in a running application without a full reload. This improves development experience by:

Preserving component state
Updating only the changed module
Avoiding full page refresh

But note: just seeing the page update without a full reload doesn’t always mean HMR is working fully. We might just be seeing fast refresh or a reload.

Does create-react-app support HMR?

Yes, but with a caveat.
Since CRA v4+, React Fast Refresh is the default for development. This is a modern HMR implementation for React that:

Preserves component state on edits
Supports hooks and functional components well
Is more reliable and predictable than the old HMR approach

We don’t need to configure anything manually — CRA comes with:

webpack-dev-server with hot: true
react-refresh + @pmmmwh/react-refresh-webpack-plugin already integrated
Correct babel setup for Fast Refresh

Just run npm start (or yarn start) and we’re good to go. Fast Refresh will handle updates efficiently. We don’t need:

if (module.hot) {
  module.hot.accept();
}

That was used in older setups before React Fast Refresh.

When do we need to configure HMR manually?

If we’re using a custom webpack setup, then yes, we’ll need to:

Add HotModuleReplacementPlugin from webpack
Set hot: true in webpack-dev-server
Use React Refresh plugin for the best experience

Here’s what we’d need in a custom setup:

webpack.config.js

const webpack = require('webpack');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(), // For React Fast Refresh
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

index.js

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

const root = document.getElementById('root');
ReactDOM.render(<app>, root);

// Optional for older setups (not needed with Fast Refresh)
if (module.hot) {
  module.hot.accept();
}
</app>