> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/sborka-proekta-1/hot-module-replacement-hmr.md).

# HMR

Hot Module Replacement

**Источники**

* [Webpack - Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/)
* [react-hot-loader](https://github.com/gaearon/react-hot-loader)

Для того, чтобы при внесении изменений страница в браузере не перегружалась, а просто обновлялась, устанавливаем **react-hot-loader**

```
yarn add react-hot-loader
```

Добавляем **react-hot-loader/babel** в файл **.babelrc**:

{% code title=".babelr" %}

```
{
  "plugins": ["react-hot-loader/babel"]
}
```

{% endcode %}

Экспортируем корневой компонент приложения как hot:

{% code title="src/app.js" %}

```jsx
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App)
```

{% endcode %}

Добавляем в файле **package.json** при запуске webpack-dev-server опцию ***--hot***

```
"start": "webpack-dev-server --mode development --hot --open",
```

После этого страница будет обновляться без перезагрузки.

Более того, перерисовывается не вся страница, а только тот компонент, который изменился. Это можно увидеть в **Chrome Dev Tools -> меню -> More tools -> Rendering -> Paint Flashing (включить)**