{"id":11718,"library":"react-hot-loader","title":"React Hot Loader","description":"React Hot Loader is a utility that enables Hot Module Replacement (HMR) for React components, allowing developers to tweak components in real time without losing application state during development. The current stable version is 4.13.1, which receives frequent bug fixes and minor updates, as evidenced by its release history. It works by patching React's reconciliation process to allow components to be swapped out without re-mounting, preserving component state and improving development efficiency. While it has been a cornerstone for many React development workflows, it is explicitly positioned as being superseded by React Fast Refresh. Users are strongly encouraged to migrate to Fast Refresh if their environment (e.g., React Native, Parcel 2, Webpack with a plugin, Create React App v4+, Next.js v9.4+) supports it, as Fast Refresh offers a more integrated and robust solution. However, React Hot Loader remains a viable option for environments that do not yet support Fast Refresh.","status":"maintenance","version":"4.13.1","language":"javascript","source_language":"en","source_url":"https://github.com/gaearon/react-hot-loader","tags":["javascript","react","webpack","hmr","livereload","live","edit","hot","typescript"],"install":[{"cmd":"npm install react-hot-loader","lang":"bash","label":"npm"},{"cmd":"yarn add react-hot-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-hot-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI development.","package":"react","optional":false},{"reason":"Entry point for DOM rendering in React applications.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React.","package":"@types/react","optional":true},{"reason":"Alternative React DOM renderer required for enhanced Hooks support.","package":"@hot-loader/react-dom","optional":true}],"imports":[{"note":"Since v4, the 'hot' HOC for wrapping the root component should be imported from 'react-hot-loader/root'.","wrong":"import { hot } from 'react-hot-loader';","symbol":"hot","correct":"import { hot } from 'react-hot-loader/root';"},{"note":"Used to configure React Hot Loader's behavior globally, such as disabling hooks reloading.","symbol":"setConfig","correct":"import { setConfig } from 'react-hot-loader';"},{"note":"Used as a Webpack entry point prepend to ensure RHL patches React before it's loaded. Can also be `import 'react-hot-loader';` as the very first line of your main file.","wrong":"require('react-hot-loader/patch'); // inside a React component","symbol":"react-hot-loader/patch","correct":"entry: ['react-hot-loader/patch', './src']"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"react-hot-loader/babel\"]\n}\n\n// webpack.config.js\nmodule.exports = {\n  mode: 'development',\n  entry: ['react-hot-loader/patch', './src/index.tsx'],\n  // ... other webpack config\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        exclude: /node_modules/,\n        use: 'babel-loader'\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      'react-dom': '@hot-loader/react-dom' // For hooks support\n    },\n    extensions: ['.tsx', '.ts', '.js']\n  }\n};\n\n// src/index.tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hot } from 'react-hot-loader/root';\n\nconst App = () => {\n  const [count, setCount] = React.useState(0);\n  React.useEffect(() => {\n    // This hook will reload because its dependency list is non-empty\n    console.log('App component mounted or count changed:', count);\n  }, [count, \"hot\"]); // Adding \"hot\" ensures reloadability\n\n  return (\n    <div>\n      <h1>Hello React Hot Loader!</h1>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(c => c + 1)}>Increment</button>\n      <p>Edit this component and save to see HMR in action.</p>\n    </div>\n  );\n};\n\nconst HotApp = hot(App);\n\nReactDOM.render(<HotApp />, document.getElementById('root'));","lang":"typescript","description":"Sets up React Hot Loader with Babel and Webpack, demonstrates basic HMR for a root React component and showcases a reloadable React Hook."},"warnings":[{"fix":"Consult your project's build tool documentation for enabling React Fast Refresh. For Webpack, install `react-refresh-webpack-plugin` and configure it in your Webpack and Babel setups. Remove `react-hot-loader` and its associated Babel plugin/Webpack entry points.","message":"React Hot Loader is officially superseded by React Fast Refresh. For new projects or existing projects in environments that support it (e.g., React Native, Parcel 2, Webpack with `react-refresh-webpack-plugin`, Create React App v4+, Next.js v9.4+), migration to Fast Refresh is strongly recommended for better stability and experience.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Update your import statements to `import { hot } from 'react-hot-loader/root';` when wrapping your application's root component.","message":"The import path for the 'hot' Higher-Order Component changed in v4. Previously, it was often imported directly from 'react-hot-loader'.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Add `resolve: { alias: { 'react-dom': '@hot-loader/react-dom' } }` to your webpack config. Ensure your hooks have non-empty dependency arrays if you expect them to update, or explicitly configure RHL for broader hook reloading.","message":"For proper hooks support and updating during HMR, you must use `@hot-loader/react-dom` by aliasing `react-dom` in your Webpack configuration. Additionally, hooks will only auto-update if they have a non-zero dependency list (e.g., `useEffect(effect, [dep])`) or if specific configuration options (`reloadHooksOnBodyChange`, `reloadLifeCycleHooks`) are enabled.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Ensure `react-hot-loader/babel` is included in your `.babelrc` or Babel configuration.","message":"The Babel plugin `react-hot-loader/babel` is required for React Hot Loader to function correctly, especially for handling changes in hook order without throwing errors. Without it, adding, removing, or reordering hooks might cause a React error.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Prepend your webpack entry point with `'react-hot-loader/patch'` (e.g., `entry: ['react-hot-loader/patch', './src']`) or ensure `import 'react-hot-loader';` is the very first statement in your application's main entry file.","message":"React Hot Loader or its `patch` entry point must be loaded *before* React and ReactDOM. Failing to do so will result in RHL not being able to intercept and patch React's mechanisms, leading to HMR failures.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that `react-hot-loader/babel` is correctly configured in your Babel setup and that `react-hot-loader/patch` or `import 'react-hot-loader';` is loaded as the absolute first entry point in your application.","cause":"This often occurs if the `react-hot-loader/babel` plugin is missing, leading to issues with hook order changes, or if `react-hot-loader` is not properly patching React before it initializes.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Ensure that the component you are exporting (and wrapping with `hot()`) is indeed a React component. Check for typos in exports or ensure the component is fully defined before being exported and hot-wrapped.","cause":"React Hot Loader could not identify the exported component as a valid React component (e.g., a function component, class component, or memoized component). This can happen with incorrect exports or if a HOC wraps something that's not a component.","error":"React-Hot-Loader: \"something\" is not a valid React Component."},{"fix":"Confirm that `'react-hot-loader/patch'` is the very first entry in your Webpack configuration's `entry` array, or that `import 'react-hot-loader';` is the first line of code in your root application file. Also ensure that Webpack's HMR is enabled.","cause":"This message indicates that React Hot Loader failed to inject its patching mechanisms into React, usually because it was loaded after React/ReactDOM, or the `module.hot` API was not available.","error":"React-Hot-Loader: RHL could not be activated."}],"ecosystem":"npm"}