Which is Better React Hot Reloading Libraries?
@pmmmwh/react-refresh-webpack-plugin vs react-hot-loader
1 Year
@pmmmwh/react-refresh-webpack-pluginreact-hot-loaderSimilar Packages:
What's React Hot Reloading Libraries?

Hot reloading is a development feature that allows developers to see changes in their code reflected in the browser without losing the application state. This significantly enhances the development experience by allowing for faster iterations and immediate feedback. Both `@pmmmwh/react-refresh-webpack-plugin` and `react-hot-loader` serve this purpose but with different approaches and underlying mechanisms. The former is designed to work seamlessly with Webpack and React Fast Refresh, providing a more reliable and efficient hot reloading experience, while the latter is a standalone solution that modifies the React component behavior to enable hot reloading, but may not always preserve the state as effectively as the former.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@pmmmwh/react-refresh-webpack-plugin6,258,0673,134133 kB624 months agoMIT
react-hot-loader601,77212,256198 kB464-MIT
Feature Comparison: @pmmmwh/react-refresh-webpack-plugin vs react-hot-loader

State Preservation

  • @pmmmwh/react-refresh-webpack-plugin: This plugin is built to preserve the component state during hot reloads, allowing developers to see updates without losing their place in the application. It leverages React's Fast Refresh mechanism, which intelligently updates only the components that have changed while keeping their state intact.
  • react-hot-loader: While `react-hot-loader` also aims to preserve state, it may not always succeed in doing so, especially in complex components or when certain conditions are met. This can lead to unexpected behavior, making it less reliable for state preservation compared to the newer plugin.

Integration with Build Tools

  • @pmmmwh/react-refresh-webpack-plugin: This package is specifically designed to integrate with Webpack, making it easy to set up and configure in modern React applications. It takes advantage of Webpack's module system to provide a seamless hot reloading experience.
  • react-hot-loader: This package can be used with various build tools but may require additional configuration to work optimally. It is not as tightly integrated with Webpack as the newer plugin, which may lead to more complex setups.

Performance

  • @pmmmwh/react-refresh-webpack-plugin: The plugin is optimized for performance, ensuring that only the necessary components are reloaded, which can lead to faster development cycles and a smoother experience overall. It minimizes the overhead associated with hot reloading.
  • react-hot-loader: While `react-hot-loader` provides hot reloading capabilities, it can introduce performance overhead in larger applications due to its approach to component updates. This can lead to slower refresh times compared to the newer plugin.

Community and Support

  • @pmmmwh/react-refresh-webpack-plugin: As a newer solution, this plugin benefits from active community support and ongoing updates, aligning with the latest React and Webpack developments. This ensures that developers have access to the latest features and bug fixes.
  • react-hot-loader: Although `react-hot-loader` has been widely used in the past, its development has slowed down, and it may not receive updates as frequently as the newer plugin. This could lead to potential issues with compatibility in future React or Webpack versions.

Learning Curve

  • @pmmmwh/react-refresh-webpack-plugin: This plugin is relatively easy to set up for those familiar with Webpack and React, as it follows modern conventions and practices. Its integration with Fast Refresh makes it straightforward for developers to adopt without a steep learning curve.
  • react-hot-loader: Developers may face a steeper learning curve with `react-hot-loader`, especially when dealing with its quirks and limitations regarding state preservation and integration with various build tools.
How to Choose: @pmmmwh/react-refresh-webpack-plugin vs react-hot-loader
  • @pmmmwh/react-refresh-webpack-plugin: Choose this package if you are using Webpack 5 and want a modern, efficient hot reloading experience that preserves component state and works well with React's Fast Refresh feature. It is recommended for new projects or when upgrading existing ones to leverage the latest improvements in hot reloading.
  • react-hot-loader: Choose this package if you are working on a legacy project that already uses it and you need to maintain compatibility. However, be aware that it may not provide the same level of state preservation and performance as the newer `@pmmmwh/react-refresh-webpack-plugin`.
README for @pmmmwh/react-refresh-webpack-plugin

React Refresh Webpack Plugin

CircleCI License Latest Version Next Version

An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also known as Hot Reloading) for React components.

This plugin is not 100% stable. We're hoping to land a v1 release soon - please help us by reporting any issues you've encountered!

Getting Started

Prerequisites

Ensure that you are using at least the minimum supported versions of this plugin's peer dependencies - older versions unfortunately do not contain code to orchestrate "Fast Refresh", and thus cannot be made compatible.

We recommend using the following versions:

