diff --git a/demo/server.js b/demo/server.js
index ec3a950..b821fac 100644
--- a/demo/server.js
+++ b/demo/server.js
@@ -21,14 +21,16 @@ const NODE_ENV = process.env.NODE_ENV || 'development';
 app.use(serveStatic(ROOT_DIR));
 app.use(serveStatic(STYLES_DIR));
 
+const compiler = webpack(WebpackConfig);
 app.use(
-  webpackDevMiddleware(webpack(WebpackConfig), {
+  webpackDevMiddleware(compiler, {
     publicPath: '/build/',
     stats: {
       colors: true,
     },
   })
 );
+app.use(require('webpack-hot-middleware')(compiler));
 
 const ITEMS = JSON.parse(fs.readFileSync(DATA));
 
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 47649b7..50381f8 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const dir_demo_js = path.resolve(__dirname, 'js');
 const dir_demo_build = path.resolve(__dirname, 'build');
@@ -12,24 +13,41 @@ console.log(`Webpack demo ${isDevelopment ? 'dev' : 'prod'}`);
 
 module.exports = {
   target: 'node',
-  entry: path.resolve(dir_demo_js, 'demo.js'),
+  entry: [
+    'webpack-hot-middleware/client',
+    path.resolve(dir_demo_js, 'demo.js'),
+  ],
   output: {
     path: dir_demo_build,
     filename: 'demo.js',
     publicPath: 'build',
   },
   mode: isDevelopment ? 'development' : 'production',
-  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
+  plugins: [
+    // isDevelopment && new webpack.HotModuleReplacementPlugin(),
+    isDevelopment && new ReactRefreshWebpackPlugin(),
+  ].filter(Boolean),
   devServer: {
     hot: true,
     contentBase: dir_demo_build,
   },
   module: {
     rules: [
-      // {
-      //   use: 'react-hot-loader/webpack',
-      //   test: dir_demo_js,
-      // },
+      {
+        test: dir_demo_js,
+        // test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              plugins: [
+                isDevelopment && require.resolve('react-refresh/babel'),
+              ].filter(Boolean),
+            },
+          },
+        ],
+      },
       {
         use: 'babel-loader',
         test: dir_demo_js,
diff --git a/package-lock.json b/package-lock.json
index d1b2f17..29a7418 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,8 @@
         "styled-components": "^5",
         "webpack": "^5",
         "webpack-cli": "^4",
-        "webpack-dev-middleware": "^5"
+        "webpack-dev-middleware": "^5",
+        "webpack-hot-middleware": "^2.25.2"
       },
       "peerDependencies": {
         "react": "^16 || ^17 || ^18"
@@ -10665,6 +10666,17 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/webpack-hot-middleware": {
+      "version": "2.25.2",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.2.tgz",
+      "integrity": "sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-html-community": "0.0.8",
+        "html-entities": "^2.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
@@ -18944,6 +18956,17 @@
         "schema-utils": "^4.0.0"
       }
     },
+    "webpack-hot-middleware": {
+      "version": "2.25.2",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.2.tgz",
+      "integrity": "sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A==",
+      "dev": true,
+      "requires": {
+        "ansi-html-community": "0.0.8",
+        "html-entities": "^2.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "webpack-merge": {
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
diff --git a/package.json b/package.json
index c60d0d6..37b972b 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,8 @@
     "styled-components": "^5",
     "webpack": "^5",
     "webpack-cli": "^4",
-    "webpack-dev-middleware": "^5"
+    "webpack-dev-middleware": "^5",
+    "webpack-hot-middleware": "^2.25.2"
   },
   "scripts": {
     "test": "jest",
diff --git a/webpack.config.js b/webpack.config.js
index 5fe04f0..ec441ac 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -53,9 +53,12 @@ const config = {
 };
 
 module.exports = (env, argv) => {
-  const isDevelopment = argv.mode !== 'production' && process.env.NODE_ENV !== 'production';
+  const isDevelopment =
+    argv.mode !== 'production' && process.env.NODE_ENV !== 'production';
   config.mode = isDevelopment ? 'development' : 'production';
-  config.plugins = [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean);
+  config.plugins = [
+    isDevelopment && new webpack.HotModuleReplacementPlugin(),
+  ].filter(Boolean);
   if (argv.mode === 'production') {
     config.output.path = dir_dist;
   }