React Fast Refresh in Django-react

My Journey

While trying to add hot module replacement in a Django-react app I found out that there are 2 ways of adding it.

a) Using django-webpack-loader.

Cons:

• Required too many changes.
• It's not easy to add.

b) Using react-hot-loader + devServer:{ writeToDisk: true }

Pros:

• Minumum code change required.

Cons:

• If you are using --hotOnly then after sometimes react-hot-loader breaks then you have to reload the whole page to check your changes.
• If you are using --hot then instead of component re-render most of the time page reloads.

React Fast Refresh

Development experience with React Hot Loader was not good. That's why I tried to replace it with React Fast Refresh and it was a success. Create React App also use it now.
Some key points:

• it will re-render a React component when we edit a module that exports only React components
• it will reload all React components that import a non-React module and the module itself when we edit it
• it will do a full reload when we edit a module outside of the React tree
• it will continue working once we resolve a syntax or a runtime error without having to reload manually
• local state will be preserved for function components and Hooks out of the box
• local state won't be preserved for class components

Setup

1. First, install the react-refresh and @pmmmwh/react-refresh-webpack-plugin libraries.

2. Add react-refresh/babel in babel plugins.
   

 {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["react-refresh/babel"],
        },
      },

1. Add HotModuleReplacementPlugin and ReactRefreshWebpackPlugin in webpack plugins.

  new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockPort: 8090,
      },
    }),

4.Set webpack devServer config to this

 devServer: {
    port: 8090,
    hotOnly: true,
    writeToDisk: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },

(Optional):
Sometimes if webpack-dev-server skips files to write on disk, then set

publicPath: "/static/" 

to

publicPath: "/http://localhost:8090/" 

Source code is available here

Demo