mobx-react 7.6.0 → 9.0.0

package/dist/mobxreact.umd.development.js

@@ -6,52 +6,26 @@
 
     var React__default = 'default' in React ? React['default'] : React;
 
-    var symbolId = 0;
-
-    function createSymbol(name) {
-      if (typeof Symbol === "function") {
-        return Symbol(name);
-      }
-
-      var symbol = "__$mobx-react " + name + " (" + symbolId + ")";
-      symbolId++;
-      return symbol;
-    }
-
-    var createdSymbols = {};
-    function newSymbol(name) {
-      if (!createdSymbols[name]) {
-        createdSymbols[name] = createSymbol(name);
-      }
-
-      return createdSymbols[name];
-    }
     function shallowEqual(objA, objB) {
       //From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
       if (is(objA, objB)) {
         return true;
       }
-
       if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
         return false;
       }
-
       var keysA = Object.keys(objA);
       var keysB = Object.keys(objB);
-
       if (keysA.length !== keysB.length) {
         return false;
       }
-
       for (var i = 0; i < keysA.length; i++) {
         if (!Object.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
           return false;
         }
       }
-
       return true;
     }
-
     function is(x, y) {
       // From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
       if (x === y) {
@@ -59,9 +33,8 @@
       } else {
         return x !== x && y !== y;
       }
-    } // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
-
-
+    }
+    // based on https://github.com/mridgway/hoist-non-react-statics/blob/master/src/index.js
     var hoistBlackList = {
       $$typeof: 1,
       render: 1,
@@ -86,33 +59,12 @@
         }
       });
     }
-    /**
-     * Helper to set `prop` to `this` as non-enumerable (hidden prop)
-     * @param target
-     * @param prop
-     * @param value
-     */
-
-    function setHiddenProp(target, prop, value) {
-      if (!Object.hasOwnProperty.call(target, prop)) {
-        Object.defineProperty(target, prop, {
-          enumerable: false,
-          configurable: true,
-          writable: true,
-          value: value
-        });
-      } else {
-        target[prop] = value;
-      }
-    }
     /**
      * Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
      * and the handler provided by mobx-react
      */
-
-    var mobxMixins = /*#__PURE__*/newSymbol("patchMixins");
-    var mobxPatchedDefinition = /*#__PURE__*/newSymbol("patchedDefinition");
-
+    var mobxMixins = /*#__PURE__*/Symbol("patchMixins");
+    var mobxPatchedDefinition = /*#__PURE__*/Symbol("patchedDefinition");
     function getMixins(target, methodName) {
       var mixins = target[mobxMixins] = target[mobxMixins] || {};
       var methodMixins = mixins[methodName] = mixins[methodName] || {};
@@ -120,28 +72,21 @@
       methodMixins.methods = methodMixins.methods || [];
       return methodMixins;
     }
-
     function wrapper(realMethod, mixins) {
       var _this = this;
-
       for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
         args[_key - 2] = arguments[_key];
       }
-
       // locks are used to ensure that mixins are invoked only once per invocation, even on recursive calls
       mixins.locks++;
-
       try {
         var retVal;
-
         if (realMethod !== undefined && realMethod !== null) {
           retVal = realMethod.apply(this, args);
         }
-
         return retVal;
       } finally {
         mixins.locks--;
-
         if (mixins.locks === 0) {
           mixins.methods.forEach(function (mx) {
             mx.apply(_this, args);
@@ -149,41 +94,31 @@
         }
       }
     }
-
     function wrapFunction(realMethod, mixins) {
       var fn = function fn() {
         for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
           args[_key2] = arguments[_key2];
         }
-
         wrapper.call.apply(wrapper, [this, realMethod, mixins].concat(args));
       };
-
       return fn;
     }
-
     function patch(target, methodName, mixinMethod) {
       var mixins = getMixins(target, methodName);
-
       if (mixins.methods.indexOf(mixinMethod) < 0) {
         mixins.methods.push(mixinMethod);
       }
-
       var oldDefinition = Object.getOwnPropertyDescriptor(target, methodName);
-
       if (oldDefinition && oldDefinition[mobxPatchedDefinition]) {
         // already patched definition, do not repatch
         return;
       }
-
       var originalMethod = target[methodName];
       var newDefinition = createDefinition(target, methodName, oldDefinition ? oldDefinition.enumerable : undefined, mixins, originalMethod);
       Object.defineProperty(target, methodName, newDefinition);
     }
