diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 062a371e397..ccfc46e441f 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -41,8 +41,6 @@ module.exports = {
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
-    // React Hot Loader v3
-    require.resolve('react-hot-loader/patch'),
     // Include an alternative client for WebpackDevServer. A client's job is to
     // connect to WebpackDevServer by a socket and get notified about changes.
     // When you save a file, the client will either apply hot updates (in case
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 722d1670a51..dc7d01dc5ee 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -77,7 +77,7 @@
   "devDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-hot-loader": "^3.1.3",
+    "react-hot-loader": "^4.3.2",
     "normalize.css": "^7.0.0"
   },
   "optionalDependencies": {
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 811e44f8e9f..b745944fd65 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -101,7 +101,7 @@ module.exports = function(
     command = 'npm';
     args = ['install', '--save', verbose && '--verbose'].filter(e => e);
   }
-  args.push('react', 'react-dom', 'react-hot-loader@^3.1.3', 'normalize.css');
+  args.push('react', 'react-dom', 'react-hot-loader@^4.3.2', 'normalize.css');
 
   // Install additional template dependencies, if present
   const templateDependenciesPath = path.join(
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index fc9092b8b5e..7b03238fb3f 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/packages/react-scripts/template/src/index.js
@@ -1,28 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
+import { hot } from 'react-hot-loader';
 import 'normalize.css';
 
 import App from 'components/App';
 import registerServiceWorker from 'utils/registerServiceWorker';
 
-function render(Component) {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>,
-    document.getElementById('root'),
-  );
-}
+const HotApp = hot(module)(App);
 
-render(App);
-
-if (module.hot) {
-  module.hot.accept('./components/App', () => {
-    // eslint-disable-next-line global-require
-    const nextApp = require('./components/App').default;
-    render(nextApp);
-  });
-}
+ReactDOM.render(<HotApp />, document.getElementById('root'));
 
 registerServiceWorker();