How we reduced the development time of our React project to almost 70–80%?

4 min readDec 6, 2022

Time is one of the major factors for a developer when it comes to his / her productivity while coding or debugging a task.
More quickly project responses the realtime changes done while development more the speed increases !

The Problem —

Recently I encountered a major problem in the project, I was working on a feature at the end of a use flow. Every time I change a single bit of code —

The whole page gets reloaded in the browser, Causing more time to reflect my changes.
Multiple redundant APIs were get hit again and again.

Investigation 🔍 —

We needed the latest and fast solution to defeat the above problem and here comes “Fast refresh” to rescue, it allows developers to see the result of code changes in the browser without page refresh. This is really helpful in React apps as we can change components without losing their state.

What Is Fast Refresh?

It’s a reimplementation of “hot reloading” with full support from React. It’s originally shipping for React Native but most of the implementation is platform-independent. This greatly improves developer productivity and experience.

Tools Available:

webpack: javascript bundler
react-refresh: React refresh official plugin by React
@pmmmwh/react-refresh-webpack-plugin: React refresh webpack layer plugin

Fast Refresh vs Hot Reloading

Fast Refresh is a feature that lets you edit React components in a running application without losing their state. It is similar to an old feature known as “hot reloading”, but Fast Refresh is more reliable and officially supported by React.

Let’s deep dive now 🚀 —

Before going deep let’s see, how the browser was reacting till now, to a small change in the codebase —

As we saw here it took around 5 seconds to show a minor change and didn’t persist the state of Tab also. Also, note around 11 API calls happened again.

Minimum requirements to implement —

react 16.9.0 react-dom 16.9.0 react-refresh 0.10.0 webpack 4.43.0

Installation: Note these packages are to be installed as dev dependencies

# if you prefer npm
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

# if you prefer yarn
yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Webpack config changes:

Import the following plugin in your webpack config file —

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

And add that under global “plugins” as new ReactReactWebpackPlugin()
Now add the below line inside “babel-loader” options.

plugins: [require.resolve("react-refresh/babel")],

Make sure to set hot: true under devServer options.
Finally, add the below condition to accept hot change in your projects index.js

if (module.hot) {
  module.hot.accept();
}

Now let's see the change —

Development After Fast Refresh feature Fast Refresh

🚩 As we saw above it took atmost ~2 seconds to only update the particular change, also persisting tab state too, and with no redundant API calls.

Impact 📝—

Reduced development time to almost 70–80%.
Saved Redundant (10–12) API calls per dev change at almost all places of the project, decreasing Backend servers load and cost.

Note 🚩: In all the changes done only dev dependencies are added in package.json, hence no increase in build size and time as well.

Bonus Enhancements 👉🏻 —

With the help of the fast refresh we tried to cover more optimization with it wherever possible:

🚩 In some places, edge case errors were left ignored and uncorrected. Eventually, no error/warning was shown to the developer during development.

Now the error-catching mechanism of the hot reload plugin throws an error wherever dev mistakes are left.

Verdict : Less chances of breaking code in beta, as well as production ENVs.

Before and After image: Improved Error-catching mechanism (while development)

🚩 In many files, components/containers multiple functions/components were exported.

This was causing confusion to the plugin while hot reloading components. Thus, a refactor is done, now only exporting 1 component from a file.