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.

Installation

# use npm
npm install -D react-refresh-hotfix
# use yarn
yarn add -D react-refresh-hotfix

Usage

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

Then, add the following to your webpack config:

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:

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)
  }
};