-
     function createDefinition(target, methodName, enumerable, mixins, originalMethod) {
       var _ref;
-
       var wrappedFunc = wrapFunction(originalMethod, mixins);
       return _ref = {}, _ref[mobxPatchedDefinition] = true, _ref.get = function get() {
         return wrappedFunc;
@@ -201,247 +136,211 @@
       }, _ref.configurable = true, _ref.enumerable = enumerable, _ref;
     }
 
-    var mobxAdminProperty = mobx.$mobx || "$mobx"; // BC
-
-    var mobxObserverProperty = /*#__PURE__*/newSymbol("isMobXReactObserver");
-    var mobxIsUnmounted = /*#__PURE__*/newSymbol("isUnmounted");
-    var skipRenderKey = /*#__PURE__*/newSymbol("skipRender");
-    var isForcingUpdateKey = /*#__PURE__*/newSymbol("isForcingUpdate");
+    var administrationSymbol = /*#__PURE__*/Symbol("ObserverAdministration");
+    var isMobXReactObserverSymbol = /*#__PURE__*/Symbol("isMobXReactObserver");
+    var observablePropDescriptors;
+    {
+      observablePropDescriptors = {
+        props: /*#__PURE__*/createObservablePropDescriptor("props"),
+        state: /*#__PURE__*/createObservablePropDescriptor("state"),
+        context: /*#__PURE__*/createObservablePropDescriptor("context")
+      };
+    }
+    function getAdministration(component) {
+      var _component$administra;
+      // We create administration lazily, because we can't patch constructor
+      // and the exact moment of initialization partially depends on React internals.
+      // At the time of writing this, the first thing invoked is one of the observable getter/setter (state/props/context).
+      return (_component$administra = component[administrationSymbol]) != null ? _component$administra : component[administrationSymbol] = {
+        reaction: null,
+        mounted: false,
+        forceUpdate: null,
+        name: getDisplayName(component.constructor),
+        state: undefined,
+        props: undefined,
+        context: undefined
+      };
+    }
     function makeClassComponentObserver(componentClass) {
-      var target = componentClass.prototype;
-
-      if (componentClass[mobxObserverProperty]) {
-        var displayName = getDisplayName(target);
-        console.warn("The provided component class (" + displayName + ")\n                has already been declared as an observer component.");
+      var prototype = componentClass.prototype;
+      if (componentClass[isMobXReactObserverSymbol]) {
+        var displayName = getDisplayName(componentClass);
+        throw new Error("The provided component class (" + displayName + ") has already been declared as an observer component.");
       } else {
-        componentClass[mobxObserverProperty] = true;
+        componentClass[isMobXReactObserverSymbol] = true;
       }
-
-      if (target.componentWillReact) {
+      if (prototype.componentWillReact) {
         throw new Error("The componentWillReact life-cycle event is no longer supported");
       }
-
       if (componentClass["__proto__"] !== React.PureComponent) {
-        if (!target.shouldComponentUpdate) {
-          target.shouldComponentUpdate = observerSCU;
-        } else if (target.shouldComponentUpdate !== observerSCU) {
+        if (!prototype.shouldComponentUpdate) {
+          prototype.shouldComponentUpdate = observerSCU;
+        } else if (prototype.shouldComponentUpdate !== observerSCU) {
           // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
           throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.");
         }
-      } // this.props and this.state are made observable, just to make sure @computed fields that
-      // are defined inside the component, and which rely on state or props, re-compute if state or props change
-      // (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
-      // However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
-
-
-      makeObservableProp(target, "props");
-      makeObservableProp(target, "state");
-
-      if (componentClass.contextType) {
-        makeObservableProp(target, "context");
       }
-
-      var originalRender = target.render;
-
+      {
+        Object.defineProperties(prototype, observablePropDescriptors);
+      }
+      var originalRender = prototype.render;
       if (typeof originalRender !== "function") {
-        var _displayName = getDisplayName(target);
-
+        var _displayName = getDisplayName(componentClass);
         throw new Error("[mobx-react] class component (" + _displayName + ") is missing `render` method." + "\n`observer` requires `render` being a function defined on prototype." + "\n`render = () => {}` or `render = function() {}` is not supported.");
       }
-
-      target.render = function () {
-        this.render = mobxReactLite.isUsingStaticRendering() ? originalRender : createReactiveRender.call(this, originalRender);
+      prototype.render = function () {
+        Object.defineProperty(this, "render", {
+          // There is no safe way to replace render, therefore it's forbidden.
+          configurable: false,
+          writable: false,
+          value: mobxReactLite.isUsingStaticRendering() ? originalRender : createReactiveRender.call(this, originalRender)
+        });
         return this.render();
       };
-
-      patch(target, "componentDidMount", function () {
-        this[mobxIsUnmounted] = false;
-
-        if (!this.render[mobxAdminProperty]) {
-          // Reaction is re-created automatically during render, but a component can re-mount and skip render #3395.
-          // To re-create the reaction and re-subscribe to relevant observables we have to force an update.
-          React.Component.prototype.forceUpdate.call(this);
+      var originalComponentDidMount = prototype.componentDidMount;
+      prototype.componentDidMount = function () {
+        var _this = this;
+        if ( this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
+          var _displayName2 = getDisplayName(componentClass);
+          throw new Error("[mobx-react] `observer(" + _displayName2 + ").componentDidMount` must be defined on prototype." + "\n`componentDidMount = () => {}` or `componentDidMount = function() {}` is not supported.");
         }
-      });
-      patch(target, "componentWillUnmount", function () {
+        // `componentDidMount` may not be called at all. React can abandon the instance after `render`.
+        // That's why we use finalization registry to dispose reaction created during render.
+        // Happens with `<Suspend>` see #3492
+        //
+        // `componentDidMount` can be called immediately after `componentWillUnmount` without calling `render` in between.
+        // Happens with `<StrictMode>`see #3395.
+        //
+        // If `componentDidMount` is called, it's guaranteed to run synchronously with render (similary to `useLayoutEffect`).
+        // Therefore we don't have to worry about external (observable) state being updated before mount (no state version checking).
+        //
+        // Things may change: "In the future, React will provide a feature that lets components preserve state between unmounts"
+        var admin = getAdministration(this);
+        admin.mounted = true;
+        // Component instance committed, prevent reaction disposal.
+        mobxReactLite._observerFinalizationRegistry.unregister(admin);
+        // We don't set forceUpdate before mount because it requires a reference to `this`,
+        // therefore `this` could NOT be garbage collected before mount,
+        // preventing reaction disposal by FinalizationRegistry and leading to memory leak.
+        // As an alternative we could have `admin.instanceRef = new WeakRef(this)`, but lets avoid it if possible.
+        admin.forceUpdate = function () {
+          return _this.forceUpdate();
+        };
+        if (!admin.reaction) {
+          // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
+          // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
+          // `componentDidMount` runs synchronously after render, but our registry are deferred (can't run in between).
+          // In any case we lost subscriptions to observables, so we have to create new reaction and re-render to resubscribe.
+          // The reaction will be created lazily by following render.
+          admin.forceUpdate();
+        }
+        return originalComponentDidMount == null ? void 0 : originalComponentDidMount.apply(this, arguments);
+      };
+      // TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
+      patch(prototype, "componentWillUnmount", function () {
+        var _admin$reaction;
         if (mobxReactLite.isUsingStaticRendering()) {
           return;
         }
-
-        var reaction = this.render[mobxAdminProperty];
-
-        if (reaction) {
-          reaction.dispose(); // Forces reaction to be re-created on next render
-
-          this.render[mobxAdminProperty] = null;
-        } else {
-          // Render may have been hot-swapped and/or overridden by a subclass.
-          var _displayName2 = getDisplayName(this);
-
-          console.warn("The reactive render of an observer class component (" + _displayName2 + ")\n                was overridden after MobX attached. This may result in a memory leak if the\n                overridden reactive render was not properly disposed.");
-        }
-
-        this[mobxIsUnmounted] = true;
+        var admin = getAdministration(this);
+        (_admin$reaction = admin.reaction) == null ? void 0 : _admin$reaction.dispose();
+        admin.reaction = null;
+        admin.forceUpdate = null;
+        admin.mounted = false;
       });
       return componentClass;
-    } // Generates a friendly name for debugging
-
-    function getDisplayName(comp) {
-      return comp.displayName || comp.name || comp.constructor && (comp.constructor.displayName || comp.constructor.name) || "<component>";
     }
-
+    // Generates a friendly name for debugging
+    function getDisplayName(componentClass) {
+      return componentClass.displayName || componentClass.name || "<component>";
+    }
     function createReactiveRender(originalRender) {
-      var _this = this;
-
-      /**
-       * If props are shallowly modified, react will render anyway,
-       * so atom.reportChanged() should not result in yet another re-render
-       */
-      setHiddenProp(this, skipRenderKey, false);
-      /**
-       * forceUpdate will re-assign this.props. We don't want that to cause a loop,
-       * so detect these changes
-       */
-
-      setHiddenProp(this, isForcingUpdateKey, false);
-      var initialName = getDisplayName(this);
       var boundOriginalRender = originalRender.bind(this);
-      var isRenderingPending = false;
-
-      var createReaction = function createReaction() {
-        var reaction = new mobx.Reaction(initialName + ".render()", function () {
-          if (!isRenderingPending) {
-            // N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.test.tsx)
-            // This unidiomatic React usage but React will correctly warn about this so we continue as usual
-            // See #85 / Pull #44
-            isRenderingPending = true;
-
-            if (_this[mobxIsUnmounted] !== true) {
-              var hasError = true;
-
-              try {
-                setHiddenProp(_this, isForcingUpdateKey, true);
-
-                if (!_this[skipRenderKey]) {
-                  React.Component.prototype.forceUpdate.call(_this);
-                }
-
-                hasError = false;
-              } finally {
-                setHiddenProp(_this, isForcingUpdateKey, false);
-
-                if (hasError) {
-                  reaction.dispose(); // Forces reaction to be re-created on next render
-
-                  _this.render[mobxAdminProperty] = null;
-                }
-              }
-            }
-          }
-        });
-        reaction["reactComponent"] = _this;
-        return reaction;
-      };
-
+      var admin = getAdministration(this);
       function reactiveRender() {
-        var _reactiveRender$mobxA;
-
-        isRenderingPending = false; // Create reaction lazily to support re-mounting #3395
-
-        var reaction = (_reactiveRender$mobxA = reactiveRender[mobxAdminProperty]) != null ? _reactiveRender$mobxA : reactiveRender[mobxAdminProperty] = createReaction();
-        var exception = undefined;
-        var rendering = undefined;
-        reaction.track(function () {
+        if (!admin.reaction) {
+          // Create reaction lazily to support re-mounting #3395
+          admin.reaction = createReaction(admin);
+          if (!admin.mounted) {
+            // React can abandon this instance and never call `componentDidMount`/`componentWillUnmount`,
+            // we have to make sure reaction will be disposed.
+            mobxReactLite._observerFinalizationRegistry.register(this, admin, this);
+          }
+        }
+        var error = undefined;
+        var renderResult = undefined;
+        admin.reaction.track(function () {
           try {
             // TODO@major
             // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
-            rendering = mobx._allowStateChanges(false, boundOriginalRender);
+            renderResult = mobx._allowStateChanges(false, boundOriginalRender);
           } catch (e) {
-            exception = e;
+            error = e;
           }
         });
-
-        if (exception) {
-          throw exception;
+        if (error) {
+          throw error;
         }
-
-        return rendering;
+        return renderResult;
       }
-
       return reactiveRender;
     }
-
+    function createReaction(admin) {
+      return new mobx.Reaction(admin.name + ".render()", function () {
+        if (!admin.mounted) {
+          // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.
+          // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
+          // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+          return;
+        }
+        try {
+          admin.forceUpdate == null ? void 0 : admin.forceUpdate();
+        } catch (error) {
+          var _admin$reaction2;
+          (_admin$reaction2 = admin.reaction) == null ? void 0 : _admin$reaction2.dispose();
+          admin.reaction = null;
+        }
+      });
+    }
     function observerSCU(nextProps, nextState) {
       if (mobxReactLite.isUsingStaticRendering()) {
         console.warn("[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side.");
-      } // update on any state changes (as is the default)
-
-
+      }
+      // update on any state changes (as is the default)
       if (this.state !== nextState) {
         return true;
-      } // update if props are shallowly not equal, inspired by PureRenderMixin
+      }
+      // update if props are shallowly not equal, inspired by PureRenderMixin
       // we could return just 'false' here, and avoid the `skipRender` checks etc
       // however, it is nicer if lifecycle events are triggered like usually,
       // so we return true here if props are shallowly modified.
-
-
       return !shallowEqual(this.props, nextProps);
     }
-
-    function makeObservableProp(target, propName) {
-      var valueHolderKey = newSymbol("reactProp_" + propName + "_valueHolder");
-      var atomHolderKey = newSymbol("reactProp_" + propName + "_atomHolder");
-
-      function getAtom() {
-        if (!this[atomHolderKey]) {
-          setHiddenProp(this, atomHolderKey, mobx.createAtom("reactive " + propName));
-        }
-
-        return this[atomHolderKey];
-      }
-
-      Object.defineProperty(target, propName, {
+    function createObservablePropDescriptor(key) {
+      return {
         configurable: true,
         enumerable: true,
         get: function get() {
-          var prevReadState = false; // Why this check? BC?
-          // @ts-expect-error
-
-          if (mobx._allowStateReadsStart && mobx._allowStateReadsEnd) {
-            prevReadState = mobx._allowStateReadsStart(true);
+          var admin = getAdministration(this);
+          var derivation = mobx._getGlobalState().trackingDerivation;
+          if (derivation && derivation !== admin.reaction) {
+            throw new Error("[mobx-react] Cannot read \"" + admin.name + "." + key + "\" in a reactive context, as it isn't observable.\n                    Please use component lifecycle method to copy the value into a local observable first.\n                    See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations");
           }
-
-          getAtom.call(this).reportObserved(); // Why this check? BC?
-          // @ts-expect-error
-
-          if (mobx._allowStateReadsStart && mobx._allowStateReadsEnd) {
-            mobx._allowStateReadsEnd(prevReadState);
-          }
-
-          return this[valueHolderKey];
+          return admin[key];
         },
-        set: function set(v) {
-          if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
-            setHiddenProp(this, valueHolderKey, v);
-            setHiddenProp(this, skipRenderKey, true);
-            getAtom.call(this).reportChanged();
-            setHiddenProp(this, skipRenderKey, false);
-          } else {
-            setHiddenProp(this, valueHolderKey, v);
-          }
+        set: function set(value) {
+          getAdministration(this)[key] = value;
         }
-      });
+      };
     }
 
     /**
      * Observer function / decorator
      */
-
     function observer(component) {
       if (component["isMobxInjector"] === true) {
         console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`");
       }
-
       if (Object.prototype.isPrototypeOf.call(React.Component, component) || Object.prototype.isPrototypeOf.call(React.PureComponent, component)) {
         // Class component
         return makeClassComponentObserver(component);
@@ -452,35 +351,29 @@
     }
 
     function _extends() {
-      _extends = Object.assign || function (target) {
+      _extends = Object.assign ? Object.assign.bind() : function (target) {
         for (var i = 1; i < arguments.length; i++) {
           var source = arguments[i];
-
           for (var key in source) {
             if (Object.prototype.hasOwnProperty.call(source, key)) {
               target[key] = source[key];
             }
           }
         }
-
         return target;
       };
-
       return _extends.apply(this, arguments);
     }
-
     function _objectWithoutPropertiesLoose(source, excluded) {
       if (source == null) return {};
       var target = {};
       var sourceKeys = Object.keys(source);
       var key, i;
-
       for (i = 0; i < sourceKeys.length; i++) {
         key = sourceKeys[i];
         if (excluded.indexOf(key) >= 0) continue;
         target[key] = source[key];
       }
-
       return target;
     }
 
@@ -488,21 +381,16 @@
     var MobXProviderContext = /*#__PURE__*/React__default.createContext({});
     function Provider(props) {
       var children = props.children,
-          stores = _objectWithoutPropertiesLoose(props, _excluded);
-
+        stores = _objectWithoutPropertiesLoose(props, _excluded);
       var parentValue = React__default.useContext(MobXProviderContext);
       var mutableProviderRef = React__default.useRef(_extends({}, parentValue, stores));
       var value = mutableProviderRef.current;
-
       {
         var newValue = _extends({}, value, stores); // spread in previous state for the context based stores
-
-
         if (!shallowEqual(value, newValue)) {
           throw new Error("MobX Provider: The set of provided stores has changed. See: https://github.com/mobxjs/mobx-react#the-set-of-provided-stores-has-changed-error.");
         }
       }
-
       return React__default.createElement(MobXProviderContext.Provider, {
         value: value
       }, children);
@@ -512,38 +400,31 @@
     /**
      * Store Injection
      */
-
     function createStoreInjector(grabStoresFn, component, injectNames, makeReactive) {
       // Support forward refs
       var Injector = React__default.forwardRef(function (props, ref) {
         var newProps = _extends({}, props);
-
         var context = React__default.useContext(MobXProviderContext);
         Object.assign(newProps, grabStoresFn(context || {}, newProps) || {});
-
         if (ref) {
           newProps.ref = ref;
         }
-
         return React__default.createElement(component, newProps);
       });
       if (makeReactive) Injector = observer(Injector);
       Injector["isMobxInjector"] = true; // assigned late to suppress observer warning
       // Static fields from component should be visible on the generated Injector
-
       copyStaticProperties(component, Injector);
       Injector["wrappedComponent"] = component;
       Injector.displayName = getInjectName(component, injectNames);
       return Injector;
     }
-
     function getInjectName(component, injectNames) {
       var displayName;
       var componentName = component.displayName || component.name || component.constructor && component.constructor.name || "Component";
       if (injectNames) displayName = "inject-with-" + injectNames + "(" + componentName + ")";else displayName = "inject(" + componentName + ")";
       return displayName;
     }
-
     function grabStoresByName(storeNames) {
       return function (baseStores, nextProps) {
         storeNames.forEach(function (storeName) {
@@ -561,13 +442,10 @@
      * or a function that manually maps the available stores from the context to props:
      * storesToProps(mobxStores, props, context) => newProps
      */
-
-
     function inject() {
       for (var _len = arguments.length, storeNames = new Array(_len), _key = 0; _key < _len; _key++) {
         storeNames[_key] = arguments[_key];
       }
-
       if (typeof arguments[0] === "function") {
         var grabStoresFn = arguments[0];
         return function (componentClass) {
@@ -580,14 +458,14 @@
       }
     }
 
-    var protoStoreKey = /*#__PURE__*/newSymbol("disposeOnUnmountProto");
-    var instStoreKey = /*#__PURE__*/newSymbol("disposeOnUnmountInst");
-
+    var reactMajorVersion = /*#__PURE__*/Number.parseInt( /*#__PURE__*/React__default.version.split(".")[0]);
+    var warnedAboutDisposeOnUnmountDeprecated = false;
+    var protoStoreKey = /*#__PURE__*/Symbol("disposeOnUnmountProto");
+    var instStoreKey = /*#__PURE__*/Symbol("disposeOnUnmountInst");
     function runDisposersOnWillUnmount() {
       var _this = this;
       [].concat(this[protoStoreKey] || [], this[instStoreKey] || []).forEach(function (propKeyOrFunction) {
         var prop = typeof propKeyOrFunction === "string" ? _this[propKeyOrFunction] : propKeyOrFunction;
-
         if (prop !== undefined && prop !== null) {
           if (Array.isArray(prop)) prop.map(function (f) {
             return f();
@@ -595,62 +473,67 @@
         }
       });
     }
-
+    /**
+     * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
+     */
     function disposeOnUnmount(target, propertyKeyOrFunction) {
       if (Array.isArray(propertyKeyOrFunction)) {
         return propertyKeyOrFunction.map(function (fn) {
           return disposeOnUnmount(target, fn);
         });
       }
-
+      if (!warnedAboutDisposeOnUnmountDeprecated) {
+        if (reactMajorVersion >= 18) {
+          console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it.");
+        } else {
+          console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher.");
+        }
+        warnedAboutDisposeOnUnmountDeprecated = true;
+      }
       var c = Object.getPrototypeOf(target).constructor;
-      var c2 = Object.getPrototypeOf(target.constructor); // Special case for react-hot-loader
-
+      var c2 = Object.getPrototypeOf(target.constructor);
+      // Special case for react-hot-loader
       var c3 = Object.getPrototypeOf(Object.getPrototypeOf(target));
-
       if (!(c === React__default.Component || c === React__default.PureComponent || c2 === React__default.Component || c2 === React__default.PureComponent || c3 === React__default.Component || c3 === React__default.PureComponent)) {
         throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");
       }
-
       if (typeof propertyKeyOrFunction !== "string" && typeof propertyKeyOrFunction !== "function" && !Array.isArray(propertyKeyOrFunction)) {
         throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");
-      } // decorator's target is the prototype, so it doesn't have any instance properties like props
-
-
-      var isDecorator = typeof propertyKeyOrFunction === "string"; // add property key / function we want run (disposed) to the store
-
+      }
+      // decorator's target is the prototype, so it doesn't have any instance properties like props
+      var isDecorator = typeof propertyKeyOrFunction === "string";
+      // add property key / function we want run (disposed) to the store
       var componentWasAlreadyModified = !!target[protoStoreKey] || !!target[instStoreKey];
-      var store = isDecorator ? // decorators are added to the prototype store
-      target[protoStoreKey] || (target[protoStoreKey] = []) : // functions are added to the instance store
+      var store = isDecorator ?
+      // decorators are added to the prototype store
+      target[protoStoreKey] || (target[protoStoreKey] = []) :
+      // functions are added to the instance store
       target[instStoreKey] || (target[instStoreKey] = []);
-      store.push(propertyKeyOrFunction); // tweak the component class componentWillUnmount if not done already
-
+      store.push(propertyKeyOrFunction);
+      // tweak the component class componentWillUnmount if not done already
       if (!componentWasAlreadyModified) {
         patch(target, "componentWillUnmount", runDisposersOnWillUnmount);
-      } // return the disposer as is if invoked as a non decorator
-
-
+      }
+      // return the disposer as is if invoked as a non decorator
       if (typeof propertyKeyOrFunction !== "string") {
         return propertyKeyOrFunction;
       }
     }
 
+    // Copied from React.PropTypes
     function createChainableTypeChecker(validator) {
       function checkType(isRequired, props, propName, componentName, location, propFullName) {
         for (var _len = arguments.length, rest = new Array(_len > 6 ? _len - 6 : 0), _key = 6; _key < _len; _key++) {
           rest[_key - 6] = arguments[_key];
         }
-
         return mobx.untracked(function () {
           componentName = componentName || "<<anonymous>>";
           propFullName = propFullName || propName;
-
           if (props[propName] == null) {
             if (isRequired) {
               var actual = props[propName] === null ? "null" : "undefined";
               return new Error("The " + location + " `" + propFullName + "` is marked as required " + "in `" + componentName + "`, but its value is `" + actual + "`.");
             }
-
             return null;
           } else {
             // @ts-ignore rest arg is necessary for some React internals - fails tests otherwise
@@ -658,60 +541,48 @@
           }
         });
       }
-
-      var chainedCheckType = checkType.bind(null, false); // Add isRequired to satisfy Requirable
-
+      var chainedCheckType = checkType.bind(null, false);
+      // Add isRequired to satisfy Requirable
       chainedCheckType.isRequired = checkType.bind(null, true);
       return chainedCheckType;
-    } // Copied from React.PropTypes
-
-
+    }
+    // Copied from React.PropTypes
     function isSymbol(propType, propValue) {
       // Native Symbol.
       if (propType === "symbol") {
         return true;
-      } // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
-
-
+      }
+      // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
       if (propValue["@@toStringTag"] === "Symbol") {
         return true;
-      } // Fallback for non-spec compliant Symbols which are polyfilled.
-
-
+      }
+      // Fallback for non-spec compliant Symbols which are polyfilled.
       if (typeof Symbol === "function" && propValue instanceof Symbol) {
         return true;
       }
-
       return false;
-    } // Copied from React.PropTypes
-
-
+    }
+    // Copied from React.PropTypes
     function getPropType(propValue) {
       var propType = typeof propValue;
-
       if (Array.isArray(propValue)) {
         return "array";
       }
-
       if (propValue instanceof RegExp) {
         // Old webkits (at least until Android 4.0) return 'function' rather than
         // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
         // passes PropTypes.object.
         return "object";
       }
-
       if (isSymbol(propType, propValue)) {
         return "symbol";
       }
-
       return propType;
-    } // This handles more types than `getPropType`. Only used for error messages.
+    }
+    // This handles more types than `getPropType`. Only used for error messages.
     // Copied from React.PropTypes
-
-
     function getPreciseType(propValue) {
       var propType = getPropType(propValue);
-
       if (propType === "object") {
         if (propValue instanceof Date) {
           return "date";
@@ -719,55 +590,43 @@
           return "regexp";
         }
       }
-
       return propType;
     }
-
     function createObservableTypeCheckerCreator(allowNativeType, mobxType) {
       return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
         return mobx.untracked(function () {
           if (allowNativeType) {
             if (getPropType(props[propName]) === mobxType.toLowerCase()) return null;
           }
-
           var mobxChecker;
-
           switch (mobxType) {
             case "Array":
               mobxChecker = mobx.isObservableArray;
               break;
-
             case "Object":
               mobxChecker = mobx.isObservableObject;
               break;
-
             case "Map":
               mobxChecker = mobx.isObservableMap;
               break;
-
             default:
               throw new Error("Unexpected mobxType: " + mobxType);
           }
-
           var propValue = props[propName];
-
           if (!mobxChecker(propValue)) {
             var preciseType = getPreciseType(propValue);
             var nativeTypeExpectationMessage = allowNativeType ? " or javascript `" + mobxType.toLowerCase() + "`" : "";
             return new Error("Invalid prop `" + propFullName + "` of type `" + preciseType + "` supplied to" + " `" + componentName + "`, expected `mobx.Observable" + mobxType + "`" + nativeTypeExpectationMessage + ".");
           }
-
           return null;
         });
       });
     }
-
     function createObservableArrayOfTypeChecker(allowNativeType, typeChecker) {
       return createChainableTypeChecker(function (props, propName, componentName, location, propFullName) {
         for (var _len2 = arguments.length, rest = new Array(_len2 > 5 ? _len2 - 5 : 0), _key2 = 5; _key2 < _len2; _key2++) {
           rest[_key2 - 5] = arguments[_key2];
         }
-
         return mobx.untracked(function () {
           if (typeof typeChecker !== "function") {
             return new Error("Property `" + propFullName + "` of component `" + componentName + "` has " + "invalid PropType notation.");
@@ -775,18 +634,15 @@
             var error = createObservableTypeCheckerCreator(allowNativeType, "Array")(props, propName, componentName, location, propFullName);
             if (error instanceof Error) return error;
             var propValue = props[propName];
-
             for (var i = 0; i < propValue.length; i++) {
               error = typeChecker.apply(void 0, [propValue, i, componentName, location, propFullName + "[" + i + "]"].concat(rest));
               if (error instanceof Error) return error;
             }
-
             return null;
           }
         });
       });
     }
-
     var observableArray = /*#__PURE__*/createObservableTypeCheckerCreator(false, "Array");
     var observableArrayOf = /*#__PURE__*/createObservableArrayOfTypeChecker.bind(null, false);
     var observableMap = /*#__PURE__*/createObservableTypeCheckerCreator(false, "Map");
@@ -804,8 +660,12 @@
       objectOrObservableObject: objectOrObservableObject
     };
 
-    if (!React.Component) throw new Error("mobx-react requires React to be available");
-    if (!mobx.observable) throw new Error("mobx-react requires mobx to be available");
+    if (!React.Component) {
+      throw new Error("mobx-react requires React to be available");
+    }
+    if (!mobx.observable) {
+      throw new Error("mobx-react requires mobx to be available");
+    }
 
     Object.defineProperty(exports, 'Observer', {
         enumerable: true,