fix: react-dom hot-replacement is too active

Author: theKashey

Diff for: src/global/generation.js

@@ -1,4 +1,17 @@
 let generation = 1
+let hotComparisonCounter = 0
 
-export const increment = () => generation++
+export const hotComparisonOpen = () => hotComparisonCounter > 0
+
+const incrementHot = () => hotComparisonCounter++
+const decrementHot = () => hotComparisonCounter--
+
+export const enterHotUpdate = () => {
+  Promise.resolve(incrementHot()).then(decrementHot)
+}
+
+export const increment = () => {
+  enterHotUpdate()
+  return generation++
+}
 export const get = () => generation

Diff for: src/reactHotLoader.js

@@ -8,7 +8,11 @@ import {
   isMemoType,
   isForwardType,
 } from './internal/reactUtils'
-import { increment as incrementGeneration } from './global/generation'
+import {
+  increment as incrementGeneration,
+  hotComparisonOpen,
+  enterHotUpdate,
+} from './global/generation'
 import {
   updateProxyById,
   resetProxies,
@@ -41,6 +45,8 @@ const updateLazy = (target, type) => {
     target[lazyConstructor] = () =>
       ctor().then(m => {
         const C = resolveType(m.default)
+        // chunks has been updated - new hot loader process is taking a place
+        enterHotUpdate()
         return {
           default: props => (
             <AppContainer>
@@ -64,40 +70,42 @@ export const hotComponentCompare = (oldType, newType, setNewType) => {
     return true
   }
 
-  if (
-    (isRegisteredComponent(oldType) || isRegisteredComponent(newType)) &&
-    resolveType(oldType) !== resolveType(newType)
-  ) {
-    return false
-  }
+  if (hotComparisonOpen()) {
+    if (
+      (isRegisteredComponent(oldType) || isRegisteredComponent(newType)) &&
+      resolveType(oldType) !== resolveType(newType)
+    ) {
+      return false
+    }
 
-  if (isForwardType({ type: oldType }) && isForwardType({ type: newType })) {
-    if (areSwappable(oldType.render, newType.render)) {
-      setNewType(newType)
-      return true
+    if (isForwardType({ type: oldType }) && isForwardType({ type: newType })) {
+      if (areSwappable(oldType.render, newType.render)) {
+        setNewType(newType)
+        return true
+      }
+      return false
     }
-    return false
-  }
 
-  if (isMemoType({ type: oldType }) && isMemoType({ type: newType })) {
-    if (areSwappable(oldType.type, newType.type)) {
-      setNewType(newType.type)
-      return true
+    if (isMemoType({ type: oldType }) && isMemoType({ type: newType })) {
+      if (areSwappable(oldType.type, newType.type)) {
+        setNewType(newType.type)
+        return true
+      }
+      return false
     }
-    return false
-  }
 
-  if (areSwappable(newType, oldType)) {
-    const unwrapFactory = newType[UNWRAP_PROXY]
-    const oldProxy = unwrapFactory && getProxyByType(unwrapFactory())
-    if (oldProxy) {
-      oldProxy.dereference()
-      updateProxyById(oldType[PROXY_KEY], newType[UNWRAP_PROXY]())
-      updateProxyById(newType[PROXY_KEY], oldType[UNWRAP_PROXY]())
-    } else {
-      setNewType(newType)
+    if (areSwappable(newType, oldType)) {
+      const unwrapFactory = newType[UNWRAP_PROXY]
+      const oldProxy = unwrapFactory && getProxyByType(unwrapFactory())
+      if (oldProxy) {
+        oldProxy.dereference()
+        updateProxyById(oldType[PROXY_KEY], newType[UNWRAP_PROXY]())
+        updateProxyById(newType[PROXY_KEY], oldType[UNWRAP_PROXY]())
+      } else {
+        setNewType(newType)
+      }
+      return true
     }
-    return true
   }
 
   return false

Diff for: src/reconciler/proxies.js

@@ -58,6 +58,7 @@ export const updateProxyById = (id, type, options = {}) => {
         options,
       ),
     )
+    registerComponent(proxiesByID[id].get())
   } else {
     proxiesByID[id].update(type)
   }

Diff for: src/reconciler/proxyAdapter.js

@@ -1,5 +1,5 @@
 import reactHotLoader from '../reactHotLoader'
-import { get as getGeneration } from '../global/generation'
+import { enterHotUpdate, get as getGeneration } from '../global/generation'
 import { getProxyByType, setStandInOptions } from './proxies'
 import reconcileHotReplacement, {
   flushScheduledUpdates,
@@ -20,6 +20,7 @@ export const renderReconciler = (target, force) => {
       (componentGeneration || force) &&
       componentGeneration !== currentGeneration
     ) {
+      enterHotUpdate()
       reconcileHotReplacement(target)
       return true
     }