Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

• Retain application state which is lost during a full reload.
• Save valuable development time by only updating what's changed.
• Tweak styling faster -- almost comparable to changing styles in the browser's debugger.

Go to project root directory and run

npm run eject

Install React Hot Loader

npm install --save-dev react-hot-loader

In config/webpack.config.dev.js, first configure devServer.hot and hotModuleReplacementPlugin to enable webpack's Hot Module Replacement feature:

module.exports = {
	devServer: {
		hot: true
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	]
}

Then add 'react-hot-loader/babel' to Babel loader configuration. The loader should now look like:

{
	test: /\.(js|jsx)$/,
	include: paths.appSrc,
	loader: require.resolve('babel-loader'),
	options: {
		// This is a feature of `babel-loader` for Webpack (not Babel itself).
		// It enables caching results in ./node_modules/.cache/babel-loader/
		// directory for faster rebuilds.
		cacheDirectory: true,
		plugins: ['react-hot-loader/babel'],
	},
}

Mark your App (src/index.js) as hot-exported:

// ./containers/App.js
import React from 'react'
import { hot } from 'react-hot-loader'

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

export default hot(module)(App)