MVP

packages/babel-plugin-hot-reload/index.js

@@ -112,21 +112,13 @@ module.exports = function({ types: t }) {
           decorateFunctionId(t, name, generatedName),
           template(
             `
-            if (!module.hot.data) {
-              module.hot.accept();
-            } else {
-              module.hot.data.acceptNext = () => module.hot.accept();
-            }
+            module.hot.accept();
             `
           )(),
           template(
             `
-            module.hot.dispose(data => {
-              window.__enqueueForceUpdate(() => {
-                if (typeof data.acceptNext === 'function') {
-                  data.acceptNext();
-                }
-              }, NAME);
+            module.hot.dispose(() => {
+              window.__enqueueForceUpdate(NAME);
             });
             `
           )({ NAME: t.Identifier(name) }),

packages/react-scripts/template/src/App.js

 import React, { Component } from 'react';
+import Hello from './Hello';
 import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
+      <div className="App" onClick={() => this.forceUpdate()}>
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
+          <Hello />
           <p>
             Edit <code>src/App.js</code> and save to reload.
           </p>

packages/react-scripts/template/src/CounterClass.js

+import { Component } from 'react';
+
+export default class Counter extends Component {
+  state = { value: 0 };
+  componentDidMount() {
+    this.interval = setInterval(
+      () => this.setState(s => ({ value: s.value + 1 })),
+      1000
+    );
+  }
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+  render() {
+    return this.state.value;
+  }
+}

packages/react-scripts/template/src/Hello.js

+import React, { useState } from 'react';
+import CounterClass from './CounterClass';
+
+export default function Hello() {
+  const [value] = useState(Math.random());
+  return (
+    <h1>
+      {value.toString().slice(0, 5)}
+      <br />
+      b
+      <CounterClass />
+    </h1>
+  );
+}

packages/react-scripts/template/src/index.js

@@ -4,6 +4,10 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
+window.__enqueueForceUpdate = function(type) {
+  console.log(type);
+};
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change