mobx 7.0.0 → 7.0.2

package/dist/mobx.esm.js

@@ -1,3 +1,5 @@
+const __MOBX_DEV__ = process.env.NODE_ENV !== "production";
+
 const niceErrors = {
   0: `Invalid value for configuration 'enforceActions', expected 'never', 'always' or 'observed'`,
   1(annotationType, key) {
@@ -84,9 +86,9 @@ const niceErrors = {
     return `'${annotationType}' can only be used with 'makeObservable'`;
   }
 };
-const errors = process.env.NODE_ENV !== "production" ? niceErrors : {};
+const errors = __MOBX_DEV__ ? niceErrors : {};
 function die(error, ...args) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     let e = typeof error === "string" ? error : errors[error];
     if (typeof e === "function") e = e.apply(null, args);
     throw new Error(`[MobX] ${e}`);
@@ -246,7 +248,7 @@ function setFlag(flags, mask, newValue) {
 }
 
 function assert20223DecoratorType(context, types) {
-  if (process.env.NODE_ENV !== "production" && !types.includes(context.kind)) {
+  if (__MOBX_DEV__ && !types.includes(context.kind)) {
     die(`The decorator applied to '${String(context.name)}' cannot be used on a ${context.kind} element`);
   }
 }
@@ -257,10 +259,11 @@ class Atom {
    * Create a new atom. For debugging purposes it is recommended to give it a name.
    * The onBecomeObserved and onBecomeUnobserved callbacks can be used for resource management.
    */
-  constructor(name_ = process.env.NODE_ENV !== "production" ? "Atom@" + getNextId() : "Atom") {
+  constructor(name_ = __MOBX_DEV__ ? "Atom@" + getNextId() : "Atom") {
     this.name_ = void 0;
     this.flags_ = 0b000;
-    this.observers_ = new Set();
+    // Allocated lazily on first observer to save memory.
+    this.observers_ = null;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = -1 /* IDerivationState_.NOT_TRACKING_ */;
     // onBecomeObservedListeners
@@ -342,6 +345,10 @@ function compareShallow(a, b) {
 const compareDefault = Object.is;
 
 function deepEnhancer(v, _, name) {
+  // primitives can never be made observable; skip the type checks below
+  if (v === null || typeof v !== "object" && typeof v !== "function") {
+    return v;
+  }
   // it is an observable already, done
   if (isObservable(v)) {
     return v;
@@ -407,7 +414,7 @@ function shallowEnhancer(v, _, name) {
       deep: false
     });
   }
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     die("The shallow modifier / decorator can only used in combination with arrays, objects, maps and sets");
   }
 }
@@ -416,7 +423,7 @@ function referenceEnhancer(newValue) {
   return newValue;
 }
 function refStructEnhancer(v, oldValue) {
-  if (process.env.NODE_ENV !== "production" && isObservable(v)) {
+  if (__MOBX_DEV__ && isObservable(v)) {
     die(`observable.struct should not be used with observable values`);
   }
   if (deepEqual(v, oldValue)) {
@@ -436,11 +443,11 @@ function isOverride(annotation) {
 }
 function make_$6(adm, key) {
   // Must not be plain object
-  if (process.env.NODE_ENV !== "production" && adm.isPlainObject_) {
+  if (__MOBX_DEV__ && adm.isPlainObject_) {
     die(`Cannot apply '${this.annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${this.annotationType_}' cannot be used on plain objects.`);
   }
   // Must override something
-  if (process.env.NODE_ENV !== "production" && !hasProp(adm.appliedAnnotations_, key)) {
+  if (__MOBX_DEV__ && !hasProp(adm.appliedAnnotations_, key)) {
     die(`'${adm.name_}.${key.toString()}' is annotated with '${this.annotationType_}', ` + `but no such annotated member was found on prototype.`);
   }
   return 0 /* MakeResult.Cancel */;
@@ -482,7 +489,7 @@ function extend_$4(adm, key, descriptor, proxyTrap) {
   return adm.defineProperty_(key, actionDescriptor, proxyTrap);
 }
 function decorateAction20223_(annotation, mthd, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["method", "field"]);
   }
   const {
@@ -531,7 +538,7 @@ function assertActionDescriptor(adm, {
 }, key, {
   value
 }) {
-  if (process.env.NODE_ENV !== "production" && !isFunction(value)) {
+  if (__MOBX_DEV__ && !isFunction(value)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on properties with a function value.`);
   }
 }
@@ -599,7 +606,7 @@ function extend_$3(adm, key, descriptor, proxyTrap) {
 }
 function decorateFlow20223_(annotation, mthd, context) {
   var _annotation$options_;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["method"]);
   }
   const {
@@ -624,7 +631,7 @@ function assertFlowDescriptor(adm, {
 }, key, {
   value
 }) {
-  if (process.env.NODE_ENV !== "production" && !isFunction(value)) {
+  if (__MOBX_DEV__ && !isFunction(value)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on properties with a generator function value.`);
   }
 }
@@ -678,7 +685,7 @@ function extend_$2(adm, key, descriptor, proxyTrap) {
   }), proxyTrap);
 }
 function decorateComputed20223_(annotation, get, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     assert20223DecoratorType(context, ["getter"]);
   }
   const ann = annotation;
@@ -695,7 +702,7 @@ function decorateComputed20223_(annotation, get, context) {
       get,
       context: target
     });
-    options.name || (options.name = process.env.NODE_ENV !== "production" ? `${adm.name_}.${key.toString()}` : `ObservableObject.${key.toString()}`);
+    options.name || (options.name = __MOBX_DEV__ ? `${adm.name_}.${key.toString()}` : `ObservableObject.${key.toString()}`);
     return new ComputedValue(options);
   }
   addInitializer(function () {
@@ -729,7 +736,7 @@ function assertComputedDescriptor(adm, {
 }, key, {
   get
 }) {
-  if (process.env.NODE_ENV !== "production" && !get) {
+  if (__MOBX_DEV__ && !get) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' can only be used on getter(+setter) properties.`);
   }
 }
@@ -751,7 +758,7 @@ function extend_$1(adm, key, descriptor, proxyTrap) {
   return adm.defineObservableProperty_(key, descriptor.value, (_this$options_$enhanc = (_this$options_ = this.options_) == null ? void 0 : _this$options_.enhancer_) != null ? _this$options_$enhanc : deepEnhancer, proxyTrap);
 }
 function decorateObservable20223_(annotation, desc, context) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (context.kind === "field") {
       throw die(`Please use \`@observable accessor ${String(context.name)}\` instead of \`@observable ${String(context.name)}\``);
     }
@@ -773,7 +780,7 @@ function decorateObservable20223_(annotation, desc, context) {
     const adm = asObservableObject(target)[$mobx];
     ((_adm$lazyObservableKe = adm.lazyObservableKeys_) != null ? _adm$lazyObservableKe : adm.lazyObservableKeys_ = new Map()).set(name, () => {
       var _ann$options_$enhance, _ann$options_;
-      return new ObservableValue(value, (_ann$options_$enhance = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.enhancer_) != null ? _ann$options_$enhance : deepEnhancer, process.env.NODE_ENV !== "production" ? `${adm.name_}.${name.toString()}` : `ObservableObject.${name.toString()}`, false);
+      return new ObservableValue(value, (_ann$options_$enhance = (_ann$options_ = ann.options_) == null ? void 0 : _ann$options_.enhancer_) != null ? _ann$options_$enhance : deepEnhancer, __MOBX_DEV__ ? `${adm.name_}.${name.toString()}` : `ObservableObject.${name.toString()}`, false);
     });
     return adm;
   }
@@ -797,7 +804,7 @@ function decorateObservable20223_(annotation, desc, context) {
 function assertObservableDescriptor(adm, {
   annotationType_
 }, key, descriptor) {
-  if (process.env.NODE_ENV !== "production" && !("value" in descriptor)) {
+  if (__MOBX_DEV__ && !("value" in descriptor)) {
     die(`Cannot apply '${annotationType_}' to '${adm.name_}.${key.toString()}':` + `\n'${annotationType_}' cannot be used on getter/setter properties`);
   }
 }
@@ -888,7 +895,7 @@ function createDecoratorAnnotation(annotation, decorate) {
     if (context && typeof context.kind === "string") {
       return decorate(annotation, value, context);
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       die(`Invalid arguments for \`${annotation.annotationType_}\``);
     }
     return undefined;
@@ -1016,7 +1023,7 @@ const computed = function computed(arg1, arg2) {
     return createComputedDecoratorAnnotation(createComputedAnnotation(COMPUTED, arg1));
   }
   // computed(expr, options?)
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(arg1)) {
       die("First argument to `computed` should be an expression.");
     }
@@ -1045,7 +1052,7 @@ const tmpNameDescriptor = {
   enumerable: false
 };
 function createAction(actionName, fn, autoAction = false, ref) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(fn)) {
       die("`action` can only be invoked on functions");
     }
@@ -1078,7 +1085,7 @@ function executeAction(actionName, canRunAsDerivation, fn, scope, args) {
 function _startAction(actionName, canRunAsDerivation,
 // true for autoAction
 scope, args) {
-  const notifySpy_ = process.env.NODE_ENV !== "production" && isSpyEnabled() && !!actionName;
+  const notifySpy_ = __MOBX_DEV__ && isSpyEnabled() && !!actionName;
   let startTime_ = 0;
   if (notifySpy_) {
     startTime_ = Date.now();
@@ -1096,12 +1103,12 @@ scope, args) {
   let prevAllowStateChanges_ = globalState.allowStateChanges; // by default preserve previous allow
   if (runAsAction) {
     untrackedStart();
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       prevAllowStateChanges_ = allowStateChangesStart(true);
     }
   }
   const prevAllowStateReads_ = globalState.allowStateReads;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateReadsStart(true);
   }
   const runInfo = {
@@ -1125,7 +1132,7 @@ function _endAction(runInfo) {
   if (runInfo.error_ !== undefined) {
     globalState.suppressReactionErrors = true;
   }
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateChangesEnd(runInfo.prevAllowStateChanges_);
     allowStateReadsEnd(runInfo.prevAllowStateReads_);
   }
@@ -1133,7 +1140,7 @@ function _endAction(runInfo) {
   if (runInfo.runAsAction_) {
     untrackedEnd(runInfo.prevDerivation_);
   }
-  if (process.env.NODE_ENV !== "production" && runInfo.notifySpy_) {
+  if (__MOBX_DEV__ && runInfo.notifySpy_) {
     spyReportEnd({
       time: Date.now() - runInfo.startTime_
     });
@@ -1159,7 +1166,7 @@ function allowStateChangesEnd(prev) {
 
 const CREATE = "create";
 class ObservableValue extends Atom {
-  constructor(value, enhancer_, name_ = process.env.NODE_ENV !== "production" ? "ObservableValue@" + getNextId() : "ObservableValue", notifySpy = true, equals_ = compareDefault) {
+  constructor(value, enhancer_, name_ = __MOBX_DEV__ ? "ObservableValue@" + getNextId() : "ObservableValue", notifySpy = true, equals_ = compareDefault) {
     super(name_);
     this.enhancer_ = void 0;
     this.name_ = void 0;
@@ -1173,7 +1180,7 @@ class ObservableValue extends Atom {
     this.name_ = name_;
     this.equals_ = equals_;
     this.value_ = enhancer_(value, undefined, name_);
-    if (process.env.NODE_ENV !== "production" && notifySpy && isSpyEnabled()) {
+    if (__MOBX_DEV__ && notifySpy && isSpyEnabled()) {
       var _this$value_;
       // only notify spy if this is a stand-alone observable
       spyReport({
@@ -1195,8 +1202,8 @@ class ObservableValue extends Atom {
     const oldValue = this.value_;
     newValue = this.prepareNewValue_(newValue);
     if (newValue !== globalState.UNCHANGED) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart({
           type: UPDATE,
           object: this,
@@ -1207,7 +1214,7 @@ class ObservableValue extends Atom {
         });
       }
       this.setNewValue_(newValue);
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -1282,7 +1289,8 @@ class ComputedValue {
     // nodes we are looking at. Our value depends on these nodes
     this.newObserving_ = null;
     // during tracking it's an array with new observed observers
-    this.observers_ = new Set();
+    // Lazily allocated on first observer - see Atom.observers_.
+    this.observers_ = null;
     this.runId_ = 0;
     this.lastAccessedBy_ = 0;
     this.lowestObserverState_ = 0 /* IDerivationState_.UP_TO_DATE_ */;
@@ -1304,9 +1312,9 @@ class ComputedValue {
       die(31);
     }
     this.derivation = options.get;
-    this.name_ = options.name || (process.env.NODE_ENV !== "production" ? "ComputedValue@" + getNextId() : "ComputedValue");
+    this.name_ = options.name || (__MOBX_DEV__ ? "ComputedValue@" + getNextId() : "ComputedValue");
     if (options.set) {
-      this.setter_ = createAction(process.env.NODE_ENV !== "production" ? this.name_ + "-setter" : "ComputedValue-setter", options.set);
+      this.setter_ = createAction(__MOBX_DEV__ ? this.name_ + "-setter" : "ComputedValue-setter", options.set);
     }
     this.equals_ = options.equals || compareDefault;
     this.scope_ = options.context;
@@ -1365,9 +1373,9 @@ class ComputedValue {
     if (this.isComputing) {
       die(32, this.name_, this.derivation);
     }
-    if (globalState.inBatch === 0 &&
+    if (globalState.inBatch === 0 && (
     // !globalState.trackingDerivatpion &&
-    this.observers_.size === 0 && !this.keepAlive_) {
+    !this.observers_ || this.observers_.size === 0) && !this.keepAlive_) {
       if (shouldCompute(this)) {
         this.warnAboutUntrackedRead_();
         startBatch(); // See perf test 'computed memoization'
@@ -1375,6 +1383,7 @@ class ComputedValue {
         endBatch();
       }
     } else {
+      const wasBeingObserved = this.isBeingObserved;
       reportObserved(this);
       if (shouldCompute(this)) {
         let prevTrackingContext = globalState.trackingContext;
@@ -1385,6 +1394,10 @@ class ComputedValue {
           propagateChangeConfirmed(this);
         }
         globalState.trackingContext = prevTrackingContext;
+      } else if (!wasBeingObserved && this.isBeingObserved) {
+        // We just became observed while serving a cached value, so the getter
+        // won't run and won't re-report our dependencies. Cascade to them. #4547
+        this.observing_.forEach(markObserved);
       }
     }
     const result = this.value_;
@@ -1416,7 +1429,7 @@ class ComputedValue {
     const changed = wasSuspended || isCaughtException(oldValue) || isCaughtException(newValue) || !this.equals_(oldValue, newValue);
     if (changed) {
       this.value_ = newValue;
-      if (process.env.NODE_ENV !== "production" && isSpyEnabled()) {
+      if (__MOBX_DEV__ && isSpyEnabled()) {
         spyReport({
           observableKind: "computed",
           debugObjectName: this.name_,
@@ -1432,7 +1445,7 @@ class ComputedValue {
   computeValue_(track) {
     this.isComputing = true;
     // don't allow state changes during computation
-    const prev = process.env.NODE_ENV !== "production" ? allowStateChangesStart(false) : false;
+    const prev = __MOBX_DEV__ ? allowStateChangesStart(false) : false;
     let res;
     if (track) {
       res = trackDerivedFunction(this, this.derivation, this.scope_);
@@ -1447,7 +1460,7 @@ class ComputedValue {
         }
       }
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       allowStateChangesEnd(prev);
     }
     this.isComputing = false;
@@ -1460,7 +1473,7 @@ class ComputedValue {
     }
   }
   warnAboutUntrackedRead_() {
-    if (!(process.env.NODE_ENV !== "production")) {
+    if (!__MOBX_DEV__) {
       return;
     }
     if (typeof this.requiresReaction_ === "boolean" ? this.requiresReaction_ : globalState.computedRequiresReaction) {
@@ -1510,7 +1523,7 @@ function shouldCompute(derivation) {
     case 1 /* IDerivationState_.POSSIBLY_STALE_ */:
       {
         // state propagation can occur outside of action/reactive context #2195
-        const prevAllowStateReads = process.env.NODE_ENV !== "production" ? allowStateReadsStart(true) : true;
+        const prevAllowStateReads = __MOBX_DEV__ ? allowStateReadsStart(true) : true;
         const prevUntracked = untrackedStart(); // no need for those computeds to be reported, they will be picked up in trackDerivedFunction.
         const obs = derivation.observing_,
           l = obs.length;
@@ -1525,7 +1538,7 @@ function shouldCompute(derivation) {
               } catch (e) {
                 // we are not interested in the value *or* exception at this moment, but if there is one, notify all
                 untrackedEnd(prevUntracked);
-                if (process.env.NODE_ENV !== "production") {
+                if (__MOBX_DEV__) {
                   allowStateReadsEnd(prevAllowStateReads);
                 }
                 return true;
@@ -1536,7 +1549,7 @@ function shouldCompute(derivation) {
             // invariantShouldCompute(derivation)
             if (derivation.dependenciesState_ === 2 /* IDerivationState_.STALE_ */) {
               untrackedEnd(prevUntracked);
-              if (process.env.NODE_ENV !== "production") {
+              if (__MOBX_DEV__) {
                 allowStateReadsEnd(prevAllowStateReads);
               }
               return true;
@@ -1545,7 +1558,7 @@ function shouldCompute(derivation) {
         }
         changeDependenciesStateTo0(derivation);
         untrackedEnd(prevUntracked);
-        if (process.env.NODE_ENV !== "production") {
+        if (__MOBX_DEV__) {
           allowStateReadsEnd(prevAllowStateReads);
         }
         return false;
@@ -1556,17 +1569,17 @@ function isComputingDerivation() {
   return globalState.trackingDerivation !== null; // filter out actions inside computations
 }
 function checkIfStateModificationsAreAllowed(atom) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
-  const hasObservers = atom.observers_.size > 0;
+  const hasObservers = !!atom.observers_ && atom.observers_.size > 0;
   // Should not be possible to change observed state outside strict mode, except during initialization, see #563
   if (!globalState.allowStateChanges && (hasObservers || globalState.enforceActions === "always")) {
     console.warn("[MobX] " + (globalState.enforceActions ? "Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: " : "Side effects like changing state are not allowed at this point. Are you trying to modify state from, for example, a computed value or the render function of a React component? You can wrap side effects in 'runInAction' (or decorate functions with 'action') if needed. Tried to modify: ") + atom.name_);
   }
 }
 function checkIfStateReadsAreAllowed(observable) {
-  if (process.env.NODE_ENV !== "production" && !globalState.allowStateReads && globalState.observableRequiresReaction) {
+  if (__MOBX_DEV__ && !globalState.allowStateReads && globalState.observableRequiresReaction) {
     console.warn(`[mobx] Observable '${observable.name_}' being read outside a reactive context.`);
   }
 }
@@ -1576,7 +1589,7 @@ function checkIfStateReadsAreAllowed(observable) {
  * as observer of any of the accessed observables.
  */
 function trackDerivedFunction(derivation, f, context) {
-  const prevAllowStateReads = process.env.NODE_ENV !== "production" ? allowStateReadsStart(true) : true;
+  const prevAllowStateReads = __MOBX_DEV__ ? allowStateReadsStart(true) : true;
   changeDependenciesStateTo0(derivation);
   // Preallocate array; will be trimmed by bindDependencies.
   derivation.newObserving_ = new Array(
@@ -1602,13 +1615,13 @@ function trackDerivedFunction(derivation, f, context) {
   globalState.trackingDerivation = prevTracking;
   bindDependencies(derivation);
   warnAboutDerivationWithoutDependencies(derivation);
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     allowStateReadsEnd(prevAllowStateReads);
   }
   return result;
 }
 function warnAboutDerivationWithoutDependencies(derivation) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   if (derivation.observing_.length !== 0) {
@@ -1785,6 +1798,13 @@ class MobXGlobals {
      * Are we currently processing reactions?
      */
     this.isRunningReactions = false;
+    /**
+     * Are we currently draining pendingUnobservations in endBatch?
+     * An onBecomeUnobserved handler can dispose a Reaction, which calls
+     * startBatch/endBatch again; this guards against re-entering the same
+     * drain loop recursively (see endBatch in observable.ts).
+     */
+    this.isRunningUnobservations = false;
     /**
      * Is it allowed to change observables at this point?
      * In general, MobX doesn't allow that when running computations and React.render.
@@ -1901,10 +1921,11 @@ function resetGlobalState() {
 }
 
 function hasObservers(observable) {
-  return observable.observers_ && observable.observers_.size > 0;
+  return !!observable.observers_ && observable.observers_.size > 0;
 }
 function getObservers(observable) {
-  return observable.observers_;
+  var _observable$observers;
+  return (_observable$observers = observable.observers_) != null ? _observable$observers : new Set();
 }
 // function invariantObservers(observable: IObservable) {
 //     const list = observable.observers
@@ -1924,10 +1945,8 @@ function getObservers(observable) {
 //     )
 // }
 function addObserver(observable, node) {
-  // invariant(node.dependenciesState !== -1, "INTERNAL ERROR, can add only dependenciesState !== -1");
-  // invariant(observable._observers.indexOf(node) === -1, "INTERNAL ERROR add already added node");
-  // invariantObservers(observable);
-  observable.observers_.add(node);
+  var _observable$observers2;
+  ((_observable$observers2 = observable.observers_) != null ? _observable$observers2 : observable.observers_ = new Set()).add(node);
   if (observable.lowestObserverState_ > node.dependenciesState_) {
     observable.lowestObserverState_ = node.dependenciesState_;
   }
@@ -1938,8 +1957,12 @@ function removeObserver(observable, node) {
   // invariant(globalState.inBatch > 0, "INTERNAL ERROR, remove should be called only inside batch");
   // invariant(observable._observers.indexOf(node) !== -1, "INTERNAL ERROR remove already removed node");
   // invariantObservers(observable);
-  observable.observers_.delete(node);
-  if (observable.observers_.size === 0) {
+  const observers = observable.observers_;
+  if (!observers) {
+    return;
+  }
+  observers.delete(node);
+  if (observers.size === 0) {
     // deleting last observer
     queueForUnobservation(observable);
   }
@@ -1965,26 +1988,59 @@ function endBatch() {
   if (--globalState.inBatch === 0) {
     runReactions();
     // the batch is actually about to finish, all unobserving should happen here.
-    const list = globalState.pendingUnobservations;
-    for (let i = 0; i < list.length; i++) {
-      const observable = list[i];
-      observable.isPendingUnobservation = false;
-      if (observable.observers_.size === 0) {
-        if (observable.isBeingObserved) {
-          // if this observable had reactive observers, trigger the hooks
-          observable.isBeingObserved = false;
-          observable.onBUO();
-        }
-        if (observable instanceof ComputedValue) {
-          // computed values are automatically teared down when the last observer leaves
-          // this process happens recursively, this computed might be the last observabe of another, etc..
-          observable.suspend_();
+    // Guard against re-entering this loop: an onBUO handler can dispose a Reaction,
+    // which calls startBatch/endBatch again while we're still iterating. Bail out of
+    // the nested call instead of recursing; the outer loop re-reads list.length on
+    // every iteration, so it picks up anything the nested dispose() pushes onto the
+    // same pendingUnobservations array.
+    if (!globalState.isRunningUnobservations) {
+      globalState.isRunningUnobservations = true;
+      try {
+        const list = globalState.pendingUnobservations;
+        for (let i = 0; i < list.length; i++) {
+          const observable = list[i];
+          observable.isPendingUnobservation = false;
+          if (!observable.observers_ || observable.observers_.size === 0) {
+            if (observable.isBeingObserved) {
+              // if this observable had reactive observers, trigger the hooks
+              observable.isBeingObserved = false;
+              observable.onBUO();
+            }
+            if (observable instanceof ComputedValue) {
+              // computed values are automatically teared down when the last observer leaves
+              // this process happens recursively, this computed might be the last observabe of another, etc..
+              observable.suspend_();
+            }
+          }
         }
+        globalState.pendingUnobservations = [];
+      } finally {
+        // Always release the guard, even if an onBUO handler (user code) threw,
+        // otherwise every future endBatch() would see isRunningUnobservations
+        // stuck true and silently stop draining pendingUnobservations forever.
+        globalState.isRunningUnobservations = false;
       }
     }
-    globalState.pendingUnobservations = [];
   }
 }
+/**
+ * Marks an observable as observed, cascading into the dependencies of a ComputedValue.
+ * Unobservation already cascades (`suspend_` -> `clearObserving`), observation normally
+ * only does so by accident: a newly observed computed usually recomputes and re-reports
+ * its dependencies. When it serves a cached value instead nothing re-reports them, so the
+ * transition has to be propagated by hand. See #4547.
+ */
+function markObserved(observable) {
+  var _observable$observing;
+  if (observable.isBeingObserved) {
+    return;
+  }
+  observable.isBeingObserved = true;
+  observable.onBO();
+  // No queueForUnobservation here: the observer links already exist, so the regular
+  // suspend_ -> clearObserving -> removeObserver teardown still delivers the onBUO.
+  (_observable$observing = observable.observing_) == null || _observable$observing.forEach(markObserved);
+}
 function reportObserved(observable) {
   checkIfStateReadsAreAllowed(observable);
   const derivation = globalState.trackingDerivation;
@@ -2004,7 +2060,7 @@ function reportObserved(observable) {
       }
     }
     return observable.isBeingObserved;
-  } else if (observable.observers_.size === 0 && globalState.inBatch > 0) {
+  } else if ((!observable.observers_ || observable.observers_.size === 0) && globalState.inBatch > 0) {
     queueForUnobservation(observable);
   }
   return false;
@@ -2031,13 +2087,14 @@ function reportObserved(observable) {
  */
 // Called by Atom when its value changes
 function propagateChanged(observable) {
+  var _observable$observers3;
   // invariantLOS(observable, "changed start");
   if (observable.lowestObserverState_ === 2 /* IDerivationState_.STALE_ */) {
     return;
   }
   observable.lowestObserverState_ = 2 /* IDerivationState_.STALE_ */;
   // Ideally we use for..of here, but the downcompiled version is really slow...
-  observable.observers_.forEach(d => {
+  (_observable$observers3 = observable.observers_) == null || _observable$observers3.forEach(d => {
     if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */) {
       d.onBecomeStale_();
     }
@@ -2047,12 +2104,13 @@ function propagateChanged(observable) {
 }
 // Called by ComputedValue when it recalculate and its value changed
 function propagateChangeConfirmed(observable) {
+  var _observable$observers4;
   // invariantLOS(observable, "confirmed start");
   if (observable.lowestObserverState_ === 2 /* IDerivationState_.STALE_ */) {
     return;
   }
   observable.lowestObserverState_ = 2 /* IDerivationState_.STALE_ */;
-  observable.observers_.forEach(d => {
+  (_observable$observers4 = observable.observers_) == null || _observable$observers4.forEach(d => {
     if (d.dependenciesState_ === 1 /* IDerivationState_.POSSIBLY_STALE_ */) {
       d.dependenciesState_ = 2 /* IDerivationState_.STALE_ */;
     } else if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */ // this happens during computing of `d`, just keep lowestObserverState up to date.
@@ -2064,12 +2122,13 @@ function propagateChangeConfirmed(observable) {
 }
 // Used by computed when its dependency changed, but we don't wan't to immediately recompute.
 function propagateMaybeChanged(observable) {
+  var _observable$observers5;
   // invariantLOS(observable, "maybe start");
   if (observable.lowestObserverState_ !== 0 /* IDerivationState_.UP_TO_DATE_ */) {
     return;
   }
   observable.lowestObserverState_ = 1 /* IDerivationState_.POSSIBLY_STALE_ */;
-  observable.observers_.forEach(d => {
+  (_observable$observers5 = observable.observers_) == null || _observable$observers5.forEach(d => {
     if (d.dependenciesState_ === 0 /* IDerivationState_.UP_TO_DATE_ */) {
       d.dependenciesState_ = 1 /* IDerivationState_.POSSIBLY_STALE_ */;
       d.onBecomeStale_();
@@ -2079,7 +2138,7 @@ function propagateMaybeChanged(observable) {
 }
 
 class Reaction {
-  constructor(name_ = process.env.NODE_ENV !== "production" ? "Reaction@" + getNextId() : "Reaction", onInvalidate_, errorHandler_, requiresObservable_) {
+  constructor(name_ = __MOBX_DEV__ ? "Reaction@" + getNextId() : "Reaction", onInvalidate_, errorHandler_, requiresObservable_) {
     this.name_ = void 0;
     this.onInvalidate_ = void 0;
     this.errorHandler_ = void 0;
@@ -2149,7 +2208,7 @@ class Reaction {
         this.isTrackPending = true;
         try {
           this.onInvalidate_();
-          if (process.env.NODE_ENV !== "production" && this.isTrackPending && isSpyEnabled()) {
+          if (__MOBX_DEV__ && this.isTrackPending && isSpyEnabled()) {
             // onInvalidate didn't trigger track right away..
             spyReport({
               name: this.name_,
@@ -2170,9 +2229,9 @@ class Reaction {
       // console.warn("Reaction already disposed") // Note: Not a warning / error in mobx 4 either
     }
     startBatch();
-    const notify = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notify = __MOBX_DEV__ && isSpyEnabled();
     let startTime;
-    if (process.env.NODE_ENV !== "production" && notify) {
+    if (__MOBX_DEV__ && notify) {
       startTime = Date.now();
       spyReportStart({
         name: this.name_,
@@ -2193,7 +2252,7 @@ class Reaction {
     if (isCaughtException(result)) {
       this.reportExceptionInDerivation_(result.cause);
     }
-    if (process.env.NODE_ENV !== "production" && notify) {
+    if (__MOBX_DEV__ && notify) {
       spyReportEnd({
         time: Date.now() - startTime
       });
@@ -2208,14 +2267,14 @@ class Reaction {
     if (globalState.disableErrorBoundaries) {
       throw error;
     }
-    const message = process.env.NODE_ENV !== "production" ? `[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '${this}'` : `[mobx] uncaught error in '${this}'`;
+    const message = __MOBX_DEV__ ? `[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: '${this}'` : `[mobx] uncaught error in '${this}'`;
     if (!globalState.suppressReactionErrors) {
       console.error(message, error);
       /** If debugging brought you here, please, read the above message :-). Tnx! */
-    } else if (process.env.NODE_ENV !== "production") {
+    } else if (__MOBX_DEV__) {
       console.warn(`[mobx] (error in reaction '${this.name_}' suppressed, fix error of causing action below)`);
     } // prettier-ignore
-    if (process.env.NODE_ENV !== "production" && isSpyEnabled()) {
+    if (__MOBX_DEV__ && isSpyEnabled()) {
       spyReport({
         type: "error",
         name: this.name_,
@@ -2284,7 +2343,7 @@ function runReactionsHelper() {
   // we converge to no remaining reactions after a while.
   while (allReactions.length > 0) {
     if (++iterations === MAX_REACTION_ITERATIONS) {
-      console.error(process.env.NODE_ENV !== "production" ? `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` + ` Probably there is a cycle in the reactive function: ${allReactions[0]}` : `[mobx] cycle in reaction: ${allReactions[0]}`);
+      console.error(__MOBX_DEV__ ? `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` + ` Probably there is a cycle in the reactive function: ${allReactions[0]}` : `[mobx] cycle in reaction: ${allReactions[0]}`);
       allReactions.splice(0); // clear reactions
     }
     let remainingReactions = allReactions.splice(0);
@@ -2301,10 +2360,10 @@ function setReactionScheduler(fn) {
 }
 
 function isSpyEnabled() {
-  return process.env.NODE_ENV !== "production" && !!globalState.spyListeners.length;
+  return __MOBX_DEV__ && !!globalState.spyListeners.length;
 }
 function spyReport(event) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   } // dead code elimination can do the rest
   if (!globalState.spyListeners.length) {
@@ -2316,7 +2375,7 @@ function spyReport(event) {
   }
 }
 function spyReportStart(event) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   const change = assign({}, event, {
@@ -2329,7 +2388,7 @@ const END_EVENT = {
   spyReportEnd: true
 };
 function spyReportEnd(change) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     return;
   }
   if (change) {
@@ -2342,7 +2401,7 @@ function spyReportEnd(change) {
   }
 }
 function spy(listener) {
-  if (!(process.env.NODE_ENV !== "production")) {
+  if (!__MOBX_DEV__) {
     console.warn(`[mobx.spy] Is a no-op in production builds`);
     return function () {};
   } else {
@@ -2392,7 +2451,7 @@ function createActionFactory(autoAction) {
         autoAction
       }));
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       die("Invalid arguments for `action`");
     }
   };
@@ -2419,7 +2478,7 @@ function isAction(thing) {
  */
 function autorun(view, opts = EMPTY_OBJECT) {
   var _opts$name, _opts$signal;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(view)) {
       die("Autorun expects a function as first argument");
     }
@@ -2427,7 +2486,7 @@ function autorun(view, opts = EMPTY_OBJECT) {
       die("Autorun does not accept actions since actions are untrackable");
     }
   }
-  const name = (_opts$name = opts == null ? void 0 : opts.name) != null ? _opts$name : process.env.NODE_ENV !== "production" ? view.name || "Autorun@" + getNextId() : "Autorun";
+  const name = (_opts$name = opts == null ? void 0 : opts.name) != null ? _opts$name : __MOBX_DEV__ ? view.name || "Autorun@" + getNextId() : "Autorun";
   const runSync = !opts.scheduler && !opts.delay;
   let reaction;
   if (runSync) {
@@ -2465,7 +2524,7 @@ function createSchedulerFromOptions(opts) {
 }
 function reaction(expression, effect, opts = EMPTY_OBJECT) {
   var _opts$name2, _opts$signal2;
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isFunction(expression) || !isFunction(effect)) {
       die("First and second argument to reaction should be functions");
     }
@@ -2473,7 +2532,7 @@ function reaction(expression, effect, opts = EMPTY_OBJECT) {
       die("Third argument of reactions should be an object");
     }
   }
-  const name = (_opts$name2 = opts.name) != null ? _opts$name2 : process.env.NODE_ENV !== "production" ? "Reaction@" + getNextId() : "Reaction";
+  const name = (_opts$name2 = opts.name) != null ? _opts$name2 : __MOBX_DEV__ ? "Reaction@" + getNextId() : "Reaction";
   const effectAction = action(name, opts.onError ? wrapErrorHandler(opts.onError, effect) : effect);
   const runSync = !opts.scheduler && !opts.delay;
   const scheduler = createSchedulerFromOptions(opts);
@@ -2571,7 +2630,7 @@ function configure(options) {
     }
   });
   globalState.allowStateReads = !globalState.observableRequiresReaction;
-  if (process.env.NODE_ENV !== "production" && globalState.disableErrorBoundaries === true) {
+  if (__MOBX_DEV__ && globalState.disableErrorBoundaries === true) {
     console.warn("WARNING: Debug feature only. MobX will NOT recover from errors when `disableErrorBoundaries` is enabled.");
   }
   if (options.reactionScheduler) {
@@ -2580,7 +2639,7 @@ function configure(options) {
 }
 
 function extendObservable(target, properties, annotations, options) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (arguments.length > 4) {
       die("'extendObservable' expected 2-4 arguments");
     }
@@ -2664,17 +2723,17 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
     return decorateFlow20223_(flowAnnotation, arg1, arg2);
   }
   // flow(fn)
-  if (process.env.NODE_ENV !== "production" && arguments.length !== 1) {
+  if (__MOBX_DEV__ && arguments.length !== 1) {
     die(`Flow expects single argument with generator function`);
   }
   const generator = arg1;
-  const name = generator.name || (process.env.NODE_ENV !== "production" ? "<unnamed flow>" : "flow");
+  const name = generator.name || (__MOBX_DEV__ ? "<unnamed flow>" : "flow");
   // Implementation based on https://github.com/tj/co/blob/master/index.js
   const res = function res() {
     const ctx = this;
     const args = arguments;
-    const runId = process.env.NODE_ENV !== "production" ? ++generatorId : 0;
-    const gen = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - init` : name, generator).apply(ctx, args);
+    const runId = __MOBX_DEV__ ? ++generatorId : 0;
+    const gen = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - init` : name, generator).apply(ctx, args);
     let rejector;
     let pendingPromise = undefined;
     const promise = new Promise(function (resolve, reject) {
@@ -2684,7 +2743,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
         pendingPromise = undefined;
         let ret;
         try {
-          ret = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.next).call(gen, res);
+          ret = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.next).call(gen, res);
         } catch (e) {
           return reject(e);
         }
@@ -2694,7 +2753,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
         pendingPromise = undefined;
         let ret;
         try {
-          ret = action(process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.throw).call(gen, err);
+          ret = action(__MOBX_DEV__ ? `${name} - runid: ${runId} - yield ${stepId++}` : name, gen.throw).call(gen, err);
         } catch (e) {
           return reject(e);
         }
@@ -2714,7 +2773,7 @@ const flow = /*#__PURE__*/assign(function flow(arg1, arg2) {
       }
       onFulfilled(undefined); // kick off the process
     });
-    const cancelActionName = process.env.NODE_ENV !== "production" ? `${name} - runid: ${runId} - cancel` : name;
+    const cancelActionName = __MOBX_DEV__ ? `${name} - runid: ${runId} - cancel` : name;
     promise.cancel = action(cancelActionName, function () {
       try {
         if (pendingPromise) {
@@ -2755,14 +2814,14 @@ function interceptReads(thing, propOrHandler, handler) {
   if (isObservableMap(thing) || isObservableArray(thing) || isObservableValue(thing)) {
     target = getAdministration(thing);
   } else if (isObservableObject(thing)) {
-    if (process.env.NODE_ENV !== "production" && !isStringish(propOrHandler)) {
+    if (__MOBX_DEV__ && !isStringish(propOrHandler)) {
       return die(`InterceptReads can only be used with a specific property, not with an object in general`);
     }
     target = getAdministration(thing, propOrHandler);
-  } else if (process.env.NODE_ENV !== "production") {
+  } else if (__MOBX_DEV__) {
     return die(`Expected observable map, object or array as first array`);
   }
-  if (process.env.NODE_ENV !== "production" && target.dehancer !== undefined) {
+  if (__MOBX_DEV__ && target.dehancer !== undefined) {
     return die(`An intercept reader was already established`);
   }
   target.dehancer = typeof propOrHandler === "function" ? propOrHandler : handler;
@@ -2804,13 +2863,13 @@ function _isComputed(value, property) {
   return isComputedValue(atom);
 }
 function isComputed(value) {
-  if (process.env.NODE_ENV !== "production" && arguments.length > 1) {
+  if (__MOBX_DEV__ && arguments.length > 1) {
     return die(`isComputed expects only 1 argument. Use isComputedProp to inspect the observability of a property`);
   }
   return _isComputed(value);
 }
 function isComputedProp(value, propName) {
-  if (process.env.NODE_ENV !== "production" && !isStringish(propName)) {
+  if (__MOBX_DEV__ && !isStringish(propName)) {
     return die(`isComputed expected a property name as second argument`);
   }
   return _isComputed(value, propName);
@@ -2821,7 +2880,7 @@ function _isObservable(value, property) {
     return false;
   }
   if (property !== undefined) {
-    if (process.env.NODE_ENV !== "production" && (isObservableMap(value) || isObservableArray(value))) {
+    if (__MOBX_DEV__ && (isObservableMap(value) || isObservableArray(value))) {
       return die("isObservable(object, propertyName) is not supported for arrays and maps. Use map.has or array.length instead.");
     }
     if (isObservableObject(value)) {
@@ -2835,13 +2894,13 @@ function _isObservable(value, property) {
   return isObservableObject(value) || !!value[$mobx] || isAtom(value) || isReaction(value) || isComputedValue(value);
 }
 function isObservable(value) {
-  if (process.env.NODE_ENV !== "production" && arguments.length !== 1) {
+  if (__MOBX_DEV__ && arguments.length !== 1) {
     die(`isObservable expects only 1 argument. Use isObservableProp to inspect the observability of a property`);
   }
   return _isObservable(value);
 }
 function isObservableProp(value, propName) {
-  if (process.env.NODE_ENV !== "production" && !isStringish(propName)) {
+  if (__MOBX_DEV__ && !isStringish(propName)) {
     return die(`expected a property name as second argument`);
   }
   return _isObservable(value, propName);
@@ -3003,15 +3062,15 @@ function observeObservable(thing, listener, fireImmediately) {
       });
     }
   } else if (isObservableMap(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support fireImmediately=true in combination with maps.");
     }
   } else if (isObservableSet(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support fireImmediately=true in combination with sets.");
     }
   } else if (isObservableObject(thing)) {
-    if (process.env.NODE_ENV !== "production" && fireImmediately === true) {
+    if (__MOBX_DEV__ && fireImmediately === true) {
       die("`observe` doesn't support the fire immediately property for observable objects.");
     }
   } else {
@@ -3109,7 +3168,7 @@ function toJSHelper(source, __alreadySeen) {
  * Complex scenarios require custom solution, eg implementing `toJSON` or using `serializr` lib.
  */
 function toJS(source, options) {
-  if (process.env.NODE_ENV !== "production" && options) {
+  if (__MOBX_DEV__ && options) {
     die("toJS no longer supports options");
   }
   return toJSHelper(source, new Map());
@@ -3152,8 +3211,8 @@ function _when(predicate, effect, opts) {
       }
     }, opts.timeout);
   }
-  opts.name = process.env.NODE_ENV !== "production" ? opts.name || "When@" + getNextId() : "When";
-  const effectAction = createAction(process.env.NODE_ENV !== "production" ? opts.name + "-effect" : "When-effect", effect);
+  opts.name = __MOBX_DEV__ ? opts.name || "When@" + getNextId() : "When";
+  const effectAction = createAction(__MOBX_DEV__ ? opts.name + "-effect" : "When-effect", effect);
   // eslint-disable-next-line
   var disposer = autorun(r => {
     // predicate should not change state
@@ -3170,7 +3229,7 @@ function _when(predicate, effect, opts) {
 }
 function whenPromise(predicate, opts) {
   var _opts$signal;
-  if (process.env.NODE_ENV !== "production" && opts && opts.onError) {
+  if (__MOBX_DEV__ && opts && opts.onError) {
     return die(`the options 'onError' and 'promise' cannot be combined`);
   }
   if (opts != null && (_opts$signal = opts.signal) != null && _opts$signal.aborted) {
@@ -3318,7 +3377,7 @@ function makeObservable(target, annotations, options) {
 // proto[keysSymbol] = new Set<PropertyKey>()
 const keysSymbol = /*#__PURE__*/Symbol("mobx-keys");
 function makeAutoObservable(target, overrides, options) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     if (!isPlainObject(target) && !isPlainObject(Object.getPrototypeOf(target))) {
       die(`'makeAutoObservable' can only be used for classes that don't have a superclass`);
     }
@@ -3414,7 +3473,7 @@ const arrayTraps = {
   }
 };
 class ObservableArrayAdministration {
-  constructor(name = process.env.NODE_ENV !== "production" ? "ObservableArray@" + getNextId() : "ObservableArray", enhancer, owned_) {
+  constructor(name = __MOBX_DEV__ ? "ObservableArray@" + getNextId() : "ObservableArray", enhancer, owned_) {
     this.owned_ = void 0;
     this.atom_ = void 0;
     this.values_ = [];
@@ -3427,7 +3486,7 @@ class ObservableArrayAdministration {
     this.lastKnownLength_ = 0;
     this.owned_ = owned_;
     this.atom_ = new Atom(name);
-    this.enhancer_ = (newV, oldV) => enhancer(newV, oldV, process.env.NODE_ENV !== "production" ? name + "[..]" : "ObservableArray[..]");
+    this.enhancer_ = (newV, oldV) => enhancer(newV, oldV, __MOBX_DEV__ ? name + "[..]" : "ObservableArray[..]");
   }
   dehanceValue_(value) {
     if (this.dehancer !== undefined) {
@@ -3502,7 +3561,7 @@ class ObservableArrayAdministration {
       newItems = change.added;
     }
     newItems = newItems.length === 0 ? newItems : newItems.map(v => this.enhancer_(v, undefined));
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       const lengthDelta = newItems.length - deleteCount;
       this.updateArrayLength_(length, lengthDelta); // checks if internal array wasn't modified
     }
@@ -3532,7 +3591,7 @@ class ObservableArrayAdministration {
     }
   }
   notifyArrayChildUpdate_(index, newValue, oldValue) {
-    const notifySpy = process.env.NODE_ENV !== "production" && !this.owned_ && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && !this.owned_ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "array",
@@ -3545,19 +3604,19 @@ class ObservableArrayAdministration {
     } : null;
     // The reason why this is on right hand side here (and not above), is this way the uglifier will drop it, but it won't
     // cause any runtime overhead in development mode without NODE_ENV set, unless spying is enabled
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     }
     this.atom_.reportChanged();
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
   notifyArraySplice_(index, added, removed) {
-    const notifySpy = process.env.NODE_ENV !== "production" && !this.owned_ && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && !this.owned_ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "array",
@@ -3570,7 +3629,7 @@ class ObservableArrayAdministration {
       removedCount: removed.length,
       addedCount: added.length
     } : null;
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     }
     this.atom_.reportChanged();
@@ -3578,7 +3637,7 @@ class ObservableArrayAdministration {
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
@@ -3623,7 +3682,7 @@ class ObservableArrayAdministration {
     }
   }
 }
-function createObservableArray(initialValues, enhancer, name = process.env.NODE_ENV !== "production" ? "ObservableArray@" + getNextId() : "ObservableArray", owned = false) {
+function createObservableArray(initialValues, enhancer, name = __MOBX_DEV__ ? "ObservableArray@" + getNextId() : "ObservableArray", owned = false) {
   return initObservable(() => {
     const adm = new ObservableArrayAdministration(name, enhancer, owned);
     addHiddenFinalProp(adm.values_, $mobx, adm);
@@ -3798,7 +3857,7 @@ const DELETE = "delete";
 // just extend Map? See also https://gist.github.com/nestharus/13b4d74f2ef4a2f4357dbd3fc23c1e54
 // But: https://github.com/mobxjs/mobx/issues/1556
 class ObservableMap {
-  constructor(initialData, enhancer_ = deepEnhancer, name_ = process.env.NODE_ENV !== "production" ? "ObservableMap@" + getNextId() : "ObservableMap") {
+  constructor(initialData, enhancer_ = deepEnhancer, name_ = __MOBX_DEV__ ? "ObservableMap@" + getNextId() : "ObservableMap") {
     this.enhancer_ = void 0;
     this.name_ = void 0;
     this[$mobx] = ObservableMapMarker;
@@ -3812,7 +3871,7 @@ class ObservableMap {
     this.enhancer_ = enhancer_;
     this.name_ = name_;
     initObservable(() => {
-      this.keysAtom_ = createAtom(process.env.NODE_ENV !== "production" ? `${this.name_}.keys()` : "ObservableMap.keys()");
+      this.keysAtom_ = createAtom(__MOBX_DEV__ ? `${this.name_}.keys()` : "ObservableMap.keys()");
       this.data_ = new Map();
       this.hasMap_ = new Map();
       if (initialData) {
@@ -3829,7 +3888,7 @@ class ObservableMap {
     }
     let entry = this.hasMap_.get(key);
     if (!entry) {
-      const newEntry = entry = new ObservableValue(this.has_(key), referenceEnhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}?` : "ObservableMap.key?", false);
+      const newEntry = entry = new ObservableValue(this.has_(key), referenceEnhancer, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}?` : "ObservableMap.key?", false);
       this.hasMap_.set(key, newEntry);
       newEntry.onBUOL = new Set([() => this.hasMap_.delete(key)]);
     }
@@ -3869,7 +3928,7 @@ class ObservableMap {
       }
     }
     if (this.has_(key)) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "map",
@@ -3879,7 +3938,7 @@ class ObservableMap {
         oldValue: this.data_.get(key).value_,
         name: key
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       } // TODO fix type
       transaction(() => {
@@ -3893,7 +3952,7 @@ class ObservableMap {
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
       return true;
@@ -3904,7 +3963,7 @@ class ObservableMap {
     const observable = this.data_.get(key);
     newValue = observable.prepareNewValue_(newValue);
     if (newValue !== globalState.UNCHANGED) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "map",
@@ -3915,14 +3974,14 @@ class ObservableMap {
         name: key,
         newValue
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       } // TODO fix type
       observable.setNewValue_(newValue);
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -3931,13 +3990,13 @@ class ObservableMap {
     checkIfStateModificationsAreAllowed(this.keysAtom_);
     transaction(() => {
       var _this$hasMap_$get2;
-      const observable = new ObservableValue(newValue, this.enhancer_, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}` : "ObservableMap.key", false);
+      const observable = new ObservableValue(newValue, this.enhancer_, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}` : "ObservableMap.key", false);
       this.data_.set(key, observable);
       newValue = observable.value_; // value might have been changed
       (_this$hasMap_$get2 = this.hasMap_.get(key)) == null || _this$hasMap_$get2.setNewValue_(true);
       this.keysAtom_.reportChanged();
     });
-    const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && isSpyEnabled();
     const notify = hasListeners(this);
     const change = notify || notifySpy ? {
       observableKind: "map",
@@ -3947,13 +4006,13 @@ class ObservableMap {
       name: key,
       newValue
     } : null;
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportStart(change);
     } // TODO fix type
     if (notify) {
       notifyListeners(this, change);
     }
-    if (process.env.NODE_ENV !== "production" && notifySpy) {
+    if (__MOBX_DEV__ && notifySpy) {
       spyReportEnd();
     }
   }
@@ -4170,7 +4229,7 @@ function convertToMap(dataStructure) {
 
 const ObservableSetMarker = {};
 class ObservableSet {
-  constructor(initialData, enhancer = deepEnhancer, name_ = process.env.NODE_ENV !== "production" ? "ObservableSet@" + getNextId() : "ObservableSet") {
+  constructor(initialData, enhancer = deepEnhancer, name_ = __MOBX_DEV__ ? "ObservableSet@" + getNextId() : "ObservableSet") {
     this.name_ = void 0;
     this[$mobx] = ObservableSetMarker;
     this.data_ = new Set();
@@ -4231,7 +4290,7 @@ class ObservableSet {
         this.data_.add(this.enhancer_(value, undefined));
         this.atom_.reportChanged();
       });
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "set",
@@ -4240,13 +4299,13 @@ class ObservableSet {
         object: this,
         newValue: value
       } : null;
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportStart(change);
       }
       if (notify) {
         notifyListeners(this, change);
       }
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportEnd();
       }
     }
@@ -4264,7 +4323,7 @@ class ObservableSet {
       }
     }
     if (this.has(value)) {
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const notify = hasListeners(this);
       const change = notify || notifySpy ? {
         observableKind: "set",
@@ -4273,7 +4332,7 @@ class ObservableSet {
         object: this,
         oldValue: value
       } : null;
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportStart(change);
       }
       transaction(() => {
@@ -4283,7 +4342,7 @@ class ObservableSet {
       if (notify) {
         notifyListeners(this, change);
       }
-      if (notifySpy && process.env.NODE_ENV !== "production") {
+      if (notifySpy && __MOBX_DEV__) {
         spyReportEnd();
       }
       return true;
@@ -4336,31 +4395,16 @@ class ObservableSet {
     });
   }
   intersection(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.intersection(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.intersection(otherSet);
-    }
+    return new Set(this).intersection(otherSet);
   }
   union(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.union(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.union(otherSet);
-    }
+    return new Set(this).union(otherSet);
   }
   difference(otherSet) {
     return new Set(this).difference(otherSet);
   }
   symmetricDifference(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.symmetricDifference(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.symmetricDifference(otherSet);
-    }
+    return new Set(this).symmetricDifference(otherSet);
   }
   isSubsetOf(otherSet) {
     return new Set(this).isSubsetOf(otherSet);
@@ -4369,28 +4413,46 @@ class ObservableSet {
     return new Set(this).isSupersetOf(otherSet);
   }
   isDisjointFrom(otherSet) {
-    if (isES6Set(otherSet) && !isObservableSet(otherSet)) {
-      return otherSet.isDisjointFrom(this);
-    } else {
-      const dehancedSet = new Set(this);
-      return dehancedSet.isDisjointFrom(otherSet);
-    }
+    return new Set(this).isDisjointFrom(otherSet);
   }
   replace(other) {
     if (isObservableSet(other)) {
       other = new Set(other);
     }
-    transaction(() => {
-      if (Array.isArray(other)) {
-        this.clear();
-        other.forEach(value => this.add(value));
-      } else if (isES6Set(other)) {
-        this.clear();
-        other.forEach(value => this.add(value));
-      } else if (other !== null && other !== undefined) {
-        die(41, other);
-      }
-    });
+    if (Array.isArray(other) || isES6Set(other)) {
+      // Only emit `delete`/`add` events (and `reportChanged`) for values that
+      // actually change, instead of clearing and re-adding everything. `add` and
+      // `delete` are already no-ops for values that are respectively already
+      // present or already absent, so we just need to avoid deleting values that
+      // are part of the replacement. See #3761.
+      transaction(() => {
+        // Collect the desired values for quick lookup. `other` is already a Set
+        // here when it was passed (or snapshotted from an observable set) as one,
+        // so reuse it rather than allocating another; arrays are wrapped (which
+        // also dedupes them).
+        const replacementValues = isES6Set(other) ? other : new Set(other);
+        // Short-circuit the trivial cases: an empty replacement is just a clear,
+        // and replacing into an empty set only needs the adds.
+        if (replacementValues.size === 0) {
+          this.clear();
+          return;
+        }
+        if (this.data_.size === 0) {
+          replacementValues.forEach(value => this.add(value));
+          return;
+        }
+        // Delete values that are not part of the replacement.
+        for (const value of this.data_.values()) {
+          if (!replacementValues.has(this.dehanceValue_(value))) {
+            this.delete(value);
+          }
+        }
+        // Add new values; values that are already present are a no-op.
+        replacementValues.forEach(value => this.add(value));
+      });
+    } else if (other !== null && other !== undefined) {
+      die(41, other);
+    }
     return this;
   }
   toJSON() {
@@ -4436,13 +4498,13 @@ class ObservableObjectAdministration {
     this.values_ = values_;
     this.name_ = name_;
     this.defaultAnnotation_ = defaultAnnotation_;
-    this.keysAtom_ = new Atom(process.env.NODE_ENV !== "production" ? `${this.name_}.keys` : "ObservableObject.keys");
+    this.keysAtom_ = new Atom(__MOBX_DEV__ ? `${this.name_}.keys` : "ObservableObject.keys");
     // Optimization: we use this frequently
     this.isPlainObject_ = isPlainObject(this.target_);
-    if (process.env.NODE_ENV !== "production" && !isAnnotation(this.defaultAnnotation_)) {
+    if (__MOBX_DEV__ && !isAnnotation(this.defaultAnnotation_)) {
       die(`defaultAnnotation must be valid annotation`);
     }
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       // Prepare structure for tracking which fields were already annotated
       this.appliedAnnotations_ = {};
     }
@@ -4505,7 +4567,7 @@ class ObservableObjectAdministration {
     // notify spy & observers
     if (newValue !== globalState.UNCHANGED) {
       const notify = hasListeners(this);
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const change = notify || notifySpy ? {
         type: UPDATE,
         observableKind: "object",
@@ -4515,14 +4577,14 @@ class ObservableObjectAdministration {
         name: key,
         newValue
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       }
       observable.setNewValue_(newValue);
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -4576,7 +4638,7 @@ class ObservableObjectAdministration {
     this.pendingKeys_ || (this.pendingKeys_ = new Map());
     let entry = this.pendingKeys_.get(key);
     if (!entry) {
-      entry = new ObservableValue(key in this.target_, referenceEnhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${stringifyKey(key)}?` : "ObservableObject.key?", false);
+      entry = new ObservableValue(key in this.target_, referenceEnhancer, __MOBX_DEV__ ? `${this.name_}.${stringifyKey(key)}?` : "ObservableObject.key?", false);
       this.pendingKeys_.set(key, entry);
     }
     return entry.get();
@@ -4692,7 +4754,7 @@ class ObservableObjectAdministration {
       } else {
         defineProperty(this.target_, key, descriptor);
       }
-      const observable = new ObservableValue(value, enhancer, process.env.NODE_ENV !== "production" ? `${this.name_}.${key.toString()}` : "ObservableObject.key", false);
+      const observable = new ObservableValue(value, enhancer, __MOBX_DEV__ ? `${this.name_}.${key.toString()}` : "ObservableObject.key", false);
       this.values_.set(key, observable);
       // Notify (value possibly changed by ObservableValue)
       this.notifyPropertyAddition_(key, observable.value_);
@@ -4724,7 +4786,7 @@ class ObservableObjectAdministration {
           return null;
         }
       }
-      options.name || (options.name = process.env.NODE_ENV !== "production" ? `${this.name_}.${key.toString()}` : "ObservableObject.key");
+      options.name || (options.name = __MOBX_DEV__ ? `${this.name_}.${key.toString()}` : "ObservableObject.key");
       options.context = this.proxy_ || this.target_;
       const cachedDescriptor = getCachedObservablePropDescriptor(key);
       const descriptor = {
@@ -4778,7 +4840,7 @@ class ObservableObjectAdministration {
       var _this$pendingKeys_;
       startBatch();
       const notify = hasListeners(this);
-      const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+      const notifySpy = __MOBX_DEV__ && isSpyEnabled();
       const observable = this.values_.get(key);
       // Value needed for spies/listeners
       let value = undefined;
@@ -4796,7 +4858,7 @@ class ObservableObjectAdministration {
         delete this.target_[key];
       }
       // Allow re-annotating this field
-      if (process.env.NODE_ENV !== "production") {
+      if (__MOBX_DEV__) {
         delete this.appliedAnnotations_[key];
       }
       // Clear observable
@@ -4824,13 +4886,13 @@ class ObservableObjectAdministration {
           oldValue: value,
           name: key
         };
-        if (process.env.NODE_ENV !== "production" && notifySpy) {
+        if (__MOBX_DEV__ && notifySpy) {
           spyReportStart(change);
         }
         if (notify) {
           notifyListeners(this, change);
         }
-        if (process.env.NODE_ENV !== "production" && notifySpy) {
+        if (__MOBX_DEV__ && notifySpy) {
           spyReportEnd();
         }
       }
@@ -4842,7 +4904,7 @@ class ObservableObjectAdministration {
   notifyPropertyAddition_(key, value) {
     var _this$pendingKeys_2;
     const notify = hasListeners(this);
-    const notifySpy = process.env.NODE_ENV !== "production" && isSpyEnabled();
+    const notifySpy = __MOBX_DEV__ && isSpyEnabled();
     if (notify || notifySpy) {
       const change = notify || notifySpy ? {
         type: ADD,
@@ -4852,13 +4914,13 @@ class ObservableObjectAdministration {
         name: key,
         newValue: value
       } : null;
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportStart(change);
       }
       if (notify) {
         notifyListeners(this, change);
       }
-      if (process.env.NODE_ENV !== "production" && notifySpy) {
+      if (__MOBX_DEV__ && notifySpy) {
         spyReportEnd();
       }
     }
@@ -4883,19 +4945,19 @@ class ObservableObjectAdministration {
 }
 function asObservableObject(target, options) {
   var _options$name;
-  if (process.env.NODE_ENV !== "production" && options && isObservableObject(target)) {
+  if (__MOBX_DEV__ && options && isObservableObject(target)) {
     die(`Options can't be provided for already observable objects.`);
   }
   if (hasProp(target, $mobx)) {
-    if (process.env.NODE_ENV !== "production" && !(getAdministration(target) instanceof ObservableObjectAdministration)) {
+    if (__MOBX_DEV__ && !(getAdministration(target) instanceof ObservableObjectAdministration)) {
       die(`Cannot convert '${getDebugName(target)}' into observable object:` + `\nThe target is already observable of different type.` + `\nExtending builtins is not supported.`);
     }
     return target;
   }
-  if (process.env.NODE_ENV !== "production" && !Object.isExtensible(target)) {
+  if (__MOBX_DEV__ && !Object.isExtensible(target)) {
     die("Cannot make the designated object observable; it is not extensible");
   }
-  const name = (_options$name = options == null ? void 0 : options.name) != null ? _options$name : process.env.NODE_ENV !== "production" ? `${isPlainObject(target) ? "ObservableObject" : target.constructor.name}@${getNextId()}` : "ObservableObject";
+  const name = (_options$name = options == null ? void 0 : options.name) != null ? _options$name : __MOBX_DEV__ ? `${isPlainObject(target) ? "ObservableObject" : target.constructor.name}@${getNextId()}` : "ObservableObject";
   const adm = new ObservableObjectAdministration(target, new Map(), String(name), getAnnotationFromOptions(options));
   addHiddenProp(target, $mobx, adm);
   return target;
@@ -4918,20 +4980,20 @@ function isObservableObject(thing) {
   return false;
 }
 function recordAnnotationApplied(adm, annotation, key) {
-  if (process.env.NODE_ENV !== "production") {
+  if (__MOBX_DEV__) {
     adm.appliedAnnotations_[key] = annotation;
   }
 }
 function assertAnnotable(adm, annotation, key) {
   // Valid annotation
-  if (process.env.NODE_ENV !== "production" && !isAnnotation(annotation)) {
+  if (__MOBX_DEV__ && !isAnnotation(annotation)) {
     die(`Cannot annotate '${adm.name_}.${key.toString()}': Invalid annotation.`);
   }
   /*
   // Configurable, not sealed, not frozen
   // Possibly not needed, just a little better error then the one thrown by engine.
   // Cases where this would be useful the most (subclass field initializer) are not interceptable by this.
-  if (__DEV__) {
+  if (__MOBX_DEV__) {
       const configurable = getDescriptor(adm.target_, key)?.configurable
       const frozen = Object.isFrozen(adm.target_)
       const sealed = Object.isSealed(adm.target_)
@@ -4958,7 +5020,7 @@ function assertAnnotable(adm, annotation, key) {
   }
   */
   // Not annotated
-  if (process.env.NODE_ENV !== "production" && !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
+  if (__MOBX_DEV__ && !isOverride(annotation) && hasProp(adm.appliedAnnotations_, key)) {
     const fieldName = `${adm.name_}.${key.toString()}`;
     const currentAnnotationType = adm.appliedAnnotations_[key].annotationType_;
     const requestedAnnotationType = annotation.annotationType_;
@@ -5050,13 +5112,13 @@ function getDebugName(thing, property) {
  */
 function initObservable(cb) {
   const derivation = untrackedStart();
-  const allowStateChanges = process.env.NODE_ENV !== "production" ? allowStateChangesStart(true) : true;
+  const allowStateChanges = __MOBX_DEV__ ? allowStateChangesStart(true) : true;
   startBatch();
   try {
     return cb();
   } finally {
     endBatch();
-    if (process.env.NODE_ENV !== "production") {
+    if (__MOBX_DEV__) {
       allowStateChangesEnd(allowStateChanges);
     }
     untrackedEnd(derivation);
@@ -5248,7 +5310,7 @@ function isAnnotation(thing) {
  * - utils/   Utility stuff.
  *
  */
-if (process.env.NODE_ENV !== "production") {
+if (__MOBX_DEV__) {
   const g = globalThis;
   ["Symbol", "Map", "Set", "Proxy"].forEach(m => {
     if (typeof g[m] === "undefined") {
@@ -5256,7 +5318,7 @@ if (process.env.NODE_ENV !== "production") {
     }
   });
 }
-if (process.env.NODE_ENV !== "production" && typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
+if (__MOBX_DEV__ && typeof __MOBX_DEVTOOLS_GLOBAL_HOOK__ === "object") {
   // See: https://github.com/andykog/mobx-devtools/
   __MOBX_DEVTOOLS_GLOBAL_HOOK__.injectMobx({
     spy,