add options to control tail updates

index.d.ts

@@ -129,6 +129,11 @@ export interface Config {
    * Global error overlay
    */
   ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
+
+  /**
+   * Controls tail(deferred) update checking
+   */
+  trackTailUpdates: boolean;
 }
 
 /**

src/configuration.js

@@ -43,6 +43,9 @@ const configuration = {
   // flag to completely disable RHL for SFC. Probably don't use it without dom patch made.
   ignoreSFC: false,
 
+  // flag to disable special treatment for React.lazy
+  ignoreLazy: false,
+
   // ignoreSFC when injection into react-dom is made
   ignoreSFCWhenInjected: true,
 
@@ -55,6 +58,9 @@ const configuration = {
   // Global error overlay
   ErrorOverlay: undefined,
 
+  // Actively track lazy loaded components
+  trackTailUpdates: true,
+
   // react hot dom features enabled
   IS_REACT_MERGE_ENABLED: false,
 };

src/hot.dev.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+
 import { getComponentDisplayName } from './internal/reactUtils';
+import configuration from './configuration';
 import AppContainer from './AppContainer.dev';
 import reactHotLoader from './reactHotLoader';
 import { isOpened as isModuleOpened, hotModule, getLastModuleOpened } from './global/modules';
@@ -56,19 +58,26 @@ const makeHotExport = (sourceModule, moduleId) => {
         const gen = getHotGeneration();
         module.instances.forEach(inst => inst.forceUpdate());
 
-        let runLimit = 0;
-        const checkTailUpdates = () => {
-          setTimeout(() => {
-            if (getHotGeneration() !== gen) {
-              console.warn('React-Hot-Loader has detected a stale state. Updating...');
-              deepUpdate();
-            } else if (++runLimit < 5) {
-              checkTailUpdates();
-            }
-          }, 16);
-        };
-
-        checkTailUpdates();
+        if (configuration.trackTailUpdates) {
+          let runLimit = 0;
+          const checkTailUpdates = () => {
+            setTimeout(() => {
+              if (getHotGeneration() !== gen) {
+                // we know that some components were updated, but not tracking which ones
+                // even if their updates might be incorporated automatically (like lazy)
+                // we dont know which one should be tracked, and which updates are important
+                console.warn(
+                  'React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.',
+                );
+                deepUpdate();
+              } else if (++runLimit < 5) {
+                checkTailUpdates();
+              }
+            }, 16);
+          };
+
+          checkTailUpdates();
+        }
       });
     };
 

src/reconciler/fiberUpdater.js

@@ -1,13 +1,13 @@
 import React from 'react';
-
+import configuration from '../configuration';
 import { enterHotUpdate } from '../global/generation';
 import AppContainer from '../AppContainer.dev';
 import { resolveType } from './resolver';
 
 const lazyConstructor = '_ctor';
 
-const patchLazyContructor = target => {
-  if (!target[lazyConstructor].isPatchedByReactHotLoader) {
+const patchLazyConstructor = target => {
+  if (!configuration.ignoreLazy && !target[lazyConstructor].isPatchedByReactHotLoader) {
     const ctor = target[lazyConstructor];
     target[lazyConstructor] = () =>
       ctor().then(m => {
@@ -41,8 +41,8 @@ export const updateLazy = (target, type) => {
     // just execute `import` and RHL.register will do the job
     ctor();
   }
-  patchLazyContructor(target);
-  patchLazyContructor(type);
+  patchLazyConstructor(target);
+  patchLazyConstructor(type);
 };
 
 export const updateMemo = (target, { type }) => {

test/hot/react-dom.integration.spec.js

@@ -27,7 +27,7 @@ describe(`🔥-dom`, () => {
 
   if (React.useContext && String(() => 42).indexOf('=>') > 0) {
     it('shall integrate with React', () => {
-      expect(ReactHotLoader.IS_REACT_MERGE_ENABLED).toBe(true);
+      expect(configuration.IS_REACT_MERGE_ENABLED).toBe(true);
       expect(configuration.integratedResolver).toBe(true);
       expect(React.useEffect.isPatchedByReactHotLoader).toBe(true);
     });

test/hot/react-dom.no-integration.spec.js

@@ -22,7 +22,7 @@ describe(`🔥-dom`, () => {
 
   if (React.useContext && String(() => 42).indexOf('=>') > 0) {
     it('shall (not) integrate with React', () => {
-      expect(ReactHotLoader.IS_REACT_MERGE_ENABLED).toBe(false);
+      expect(configuration.IS_REACT_MERGE_ENABLED).toBe(false);
       expect(configuration.integratedResolver).toBe(false);
       expect(React.useEffect.isPatchedByReactHotLoader).toBe(true);
     });