{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-hot-loader"],"cli":null},"imports":["import { hot } from 'react-hot-loader/root';","import { setConfig } from 'react-hot-loader';","entry: ['react-hot-loader/patch', './src']"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}