FG
💻 Software🌐 Web & Full-Stack

How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?

Fresh3 days ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

Dan Abramov mentioned that Devtools v4 will be making `react-hot-loader` obsolete: https://twitter.com/dan_abramov/status/1144715740983046144?s=20 > Me: > I have this hook: > [code block] > But HMR has always worked completely without it. Is this now a new requirement? > Dan: > Yes, that's what the new mechanism uses. The new mechanism doesn't need "react-hot-loader" so by the time you update, you'd want to remove that package. (It's pretty invasive) I can't see any mention of HMR in the Devtools documentation, however; now that `react-hot-loader` has become obsolete (and with it, the `require("react-hot-loader/root").hot` method), how should we set up apps for HMR in: React DOM apps React Native apps * React custom renderer apps I'd be particularly interested in a migration guide specifically for anyone who's already set up HMR via `react-hot-loader`. Also, for HMR, does it matter whether we're using the standalone Devtools or the browser-extension Devtools?

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Migrate to Fast Refresh for HMR in React Apps

Medium Risk

The `react-hot-loader` package is now obsolete due to the introduction of Fast Refresh in React. Fast Refresh provides a more efficient way to enable Hot Module Replacement (HMR) without the invasive changes that `react-hot-loader` required. This means that existing setups using `react-hot-loader` need to be updated to leverage Fast Refresh instead.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Remove react-hot-loader

    Uninstall the `react-hot-loader` package from your project to prevent conflicts with Fast Refresh.

    bash
    npm uninstall react-hot-loader
  2. 2

    Update React and React DOM

    Ensure that you are using the latest versions of React and React DOM that support Fast Refresh. Update your package.json and run the install command.

    bash
    npm install react@latest react-dom@latest
  3. 3

    Configure Fast Refresh in your development environment

    If you are using Create React App, Fast Refresh is enabled by default. For custom setups, ensure that your Webpack configuration includes the necessary plugins for Fast Refresh. You may need to add the `react-refresh` Babel plugin.

    bash
    npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh
  4. 4

    Update your entry file

    Modify your main entry file (e.g., index.js) to use Fast Refresh. Import and use the `react-refresh/runtime` if necessary.

    javascript
    import { hot } from 'react-refresh';

const App = () => <div>Hello World</div>;
export default hot(App);
  5. 5

    Test HMR functionality

    Run your application in development mode and make changes to your components. Verify that the changes are reflected in the browser without a full reload.

    bash
    npm start

Validation

To confirm the fix worked, make a change to a React component and observe if the change is reflected in the browser without a full page reload. Ensure that the console does not show any errors related to HMR or Fast Refresh.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

reactjavascripttype:-question