fix: autodetect underupdated state and trigger an automatic update, fixes #1342

Author: theKashey

src/configuration.js

@@ -54,6 +54,9 @@ const configuration = {
 
  // Global error overlay
  ErrorOverlay: undefined,
+
+ // react hot dom features enabled
+ IS_REACT_MERGE_ENABLED: false,
 };
 
 export const internalConfiguration = {

src/hot.dev.js

@@ -8,6 +8,7 @@ import { isOpened as isModuleOpened, hotModule, getLastModuleOpened } from './gl
 import logger from './logger';
 import { clearExceptions, logException } from './errorReporter';
 import { createQueue } from './utils/runQueue';
+import { enterHotUpdate, getHotGeneration } from './global/generation';
 
 /* eslint-disable camelcase, no-undef */
 const requireIndirect = typeof __webpack_require__ !== 'undefined' ? __webpack_require__ : require;
@@ -48,6 +49,29 @@ const makeHotExport = (sourceModule, moduleId) => {
  }
  const module = hotModule(moduleId);
 
+ const deepUpdate = () => {
+ // force flush all updates
+ runInRenderQueue(() => {
+ enterHotUpdate();
+ 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();
+ });
+ };
+
  // require all modules
  runInRequireQueue(() => {
  try {
@@ -58,12 +82,7 @@ const makeHotExport = (sourceModule, moduleId) => {
  console.error('React-Hot-Loader: error detected while loading', moduleId);
  console.error(e);
  }
- }).then(() => {
- // force flush all updates
- runInRenderQueue(() => {
- module.instances.forEach(inst => inst.forceUpdate());
- });
- });
+ }).then(deepUpdate);
  };
 
  if (sourceModule.hot) {

src/reactHotLoader.js

@@ -57,7 +57,6 @@ const hookWrapper = hook => {
 const noDeps = () => [];
 
 const reactHotLoader = {
- IS_REACT_MERGE_ENABLED: false,
  signature(type, key, getCustomHooks = noDeps) {
  addSignature(type, { key, getCustomHooks });
  return type;
@@ -75,7 +74,7 @@ const reactHotLoader = {
  const proxy = getProxyById(id);
 
  if (proxy && proxy.getCurrent() !== type) {
- if (!reactHotLoader.IS_REACT_MERGE_ENABLED) {
+ if (!configuration.IS_REACT_MERGE_ENABLED) {
  if (isTypeBlacklisted(type) || isTypeBlacklisted(proxy.getCurrent())) {
  logger.error('React-hot-loader: Cold component', uniqueLocalName, 'at', fileName, 'has been updated');
  }
@@ -146,7 +145,7 @@ const reactHotLoader = {
 
  configuration.ignoreSFC = configuration.ignoreSFCWhenInjected;
 
- reactHotLoader.IS_REACT_MERGE_ENABLED = true;
+ configuration.IS_REACT_MERGE_ENABLED = true;
  configuration.showReactDomPatchNotification = false;
  configuration.integratedComparator = true;
 

src/reconciler/hotReplacementRender.js

@@ -13,7 +13,6 @@ import {
  isLazyType,
  isForwardType,
 } from '../internal/reactUtils';
-import reactHotLoader from '../reactHotLoader';
 import logger from '../logger';
 import configuration, { internalConfiguration } from '../configuration';
 import { areSwappable } from './utils';
@@ -142,7 +141,7 @@ const mergeInject = (a, b, instance) => {
  }
  if (flatB.length === 0 && flatA.length === 1 && typeof flatA[0] !== 'object') {
  // terminal node
- } else if (!reactHotLoader.IS_REACT_MERGE_ENABLED) {
+ } else if (!configuration.IS_REACT_MERGE_ENABLED) {
  logger.warn(`React-hot-loader: unable to merge `, a, 'and children of ', instance);
  stackReport();
  }
@@ -312,7 +311,7 @@ const hotReplacementRender = (instance, stack) => {
  }
 
  if (!stackChild.type[PROXY_KEY]) {
- if (!reactHotLoader.IS_REACT_MERGE_ENABLED) {
+ if (!configuration.IS_REACT_MERGE_ENABLED) {
  if (isTypeBlacklisted(stackChild.type)) {
  logger.warn('React-hot-loader: cold element got updated ', stackChild.type);
  }