| Dependency | Version | | --------------- | ---------------------------- | | react | 16.13.0+, 17.x or 18.x | | react-dom | 16.13.0+, 17.x or 18.x | | react-refresh | 0.10.0+ | | webpack | 4.46.0+ or 5.2.0+ |

Minimum requirements

| Dependency | Version | | --------------- | -------- | | react | 16.9.0 | | react-dom | 16.9.0 | | react-refresh | 0.10.0 | | webpack | 4.43.0 |

Using custom renderers (e.g. react-three-fiber, react-pdf, ink)

To ensure full support of "Fast Refresh" with components rendered by custom renderers, you should ensure the renderer you're using depends on a recent version of react-reconciler.

We recommend version 0.25.0 or above, but any versions above 0.22.0 should work.

If the renderer is not compatible, please file them an issue instead.

Installation

With all prerequisites met, you can install this plugin using your package manager of choice:

# 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

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

The react-refresh package (from the React team) is a required peer dependency of this plugin. We recommend using version 0.10.0 or above.

Support for TypeScript

TypeScript support is available out-of-the-box for those who use webpack.config.ts.

Our exported types however depends on type-fest, so you'll have to add it as a devDependency:

# if you prefer npm
npm install -D type-fest

# if you prefer yarn
yarn add -D type-fest

# if you prefer pnpm
pnpm add -D type-fest

:memo: Note:

type-fest@4.x only supports Node.js v16 or above, type-fest@3.x only supports Node.js v14.16 or above, and type-fest@2.x only supports Node.js v12.20 or above. If you're using an older version of Node.js, please install type-fest@1.x.

Usage

For most setups, we recommend integrating with babel-loader. It covers the most use cases and is officially supported by the React team.

The example below will assume you're using webpack-dev-server.

If you haven't done so, set up your development Webpack configuration for Hot Module Replacement (HMR).

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    hot: true,
  },
};
Using webpack-hot-middleware
const webpack = require('webpack');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  plugins: [isDevelopment && new webpack.HotModuleReplacementPlugin()].filter(Boolean),
};
Using webpack-plugin-serve
const { WebpackPluginServe } = require('webpack-plugin-serve');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  plugins: [isDevelopment && new WebpackPluginServe()].filter(Boolean),
};

Then, add the react-refresh/babel plugin to your Babel configuration and this plugin to your Webpack configuration.

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

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

:memo: Note:

Ensure both the Babel transform (react-refresh/babel) and this plugin are enabled only in development mode!

Using ts-loader

:warning: Warning: This is an un-official integration maintained by the community.

Install react-refresh-typescript. Ensure your TypeScript version is at least 4.0.

# if you prefer npm
npm install -D react-refresh-typescript

# if you prefer yarn
yarn add -D react-refresh-typescript

# if you prefer pnpm
pnpm add -D react-refresh-typescript

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up react-refresh-typescript with ts-loader:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const ReactRefreshTypeScript = require('react-refresh-typescript');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              getCustomTransformers: () => ({
                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
              }),
              transpileOnly: isDevelopment,
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

It is recommended to run ts-loader with transpileOnly is set to true. You can use ForkTsCheckerWebpackPlugin as an alternative if you need typechecking during development.

Using swc-loader

:warning: Warning: This is an un-official integration maintained by the community.

Ensure your @swc/core version is at least 1.2.86. It is also recommended to use swc-loader version 0.1.13 or above.

Then, instead of wiring up react-refresh/babel via babel-loader, you can wire-up swc-loader and use the refresh transform:

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

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('swc-loader'),
            options: {
              jsc: {
                transform: {
                  react: {
                    development: isDevelopment,
                    refresh: isDevelopment,
                  },
                },
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [isDevelopment && new ReactRefreshWebpackPlugin()].filter(Boolean),
};

Starting from version 0.1.13, swc-loader will set the development option based on Webpack's mode option. swc won't enable fast refresh when development is false.

For more information on how to set up "Fast Refresh" with different integrations, please check out our examples.

Overlay Integration

This plugin integrates with the most common Webpack HMR solutions to surface errors during development - in the form of an error overlay.

By default, webpack-dev-server is used, but you can set the overlay.sockIntegration option to match what you're using.

The supported versions are as follows:

| Dependency | Version | | ------------------------ | -------------------------- | | webpack-dev-server | 3.6.0+ or 4.x or 5.x | | webpack-hot-middleware | 2.x | | webpack-plugin-serve | 0.x or 1.x |

API

Please refer to the API docs for all available options.

FAQs and Troubleshooting

Please refer to the Troubleshooting guide for FAQs and resolutions to common issues.

License

This project is licensed under the terms of the MIT License.

Special Thanks

JetBrains Logo