[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3455":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":16,"starSnapshotCount":16,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},3455,"react-hot-loader","gaearon\u002Freact-hot-loader","gaearon","Tweak React components in real time. (Deprecated: use Fast Refresh instead.)","http:\u002F\u002Fgaearon.github.io\u002Freact-hot-loader\u002F",null,"JavaScript",12172,779,162,116,0,43.68,"MIT License",false,"master",true,[],"2026-06-12 02:00:50","# React Hot Loader\n\n[![Build Status][build-badge]][build] [![version][version-badge]][package]\n[![Code Coverage][coverage-badge]][coverage]\n[![MIT License][license-badge]][license]\n\n[![PRs Welcome][prs-badge]][prs] [![Chat][chat-badge]][chat]\n[![Backers on Open Collective][oc-backer-badge]](#backers)\n[![Sponsors on Open Collective][oc-sponsor-badge]](#sponsors)\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n\nTweak React components in real time ⚛️⚡️\n\nWatch\n**[Dan Abramov's talk on Hot Reloading with Time Travel](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=xsSnOQynTHs).**\n\n# Moving towards next step\n\nReact-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It's time to make a next step.\n\n**React-Hot-Loader is expected to be replaced by [React Fast Refresh](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fissues\u002F16604)**. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.\n\n* `React Native` - [supports Fast Refresh](https:\u002F\u002Ffacebook.github.io\u002Freact-native\u002Fdocs\u002Ffast-refresh) since 0.61.\n* `parcel 2` - [supports Fast Refresh](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fissues\u002F16604#issuecomment-556082893) since alpha 3.\n* `webpack` - [supports Fast Refresh](https:\u002F\u002Fgithub.com\u002Fpmmmwh\u002Freact-refresh-webpack-plugin\u002F) using a plugin.\n* `other bundler` - no support yet, use React-Hot-Loader\n* `create-react-app` - [supports Fast Refresh](https:\u002F\u002Fcreate-react-app.dev\u002Fdocs\u002Fadvanced-configuration\u002F) with FAST_REFRESH env since 4.\n* `next.js` - [supports Fast Refresh](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Ffast-refresh) since 9.4\n\n## Install\n\n```\nnpm install react-hot-loader\n```\n\n> Note: You can safely install react-hot-loader as a regular dependency instead\n> of a dev dependency as it automatically ensures it is not executed in\n> production and the footprint is minimal.\n\n## Getting started\n\n1.  Add `react-hot-loader\u002Fbabel` to your `.babelrc`:\n\n```js\n\u002F\u002F .babelrc\n{\n  \"plugins\": [\"react-hot-loader\u002Fbabel\"]\n}\n```\n\n2.  Mark your root component as _hot-exported_:\n\n```js\n\u002F\u002F App.js\nimport { hot } from 'react-hot-loader\u002Froot';\nconst App = () => \u003Cdiv>Hello World!\u003C\u002Fdiv>;\nexport default hot(App);\n```\n\n3.  Make sure `react-hot-loader` is required before `react` and `react-dom`:\n\n* or `import 'react-hot-loader'` in your main file (before React)\n* or prepend your webpack entry point with `react-hot-loader\u002Fpatch`, for example:\n  ```js\n  \u002F\u002F webpack.config.js\n  module.exports = {\n    entry: ['react-hot-loader\u002Fpatch', '.\u002Fsrc'],\n    \u002F\u002F ...\n  };\n  ```\n\n4.  If you need hooks support, use [`@hot-loader\u002Freact-dom`](#hot-loaderreact-dom)\n\n### Hook support\n\nHooks would be auto updated on HMR if they _should_ be.\nThere is only one condition for it - a non zero dependencies list.\n\n```js\n❄️ useState(initialState); \u002F\u002F will never updated (preserve state)\n❄️ useEffect(effect); \u002F\u002F no need to update, updated on every render\n❄️ useEffect(effect, []); \u002F\u002F \"on mount\" hook. \"Not changing the past\"\n🔥 useEffect(effect, [anyDep]); \u002F\u002F would be updated\n\n🔥 useEffect(effect, [\"hot\"]); \u002F\u002F the simplest way to make hook reloadable\n```\n\n**Plus**\n\n* any hook would be reloaded on a function body change. Enabled by default, controlled by `reloadHooksOnBodyChange` option.\n* you may configure RHL to reload any hook by setting `reloadLifeCycleHooks` option to true.\n\n**To disable hooks reloading** - set configuration option:\n\n```js\nimport { setConfig } from 'react-hot-loader';\n\nsetConfig({\n  reloadHooks: false,\n});\n```\n\nWith this option set **all** `useEffects`, `useCallbacks` and `useMemo` would be updated on Hot Module Replacement.\n\n### Hooks reset\n\nHooks would be reset if their order changes. Adding, removing or moving around would\ncause a local tree remount.\n\n**Babel plugin is required** for this operation. Without it changing hook order would throw an error\nwhich would be propagated till the nearest class-based component.\n\n## `@hot-loader\u002Freact-dom`\n\n[`@hot-loader\u002Freact-dom`](https:\u002F\u002Fgithub.com\u002Fhot-loader\u002Freact-dom) replaces the \"react-dom\" package of the same version, but with additional patches to support hot reloading.\n\nThere are 2 ways to install it:\n\n* Use **yarn** name resolution, so `@hot-loader\u002Freact-dom` would be installed instead of `react-dom`\n\n```\nyarn add react-dom@npm:@hot-loader\u002Freact-dom\n```\n\n* Use [webpack aliases](https:\u002F\u002Fwebpack.js.org\u002Fconfiguration\u002Fresolve\u002F#resolvealias)\n\n```\nyarn add @hot-loader\u002Freact-dom\n```\n\n```js\n\u002F\u002F webpack.config.js\nmodule.exports = {\n  \u002F\u002F ...\n  resolve: {\n    alias: {\n      'react-dom': '@hot-loader\u002Freact-dom',\n    },\n  },\n};\n```\n\n### Old API\n\n**Note:** There is also an old version of `hot`, used prior to version 4.5.4. **Please use the new one**,\nas it is much more resilient to js errors that you may make during development.\n\nMeanwhile, not all the bundlers are compatible with new `\u002Froot` API, for example **[parcel](http:\u002F\u002Fparceljs.org\u002F) is not**.\n\nReact-Hot-Load will throw an error, asking you to use the old API, if such incompatibility would be detected.\nIt is almost the same, but you have to pass `module` inside `hot`.\n\n```js\nimport { hot } from 'react-hot-loader';\nconst App = () => \u003Cdiv>Hello World!\u003C\u002Fdiv>;\nexport default hot(module)(App);\n```\n\n3.  [Run webpack with Hot Module Replacement](https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fhot-module-replacement\u002F#enabling-hmr):\n\n```sh\nwebpack-dev-server --hot\n```\n\n## What about production?\n\nThe webpack patch, `hot`, Babel plugin, `@hot-loader\u002Freact-dom` etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.\n\nJust ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:\n\n```\nNODE_ENV=production webpack --mode production\n```\n\n`NODE_ENV=production` is needed for the Babel plugin, while `--mode production` uses [`webpack.DefinePlugin`](https:\u002F\u002Fwebpack.js.org\u002Fplugins\u002Fdefine-plugin\u002F) to set `process.env.NODE_ENV` inside the compiled code itself, which is used by `hot` and `@hot-loader\u002Freact-dom`.\n\nMake sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.\n\n## Limitations\n\n* (that's the goal) React-Hot-Loader would not change the past, only update the present - no lifecycle event would be called on component update. As a result, any code changes made to `componentWillUnmount` or `componentDidMount` would be ignored for already created components.\n* (that's the goal) React-Hot-Loader would not update any object, including component `state`.\n* (1%) React-Hot-Loader may not apply some changes made to a component's `constructor`. Unless an existing component is recreated, RHL would typically _inject_ new data into that component, but there is no way to detect the actual change or the way it was applied, especially if the change was made to a function. This is because of the way React-Hot-Loader works - it knows what class functions are, not how they were created. See [#1001](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fissues\u002F1001) for details.\n\n## Recipes\n\n### Migrating from [create-react-app](https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fcreate-react-app)\n\n1.  Run `npm run eject`\n2.  Install React Hot Loader (`npm install --save-dev react-hot-loader`)\n3.  In `config\u002Fwebpack.config.dev.js`, add `'react-hot-loader\u002Fbabel'` to Babel\n    loader configuration. The loader should now look like:\n\n```js\n  {\n    test: \u002F\\.(js|jsx)$\u002F,\n    include: paths.appSrc,\n    loader: require.resolve('babel-loader'),\n    options: {\n      \u002F\u002F This is a feature of `babel-loader` for webpack (not Babel itself).\n      \u002F\u002F It enables caching results in .\u002Fnode_modules\u002F.cache\u002Fbabel-loader\u002F\n      \u002F\u002F directory for faster rebuilds.\n      cacheDirectory: true,\n      plugins: ['react-hot-loader\u002Fbabel'],\n    },\n  }\n```\n\n4.  Mark your App (`src\u002FApp.js`) as _hot-exported_:\n\n```js\n\u002F\u002F .\u002Fcontainers\u002FApp.js\nimport React from 'react';\nimport { hot } from 'react-hot-loader';\n\nconst App = () => \u003Cdiv>Hello World!\u003C\u002Fdiv>;\n\nexport default hot(module)(App);\n```\n\n### Migrating from [create-react-app](https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fcreate-react-app) without ejecting\n\nUsers [report](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fpull\u002F729#issuecomment-354097936), that it is possible to use [react-app-rewire-hot-loader](https:\u002F\u002Fgithub.com\u002Fcdharris\u002Freact-app-rewire-hot-loader) to setup React-hot-loader without ejecting.\n\n### TypeScript\n\nAs of version 4, React Hot Loader requires you to pass your code through [Babel](http:\u002F\u002Fbabeljs.io\u002F) to transform it so that it can be hot-reloaded. This can be a pain point for TypeScript users, who usually do not need to integrate Babel as part of their build process.\n\nFortunately, it's simpler than it may seem! Babel will happily parse TypeScript syntax and can act as an alternative to the TypeScript compiler, so you can safely replace `ts-loader` or `awesome-typescript-loader` in your Webpack configuration with `babel-loader`. Babel won't typecheck your code, but you can use [`fork-ts-checker-webpack-plugin`](https:\u002F\u002Fgithub.com\u002FRealytics\u002Ffork-ts-checker-webpack-plugin) (and\u002For invoke `tsc --noEmit`) as part of your build process instead.\n\nA sample configuration:\n\n```js\n{\n  \u002F\u002F ...you'll probably need to configure the usual Webpack fields like \"mode\" and \"entry\", too.\n  resolve: { extensions: [\".ts\", \".tsx\", \".js\", \".jsx\"] },\n  module: {\n    rules: [\n      {\n        test: \u002F\\.(j|t)sx?$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: {\n          loader: \"babel-loader\",\n          options: {\n            cacheDirectory: true,\n            babelrc: false,\n            presets: [\n              [\n                \"@babel\u002Fpreset-env\",\n                { targets: { browsers: \"last 2 versions\" } } \u002F\u002F or whatever your project requires\n              ],\n              \"@babel\u002Fpreset-typescript\",\n              \"@babel\u002Fpreset-react\"\n            ],\n            plugins: [\n              \u002F\u002F plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript\n              [\"@babel\u002Fplugin-proposal-decorators\", { legacy: true }],\n              [\"@babel\u002Fplugin-proposal-class-properties\", { loose: true }],\n              \"react-hot-loader\u002Fbabel\"\n            ]\n          }\n        }\n      }\n    ]\n  },\n  plugins: [\n    new ForkTsCheckerWebpackPlugin()\n  ]\n};\n```\n\nFor a full example configuration of TypeScript with React Hot Loader and newest beta version of Babel, check [here](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Ftree\u002Fmaster\u002Fexamples\u002Ftypescript).\n\nAs an alternative to this approach, it's possible to chain Webpack loaders so that your code passes through Babel and then TypeScript (or TypeScript and then Babel), but this approach is not recommended as it is more complex and may be significantly less performant. Read more [discussion here](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fissues\u002F884).\n\n### Parcel\n\nParcel supports Hot Module Reloading out of the box, just follow step 1 and 2 of [Getting Started](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Ftree\u002Fmaster#getting-started).\n\nWe also have a [full example running Parcel + React Hot Loader](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Ftree\u002Fmaster\u002Fexamples\u002Fparcel).\n\n### Electron\n\nYou need something to mark your modules as hot in order to use React Hot Loader.\n\nOne way of doing this with Electron is to simply use webpack like any web-based project might do and the general guide above describes. See also [this example Electron app](https:\u002F\u002Fgithub.com\u002Fs-h-a-d-o-w\u002Frhl-electron-quick-start).\n\nA webpack-less way of doing it to use `electron-compile` (which is also used by [`electron-forge`](https:\u002F\u002Felectronforge.io)) - see [this example](https:\u002F\u002Fgithub.com\u002Frllola\u002Fhmr-example-issue-2). While it requires less configuration, something to keep in mind is that `electron-compile`'s HMR will always reload all modules, regardless of what was actually edited.\n\n### Source Maps\n\nIf you use `devtool: 'source-map'` (or its equivalent), source maps will be\nemitted to hide hot reloading code.\n\nSource maps slow down your project. Use `devtool: 'eval'` for best build\nperformance.\n\nHot reloading code is just one line in the beginning and one line at the end of\neach module so you might not need source maps at all.\n\n### Linking\n\nIf you are using `npm link` or `yarn link` for development purposes, there is a chance you will get error `Module not found: Error: Cannot resolve module 'react-hot-loader'` or the linked package is not hot reloaded.\n\nThere are 2 ways to fix `Module not found`:\n\n* Use [`include` in loader configuration](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-boilerplate\u002Fblob\u002Fmaster\u002Fwebpack.config.js#L22) to only opt-in your app's files to processing.\n* Alternatively if you are using webpack, override the module resolution in your config:\n\n```js\n{\n  resolve: {\n    alias: {\n      'react-hot-loader': path.resolve(path.join(__dirname, '.\u002Fnode_modules\u002Freact-hot-loader')),\n    }\n  }\n}\n```\n\nAnd to make your linked package to be hot reloaded, it will need to use the patched version of `react` and `react-dom`, if you're using webpack, add this options to the alias config\n\n```js\n{\n  resolve: {\n    alias: {\n      'react-hot-loader': path.resolve(path.join(__dirname, '.\u002Fnode_modules\u002Freact-hot-loader')),\n      \u002F\u002F add these 2 lines below so linked package will reference the patched version of `react` and `react-dom`\n      'react': path.resolve(path.join(__dirname, '.\u002Fnode_modules\u002Freact')),\n      'react-dom': path.resolve(path.join(__dirname, '.\u002Fnode_modules\u002Freact-dom')),\n      \u002F\u002F or point react-dom above to '.\u002Fnode_modules\u002F@hot-loader\u002Freact-dom' if you are using it\n    }\n  }\n}\n```\n\n## Preact\n\nReact-hot-loader should work out of the box with `preact-compat`, but, in case of pure preact, you will need\nto configure it:\n\n* create configuration file (setupHotLoader.js)\n\n```js\nimport reactHotLoader from 'react-hot-loader';\nimport preact from 'preact';\n\nreactHotLoader.preact(preact);\n```\n\n* dont forget to import it\n\n#### Preact limitations\n\n* HOCs and Decorators as not supported yet. For Preact React-Hot-Loader v4 behave as v3.\n\n## React Native\n\nReact Native\n**[supports hot reloading natively](https:\u002F\u002Ffacebook.github.io\u002Freact-native\u002Fblog\u002F2016\u002F03\u002F24\u002Fintroducing-hot-reloading.html)**\nas of version 0.22.\n\nUsing React Hot Loader with React Native can cause unexpected issues (see #824) and is not recommended.\n\n## Webpack plugin\n\nWe recommend using the `babel` plugin, but there are some situations where you are unable to. If so, try the `webpack` plugin \u002F `webpack-loader` (as seen in v3).\n\nRemember - the `webpack` plugin is **not compatible** with class-based components. The `babel` plugin\nwill inject special methods to every class, to make `class members` (like onClick) hot-updatable, while the `webpack` plugin would leave classes as is, without any _instrumentation_.\n\n```js\nclass MyComponent extends React.Component {\n  onClick = () => this.setState(); \u002F\u002F COULD NOT UPDATE\n  variable = 1; \u002F\u002F this is ok\n  render() {} \u002F\u002F this is ok\n}\n```\n\nBut `webpack-loader` could help with TypeScript or _spreading_ \"cold API\" [to all node_modules](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader#disabling-a-type-change-for-all-node_modules).\n\n> It is possible to enable this loader for all the files, but if you use `babel` plugin, you need to enable this loader for `react-dom` only. Place it after babel-loader, if babel-loader is present.\n\n```js\n\u002F\u002F webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      \u002F\u002F would only land a \"hot-patch\" to react-dom\n      {\n        test: \u002F\\.js$\u002F,\n        include: \u002Fnode_modules\\\u002Freact-dom\u002F,\n        use: ['react-hot-loader\u002Fwebpack'],\n      },\n    ],\n  },\n};\n```\n\nWebpack plugin will also land a \"hot\" patch to react-dom, making React-Hot-Loader more compliant to [the principles](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fissues\u002F1118).\n\nIf you are not using `babel` plugin you might need to apply `webpack-loader` to all the files.\n\n```js\n{\n  test: \u002F\\.jsx?$\u002F,\n  include: \u002Fnode_modules\u002F,\n  use: ['react-hot-loader\u002Fwebpack']\n},\n```\n\n### Code Splitting\n\nIf you want to use Code Splitting + React Hot Loader, the simplest solution is to pick a library compatible with this one:\n\n* [React Lazy](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fcode-splitting.html#reactlazy)\n* [Imported Component](https:\u002F\u002Fgithub.com\u002FtheKashey\u002Freact-imported-component)\n* [React Universal Component](https:\u002F\u002Fgithub.com\u002Ffaceyspacey\u002Freact-universal-component)\n* [React-Loadable](https:\u002F\u002Fgithub.com\u002Fjamiebuilds\u002Freact-loadable)\n\nIf you use a not-yet-friendly library, like [react-async-component](https:\u002F\u002Fgithub.com\u002Fctrlplusb\u002Freact-async-component),\nor are having problems with hot reloading failing to reload code-split components,\nyou can manually mark the components below the code-split boundaries.\n\n```js\n\u002F\u002F AsyncHello.js\nimport { asyncComponent } from 'react-async-component';\n\n\u002F\u002F asyncComponent could not `hot-reload` itself.\nconst AsyncHello = asyncComponent({\n  resolve: () => import('.\u002FHello'),\n});\n\nexport default AsyncHello;\n```\n\nNote that `Hello` is the component at the root of this particular\ncode-split chunk.\n\n```js\n\u002F\u002F Hello.js\nimport { hot } from 'react-hot-loader\u002Froot';\n\nconst Hello = () => 'Hello';\n\nexport default hot(Hello); \u002F\u002F \u003C-- module will reload itself\n```\n\nWrapping this root component with `hot()` will ensure that it is hot reloaded correctly.\n\n### Out-of-bound warning\n\nYou may see the following warning when code-split components are updated:\n\n```console\nReact-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.\n```\n\nThis is because the hot reloading of code-split components happens asynchronously. If you had an `App.js` that implemented\nthe `AsyncHello` component above and you modified `AsyncHello`, it would be bundled and reloaded at the same time as\n`App.js`. However, the core hot reloading logic is synchronous, meaning that it's possible for the hot reload to run before\nthe updates to the split component have landed.\n\nIn this case, RHL uses a special _tail update detection_ logic, where it notes that an an update to a split component\nhas happened after the core hot reloading logic has already finished, and it triggers another update cycle to ensure\nthat all changes are applied.\n\nThe warning is informational - it is a notice that this tail update logic is triggered, and does not indicate a problem\nin the configuration or useage of `react-hot-loader`.\n\nIf the tail update detection is not something you want or need, you can disable this behavior by setting\n`setConfig({ trackTailUpdates:false })`.\n\n### Checking Element `type`s\n\nBecause React Hot Loader creates proxied versions of your components, comparing\nreference types of elements won't work:\n\n```js\nconst element = \u003CComponent \u002F>;\nconsole.log(element.type === Component); \u002F\u002F false\n```\n\nReact Hot Loader exposes a function `areComponentsEqual` to make it possible:\n\n```js\nimport { areComponentsEqual } from 'react-hot-loader';\nconst element = \u003CComponent \u002F>;\nareComponentsEqual(element.type, Component); \u002F\u002F true\n```\n\nAnother way - compare \"rendered\" element type\n\n```js\nconst element = \u003CComponent \u002F>;\nconsole.log(element.type === \u003CComponent \u002F>.type); \u002F\u002F true\n\n\u002F\u002F better - precache rendered type\nconst element = \u003CComponent \u002F>;\nconst ComponentType = \u003CComponent \u002F>.type;\nconsole.log(element.type === ComponentType); \u002F\u002F true\n```\n\nBut you might have to provide all required props. See [original issue](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fissues\u002F304).\nThis is most reliable way to compare components, but it will not work with required props.\n\nAnother way - compare Component name.\n\n> Not all components have a name. **In production displayName could not exists.**\n\n```js\nconst element = \u003CComponent \u002F>;\nconsole.log(element.displayName === 'Component'); \u002F\u002F true\n```\n\nThis is something we did not solve yet. Cold API could help keep original types.\n\n### Webpack ExtractTextPlugin\n\nwebpack ExtractTextPlugin is not compatible with React Hot Loader. Please disable it in development:\n\n```js\nnew ExtractTextPlugin({\n  filename: 'styles\u002F[name].[contenthash].css',\n  disable: NODE_ENV !== 'production',\n});\n```\n\n#### Disabling a type change (❄️)\n\nIt is possible to disable React-Hot-Loader for a specific component, especially to\nenable common way to type comparison.\nSee #991 for the idea behind ⛄️, and #304 about \"type comparison\" problem.\n\n```js\nimport { cold } from 'react-hot-loader';\n\ncold(SomeComponent) \u002F\u002F this component will ignored by React-Hot-Loader\n\u003CSomeComponent \u002F>.type === SomeComponent \u002F\u002F true\n```\n\nIf you will update `cold` component React-Hot-Loader will complain (on error level), and then\nReact will cold-replace Component with a internal state lose.\n\n> Reach-Hot-Loader: cold element got updated\n\n##### Disabling a type change for all node_modules\n\nYou may _cold_ all components from node_modules. This will not work for HOC(like Redux) or dynamically created Components, but might help in most of situations, when type changes\nare not welcomed, and modules are not expected to change.\n\n```js\nimport { setConfig, cold } from 'react-hot-loader';\nsetConfig({\n  onComponentRegister: (type, name, file) => file.indexOf('node_modules') > 0 && cold(type),\n\n  \u002F\u002F some components are not visible as top level variables,\n  \u002F\u002F thus its not known where they were created\n  onComponentCreate: (type, name) => name.indexOf('styled') > 0 && cold(type),\n});\n```\n\n! To be able to \"cold\" components from 'node_modules' you have to apply babel to node_modules, while this\nfolder is usually excluded.\nYou may add one more babel-loader, with only one React-Hot-Loader plugin inside to solve this.\n**Consider using webpack-loader** for this.\n\n##### React-Hooks\n\nReact hooks are not _really_ supported by React-Hot-Loader. Mostly due to our internal\nprocesses of re-rendering React Tree, which is required to reconcile an updated application\nbefore React will try to rerender it, and fail to do that, obviously.\n\n* hooks **should work** for versions 4.6.0 and above (`pureSFC` is enabled by default).\n* hooks will produce **errors** on every hot-update without patches to `react-dom`.\n* hooks **may loss the state** without patches to `react-dom`.\n* hooks does not support adding new hooks on the fly\n* change in hooks for a mounted components will cause a runtime exception, and a `retry` button (at the nearest class component) will be shown.\n  Pressing a `retry` button will basically remount tree branch.\n\nTo mitigate any hook-related issues (and disable their hot-reloadability) - `cold` them.\n\n* _cold_ components using hooks.\n\n```js\nimport { setConfig, cold } from 'react-hot-loader';\nsetConfig({\n  onComponentCreate: (type, name) =>\n    (String(type).indexOf('useState') > 0 || String(type).indexOf('useEffect') > 0) && cold(type),\n});\n```\n\n## API\n\n### `hot(Component, options)`\n\nMark a component as hot.\n\n#### Babel plugin\n\nRight now babel plugin has only one option, enabled by default.\n\n* `safetyNet` - will help you properly setup ReactHotLoader.\n\nYou may disable it to get more control on the module execution order.\n\n```js\n\u002F\u002F.babelrc\n{\n    \"plugins\": [\n        [\n            \"react-hot-loader\u002Fbabel\",\n            {\n            \"safetyNet\": false\n            }\n        ]\n    ]\n}\n```\n\n#### Important\n\n**!!** Use `hot` only for module `exports`, not for module `imports`. **!!**\n\n```js\nimport { hot } from 'react-hot-loader\u002Froot';\n\nconst App = () => 'Hello World!';\n\nexport default hot(App);\n```\n\nKeep in mind - by importing `react-hot-loader\u002Froot` you are setting up a boundary for update event propagation.\n\nThe higher(in module hierarchy) you have it - the more stuff would be updated on Hot Module Replacement.\n\nTo make RHL more reliable and safe, please place `hot` _below_ (ie somewhere in _imported_ modules):\n\n* react-dom\n* redux store creation\n* any data, you want to preserve between updates\n* big libraries\n\nYou may(but it's not required) place `hot` to the every route\u002Fpage\u002Ffeature\u002Flazy chunk, thus make updates more scoped.\n\nYou don't need to wrap every component with `hot`, application works fine with a single one.\n\n### (old)`hot(module, options)(Component, options)`\n\nMark a component as hot. The \"new\" hot is just hidding the first part - `hot(module)`, giving you\nonly the second `(App)`. The \"new\" hot is using old API.\n\n```js\nimport { hot } from 'react-hot-loader';\n\nconst App = () => 'Hello World!';\n\nexport default hot(module)(App);\n```\n\n### `AppContainer`\n\nMark application as hot reloadable. (**Prefer** using `hot` helper, see below for migration details).\n\nThis low-level approach lets you make **hot **imports\\_\\_, not exports.\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AppContainer } from 'react-hot-loader';\nimport App from '.\u002Fcontainers\u002FApp';\n\nconst render = Component => {\n  ReactDOM.render(\n    \u003CAppContainer>\n      \u003CComponent \u002F>\n    \u003C\u002FAppContainer>,\n    document.getElementById('root'),\n  );\n};\n\nrender(App);\n\n\u002F\u002F webpack Hot Module Replacement API\nif (module.hot) {\n  \u002F\u002F keep in mind - here you are configuring HMR to accept CHILDREN MODULE\n  \u002F\u002F while `hot` would configure HMR for the CURRENT module\n  module.hot.accept('.\u002Fcontainers\u002FApp', () => {\n    \u002F\u002F if you are using harmony modules ({modules:false})\n    render(App);\n    \u002F\u002F in all other cases - re-require App manually\n    render(require('.\u002Fcontainers\u002FApp'));\n  });\n}\n```\n\n### areComponentsEqual(Component1, Component2)\n\nTest if two components have the same type.\n\n```js\nimport { areComponentsEqual } from 'react-hot-loader';\nimport Component1 from '.\u002FComponent1';\nimport Component2 from '.\u002FComponent2';\n\nareComponentsEqual(Component1, Component2); \u002F\u002F true or false\n```\n\n### setConfig(config)\n\nSet a new configuration for React Hot Loader.\n\nAvailable options are:\n\n* `logLevel`: specify log level, default to `\"error\"`, available values are: `['debug', 'log', 'warn', 'error']`\n* `pureSFC`: enable Stateless Functional Component. If disabled they will be converted to React Components.\n  Default value: false.\n* `ignoreSFC`: skip \"patch\" for SFC. \"Hot loading\" could still work, with webpack-patch present\n* `pureRender`: do not amend `render` method of any component.\n* for the rest see [index.d.ts](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fblob\u002Fmaster\u002Findex.d.ts#L62-L133).\n\n```js\n\u002F\u002F rhlConfig.js\nimport { setConfig } from 'react-hot-loader';\n\nsetConfig({ logLevel: 'debug' });\n```\n\n**It is important** to set configuration before any other action will take a place\n\n```js\n\u002F\u002F index.js\nimport '.\u002FrhlConfig' \u002F\u002F \u003C-- extract configuration to a separate file, and import it in the beggining\nimport React from 'react'\n....\n```\n\n## Migrating from v3\n\n### AppContainer vs hot\n\nPrior v4 the right way to setup React Hot Loader was to wrap your Application\nwith `AppContainer`, set setup module acceptance by yourself. This approach is\nstill valid but only for advanced use cases, prefer using `hot` helper.\n\n**React Hot Loader v3:**\n\n```js\n\u002F\u002F App.js\nimport React from 'react';\n\nconst App = () => \u003Cdiv>Hello world!\u003C\u002Fdiv>;\n\nexport default App;\n```\n\n```js\n\u002F\u002F main.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AppContainer } from 'react-hot-loader';\nimport App from '.\u002Fcontainers\u002FApp';\n\nconst render = Component => {\n  ReactDOM.render(\n    \u003CAppContainer>\n      \u003CComponent \u002F>\n    \u003C\u002FAppContainer>,\n    document.getElementById('root'),\n  );\n};\n\nrender(App);\n\n\u002F\u002F webpack Hot Module Replacement API\nif (module.hot) {\n  module.hot.accept('.\u002Fcontainers\u002FApp', () => {\n    \u002F\u002F if you are using harmony modules ({modules:false})\n    render(App);\n    \u002F\u002F in all other cases - re-require App manually\n    render(require('.\u002Fcontainers\u002FApp'));\n  });\n}\n```\n\n**React Hot Loader v4:**\n\n```js\n\u002F\u002F App.js\nimport React from 'react';\nimport { hot } from 'react-hot-loader';\n\nconst App = () => \u003Cdiv>Hello world!\u003C\u002Fdiv>;\n\nexport default hot(module)(App);\n```\n\n```js\n\u002F\u002F main.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\u002Fcontainers\u002FApp';\n\nReactDOM.render(\u003CApp \u002F>, document.getElementById('root'));\n```\n\n### Patch is optional\n\n> Since 4.0 till 4.8\n\nCode is automatically patched, you can safely remove `react-hot-loader\u002Fpatch` from your webpack config,\nif react-hot-loader is required before React in any other way.\n\n### Error Boundary is inside every component\n\n> Since 4.5.4\n\nOn Hot Module Update we will inject `componentDidCatch` and a _special_ `render`\nto every Class-based component you have, making [Error Boundaries](https:\u002F\u002Freactjs.org\u002Fdocs\u002Ferror-boundaries.html#introducing-error-boundaries) more local.\n\nAfter update we will remove all sugar, keeping only Boundaries you've created.\n\nYou can provide your own `errorReporter`, via `setConfig({errorReporter})` or opt-out from\nroot ErrorBoundaries setting `errorBoundary={false}` prop on `AppContainer` or `hot`.\nHowever - this option affects only SFC behavior, and any ClassComponent would boundary itself.\n\n```js\nimport { setConfig } from 'react-hot-loader';\nimport ErrorBoundary from '.\u002FErrorBoundary';\n\n\u002F\u002F ErrorBoundary will be given error and errorInfo prop.\nsetConfig({ errorReporter: ErrorBoundary });\n```\n\nIf `errorReporter` is not set - full screen error overlay would be shown.\n\n#### Setting global Error Reporter\n\nGlobal Error Reporter would, created a fixed overlay on top the page,\nwould be used to display errors, not handled by `errorReporter`, and\nany HMR error.\n\nYou may change, or disable this global error overlay\n\n```js\n\u002F\u002F to disable\nsetConfig({ ErrorOverlay: () => null });\n\n\u002F\u002F to change\nsetConfig({ ErrorOverlay: MyErrorOverlay });\n```\n\nThe UX of existing overlay is a subject to change, and we are open to any proposals.\n\n## Known limitations and side effects\n\n### Note about `hot`\n\n`hot` accepts only React Component (Stateful or Stateless), resulting the `HotExported` variant of it.\nThe `hot` function will setup current module to _self-accept_ itself on reload, and will **ignore** all the changes, made for non-React components.\nYou may mark as many modules as you want. But `HotExportedComponent` **should be the only used export** of a _hot_-module.\n\n> Note: Please note how often we have used `exported` keyword. `hot` is for exports.\n\n> Note: Does nothing in production mode, just passes App through.\n\n### New Components keep executing the old code\n\nThere is no way to hot-update constructor code, as result even new components\nwill be born as the first ones, and then grow into the last ones. As of today, this issue cannot be solved.\n\n## Troubleshooting\n\nIf it doesn't work, in 99% of cases it's a configuration issue. A missing option, a\nwrong path or port. webpack is very strict about configuration, and the best way\nto find out what's wrong is to compare your project to an already working setup,\ncheck out\n**[examples](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Ftree\u002Fmaster\u002Fexamples)**,\nbit by bit.\n\nIf something doesn't work, in 99% of cases it's an issue with your code. The Component\ndidn't get registered, due to HOC or Decorator around it, which is making it\ninvisible to the Babel plugin or webpack loader.\n\nWe're also gathering\n**[Troubleshooting Recipes](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fblob\u002Fmaster\u002Fdocs\u002FTroubleshooting.md)**\nso send a PR if you have a lesson to share!\n\n### Switch into debug mode\n\nDebug mode adds additional warnings and can tells you why React Hot Loader is\nnot working properly in your application.\n\n```js\nimport { setConfig } from 'react-hot-loader';\nsetConfig({ logLevel: 'debug' });\n```\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [Contribute](CONTRIBUTING.md).\n[![contributors][oc-contributors-img]](https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fgraphs\u002Fcontributors)\n\n## Backers\n\nThank you to all our backers! 🙏 [Become a backer][oc-backer-link]\n[![backers][oc-backer-img]][oc-backer-link]\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor][oc-sponsor-link]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsor\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\n## License\n\nMIT\n\n[build-badge]: https:\u002F\u002Fimg.shields.io\u002Ftravis\u002Fgaearon\u002Freact-hot-loader.svg?style=flat-square\n[build]: https:\u002F\u002Ftravis-ci.org\u002Fgaearon\u002Freact-hot-loader\n[coverage-badge]: https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Fgaearon\u002Freact-hot-loader.svg?style=flat-square\n[coverage]: https:\u002F\u002Fcodecov.io\u002Fgithub\u002Fgaearon\u002Freact-hot-loader\n[version-badge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-hot-loader.svg?style=flat-square\n[package]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-hot-loader\n[license-badge]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Freact-hot-loader.svg?style=flat-square\n[license]: https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fblob\u002Fnext\u002FLICENSE\n[prs-badge]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http:\u002F\u002Fmakeapullrequest.com\n[chat]: https:\u002F\u002Fgitter.im\u002Fgaearon\u002Freact-hot-loader\n[chat-badge]: https:\u002F\u002Fimg.shields.io\u002Fgitter\u002Froom\u002Fgaearon\u002Freact-hot-loader.svg?style=flat-square\n[github-watch-badge]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fwatchers\u002Fgaearon\u002Freact-hot-loader.svg?style=social\n[github-watch]: https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fwatchers\n[github-star-badge]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fgaearon\u002Freact-hot-loader.svg?style=social\n[github-star]: https:\u002F\u002Fgithub.com\u002Fgaearon\u002Freact-hot-loader\u002Fstargazers\n[oc-backer-badge]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fbackers\u002Fbadge.svg\n[oc-sponsor-badge]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fsponsors\u002Fbadge.svg\n[oc-contributors-img]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fcontributors.svg?width=890&button=false\n[oc-backer-img]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader\u002Fbackers.svg?width=890\n[oc-backer-link]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader#backers\n[oc-sponsor-link]: https:\u002F\u002Fopencollective.com\u002Freact-hot-loader#sponsor\n","React Hot Loader 是一个用于实时调整 React 组件的工具，现已弃用，建议使用 Fast Refresh 替代。其核心功能在于允许开发者在不刷新页面的情况下即时看到组件代码更改的效果，极大地提高了开发效率。技术上，它通过热替换（Hot Module Replacement, HMR）机制实现这一特性，支持包括 Webpack 在内的多种打包工具配置。适用于需要频繁修改界面并希望快速预览效果的前端开发场景，尤其是当项目环境尚未支持 Fast Refresh 时作为过渡方案使用。尽管如此，随着 Fast Refresh 的普及，对于大多数现代 React 开发环境来说，直接采用 Fast Refresh 成为了更优选择。",2,"2026-06-11 02:54:34","top_language"]