React Fast Refresh in Django-react

Ashu Deshwal — Thu, 04 Feb 2021 12:19:48 +0000

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

First, install the react-refresh and @pmmmwh/react-refresh-webpack-plugin libraries.
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"],
        },
      },

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](https://github.com/TheSTL/django-react-fast-refresh-boilerplate)

## Demo
![react-fast-refresh](https://user-images.githubusercontent.com/50075905/106893122-16d48c80-6713-11eb-94a7-372e9c9f0141.gif)

DEV Community: Ashu Deshwal

React Fast Refresh in Django-react

My Journey

React Fast Refresh

Setup