diff --git a/babel.config.js b/babel.config.js
index 9e82d43dd8d175723a0631934e74fdea20c5b112..71e3e16ee133e18ccca49b8f41da25143ffc0c8f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -85,7 +85,6 @@ module.exports = function (api) {
       ],
     },
     ],
-    isDevelopmentEnv && 'react-hot-loader/babel',
   ].filter(Boolean);
 
   return {
diff --git a/package.json b/package.json
index 0c8d0bd2bb705ac087a78e7b815fa5b3fa85cb58..cfff55111e7354dd768e85d6c8d3735048ffc363 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
     "react-dnd-multi-backend": "^5.0.0",
     "react-dnd-touch-backend": "^10.0.2",
     "react-full-screen": "^0.2.4",
-    "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.0",
     "react-image": "^4.0.1",
     "react-mosaic-component": "^4.0.1",
@@ -85,6 +84,7 @@
     "@babel/plugin-transform-runtime": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
     "babel-eslint": "10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.6",
@@ -117,6 +117,7 @@
     "react": "^16.8.6",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.8.6",
+    "react-refresh": "^0.8.3",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "style-loader": "^1.2.1",
diff --git a/src/components/App.js b/src/components/App.js
index 279dd8f6b80977fc367458c59780ef40fe55c5c5..a415d6ff823e2b900aa84345f993ccf874858530 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,4 @@
 import React, { Component, lazy, Suspense } from 'react';
-import { hot } from 'react-hot-loader/root';
 import PropTypes from 'prop-types';
 import PluginProvider from '../extend/PluginProvider';
 import AppProviders from '../containers/AppProviders';
@@ -46,4 +45,4 @@ App.defaultProps = {
   plugins: [],
 };
 
-export default hot(App);
+export default App;
diff --git a/webpack.config.js b/webpack.config.js
index ad7fe771ff3a33180d1e905051db92556a93c8d8..768d17f58af2b14e02cfcab16d3f55d7c51af50a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const paths = require('./config/paths');
 
 /** */
@@ -82,7 +83,11 @@ module.exports = (env, options) => {
       port: 4444,
     },
     devtool: 'eval-source-map',
-    entry: ['react-hot-loader/patch', './src/polyfills.js', './src/init.js'],
+    entry: ['./src/polyfills.js', './src/init.js'],
     mode: 'development',
+    plugins: [
+      ...(config.plugins || []),
+      new ReactRefreshWebpackPlugin(),
+    ],
   };
 };