Skip to content
Get packs

React Hot Loader

Live-reloads edited React components in the browser without a full page refresh. Now deprecated.

GitHub Download v4.13.0
Stars
12.1k
Forks
771
Licence
MIT
Language
JavaScript
Last update
3.7 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

React Hot Loader is a JavaScript library that updates React components in a running app as you edit them, keeping the page's current state instead of reloading the whole page. It works with a bundler such as webpack and a Babel plugin. The README says it is being replaced by React Fast Refresh, which is built into several frameworks and bundlers, so new projects should check whether Fast Refresh is available first.

  • Edit a component and see the change in the browser while keeping the current app state
  • Use hooks with hot reloading, following the README rules about dependency lists
  • Set up hot reloading in a webpack project with the react-hot-loader/babel plugin

Great for

  • Maintaining an existing React project that already uses React Hot Loader
  • Teams on older bundler setups where Fast Refresh is not yet supported
  • Developers who want to see component edits without losing form or UI state during development

Not ideal for

  • New projects where Fast Refresh is supported, because the README asks users to remove React Hot Loader in that case
  • Production apps, since the README says it is not needed there and removing it is recommended once Fast Refresh is available
  • Projects that need hot reloading with the Babel plugin but cannot use Babel, such as some TypeScript-only build chains, since the README says Babel is required
Step-by-step guide: how to use React Hot LoaderInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · npm or yarn · A React project using a bundler such as webpack

    Install the package

    npm install react-hot-loader
  2. 2

    Run it

    • Add "react-hot-loader/babel" to the plugins list in your .babelrc
    • Wrap your root component with hot() imported from react-hot-loader/root
    • Make sure react-hot-loader is loaded before react and react-dom, for example via an import in your main file
    • Run your dev server with Hot Module Replacement enabled, such as webpack-dev-server --hot
  3. 3

    Get the most out of it

    • Read the hooks section of the README to learn which hooks reload on edits and how to use a non-empty dependency list
    • Use @hot-loader/react-dom if you need hooks support, as the README recommends
    • Set NODE_ENV=production and --mode production for production builds so the Babel plugin switches to cleanup mode

Downloads

Source code (.zip)master branch · straight from GitHubRelease v4.13.0Release notes and sourceOfficial website & docsgaearon.github.io/react-hot-loader/

Strengths

  • Keeps app state while you edit components during development
  • Works with webpack and the Babel plugin, as described in the README
  • MIT licensed with a long history and a large user base

Trade-offs

  • The README says it is expected to be replaced by React Fast Refresh and recommends removing it where Fast Refresh works
  • Requires Babel and some bundler configuration, which adds setup work
  • Has known limits on constructor changes and hook order changes, as listed in the README

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.