react-refresh-hotfix 

react-refresh-hotfix is react-refresh-webpack-plugin additional feature support, to fix some issues like:
- useEffect be called on re-render in HMR will cause problems
- Bug: Empty deps useEffect be called on re-render in HMR
- React Hooks 在 react-refresh 模块热替换（HMR）下的异常行为

Although the React official team doesn't consider this a bug, here is an alternative to improve the HMR development experience for others.

$3

``sh

use npm

npm install -D react-refresh-hotfix

use yarn

yarn add -D react-refresh-hotfix
`

$3

First, follow the official guide react-refresh-webpack-plugin

Then, add the following to your webpack config:

`js
const refreshFixPlugin = require("react-refresh-hotfix");
const isDevelopment = process.env.NODE_ENV === "development";
module.exports = {
plugins: [
isDevelopment && new refreshFixPlugin(),
].filter(Boolean)
}
`

Or, you can use the following configuration to avoid the need to modify the webpack config:

`js

const isDevelopment = process.env.NODE_ENV === "development";

module.exports = {
alias: {
...(isDevelopment ? { react$: 'react-refresh-hotfix/react' } : {}),
},
modules: {
rules: [
isDevelopment && {
test: /\.[m|c]?[jt]sx?$/,
exclude: /node_modules/,
use: ['react-refresh-hotfix/loader'],
},
].filter(Boolean)
}
};
``