DEV Community

loading...
Cover image for React Fast Refresh in Django-react

React Fast Refresh in Django-react

thestl profile image Ashu Deshwal Updated on ・2 min read

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"],
        },
      },
Enter fullscreen mode Exit fullscreen mode
  1. Add HotModuleReplacementPlugin and ReactRefreshWebpackPlugin in webpack plugins.
  new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockPort: 8090,
      },
    }),
Enter fullscreen mode Exit fullscreen mode

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",
    },
  },
Enter fullscreen mode Exit fullscreen mode

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

publicPath: "/static/" 
Enter fullscreen mode Exit fullscreen mode

to

publicPath: "/http://localhost:8090/" 
Enter fullscreen mode Exit fullscreen mode

Source code is available here

Demo

react-fast-refresh

Discussion (0)

Forem Open with the Forem app