Files
freeCodeCamp/guide/english/react/hot-module-replacement/index.md
KurtWayn3 4d2c268cd6 Add Information on Hot Module Replacement (#32875)
* Create index.md

* fix: added front matter block
2019-02-10 19:29:55 -08:00

1.0 KiB

title
title
Hot Module Replacement

Hot Module Replacement

Hot Module Replacement (HMR) will improve your experience while working within React. This helpful little tool allows you to reload the page you are working on without refreshing the page.

Why is this important?

Imagine you are working on a dialog box that has five steps and you happen to be debugging step five. Without HMR, everytime you update the code and check your changes the page will refresh and you will need to go through steps 1-4 again. With HMR, the page loads the changes but the page does not refresh and you can continue debugging while on step five.

To add HMR to your application you must do the following to your src/index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />
  document.getElementById('root')
);
  
if(module.hot) {
  module.hot.accept();
}

More Information

Hot Reloading with Time Travel (Video)