mobx-react - npm Package Compare versions

Comparing version 7.5.0 to 7.5.1

CHANGELOG.md

 # mobx-react
 
+## 7.5.1
+
+### Patch Changes
+
+-   [`bbcb12dc`](https://github.com/mobxjs/mobx/commit/bbcb12dc754524552181b177a52ffdbe80ecb953) [#3434](https://github.com/mobxjs/mobx/pull/3434) Thanks [@urugator](https://github.com/urugator)! - Support re-mounting of class components. Fixes #3395: observer not working with React@18 <StrictMode>.
+
 ## 7.5.0
@@ -4,0 +10,0 @@

dist/mobxreact.cjs.development.js

@@ -207,3 +207,4 @@ 'use strict';
 
-var mobxAdminProperty = mobx.$mobx || "$mobx";
+var mobxAdminProperty = mobx.$mobx || "$mobx"; // BC
+
 var mobxObserverProperty = /*#__PURE__*/newSymbol("isMobXReactObserver");
@@ -223,7 +224,13 @@ var mobxIsUnmounted = /*#__PURE__*/newSymbol("isUnmounted");
 
-  if (target.componentWillReact) throw new Error("The componentWillReact life-cycle event is no longer supported");
+  if (target.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) // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
+    if (!target.shouldComponentUpdate) {
+      target.shouldComponentUpdate = observerSCU;
+    } else if (target.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
@@ -242,5 +249,5 @@ // are defined inside the component, and which rely on state or props, re-compute if state or props change
 
-  var baseRender = target.render;
+  var originalRender = target.render;
 
-  if (typeof baseRender !== "function") {
+  if (typeof originalRender !== "function") {
     var _displayName = getDisplayName(target);
@@ -252,13 +259,30 @@
   target.render = function () {
-    return makeComponentReactive.call(this, baseRender);
+    if (!mobxReactLite.isUsingStaticRendering()) {
+      this.render = 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);
+    }
+  });
   patch(target, "componentWillUnmount", function () {
-    var _this$render$mobxAdmi;
+    if (mobxReactLite.isUsingStaticRendering()) {
+      return;
+    }
 
-    if (mobxReactLite.isUsingStaticRendering() === true) return;
-    (_this$render$mobxAdmi = this.render[mobxAdminProperty]) == null ? void 0 : _this$render$mobxAdmi.dispose();
-    this[mobxIsUnmounted] = true;
+    var reaction = this.render[mobxAdminProperty];
 
-    if (!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 overriden by a subclass.
@@ -269,2 +293,4 @@ var _displayName2 = getDisplayName(this);
     }
+
+    this[mobxIsUnmounted] = true;
   });
@@ -278,6 +304,5 @@ return componentClass;
 
-function makeComponentReactive(render) {
+function createReactiveRender(originalRender) {
   var _this = this;
 
-  if (mobxReactLite.isUsingStaticRendering() === true) return render.call(this);
   /**
@@ -287,3 +312,2 @@ * If props are shallowly modified, react will render anyway,
    */
-
   setHiddenProp(this, skipRenderKey, false);
@@ -297,31 +321,46 @@ /**
   var initialName = getDisplayName(this);
-  var baseRender = render.bind(this);
+  var boundOriginalRender = originalRender.bind(this);
   var isRenderingPending = false;
-  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.js)
-      // 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;
+  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;
 
-        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();
+        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;
-  reactiveRender[mobxAdminProperty] = reaction;
-  this.render = reactiveRender;
+    });
+    reaction["reactComponent"] = _this;
+    return reaction;
+  };
 
   function reactiveRender() {
-    isRenderingPending = false;
+    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;
@@ -331,3 +370,5 @@ var rendering = undefined;
       try {
-        rendering = mobx._allowStateChanges(false, baseRender);
+        // TODO@major
+        // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
+        rendering = mobx._allowStateChanges(false, boundOriginalRender);
       } catch (e) {
@@ -345,3 +386,3 @@ exception = e;
 
-  return reactiveRender.call(this);
+  return reactiveRender;
 }
@@ -348,0 +389,0 @@

dist/mobxreact.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("mobx"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("mobx-react-lite"),a=0,i={};function s(e){return i[e]||(i[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+a+")";return a++,r}(e)),i[e]}function c(e,r){if(u(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!u(e[t[o]],r[t[o]]))return!1;return!0}function u(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var l={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function p(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var f=s("patchMixins"),b=s("patchedDefinition");function d(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),a=2;a<n;a++)o[a-2]=arguments[a];r.locks++;try{var i;return null!=e&&(i=e.apply(this,o)),i}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function y(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];d.call.apply(d,[this,e,r].concat(n))}}function v(e,r,t){var n=function(e,r){var t=e[f]=e[f]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[b]){var a=function e(r,t,n,o,a){var i,s=y(a,o);return(i={})[b]=!0,i.get=function(){return s},i.set=function(a){if(this===r)s=y(a,o);else{var i=e(this,t,n,o,a);Object.defineProperty(this,t,i)}},i.configurable=!0,i.enumerable=n,i}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,a)}}var m=r.$mobx||"$mobx",h=s("isMobXReactObserver"),O=s("isUnmounted"),g=s("skipRender"),w=s("isForcingUpdate");function j(e){var r=e.prototype;if(e[h]){var n=x(r);console.warn("The provided component class ("+n+")\n                has already been declared as an observer component.")}else e[h]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==S)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=S;C(r,"props"),C(r,"state"),e.contextType&&C(r,"context");var a=r.render;if("function"!=typeof a){var i=x(r);throw new Error("[mobx-react] class component ("+i+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return P.call(this,a)},v(r,"componentWillUnmount",(function(){var e;if(!0!==o.isUsingStaticRendering()&&(null==(e=this.render[m])||e.dispose(),this[O]=!0,!this.render[m])){var r=x(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}})),e}function x(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function P(e){var n=this;if(!0===o.isUsingStaticRendering())return e.call(this);p(this,g,!1),p(this,w,!1);var a=x(this),i=e.bind(this),s=!1,c=new r.Reaction(a+".render()",(function(){if(!s&&(s=!0,!0!==n[O])){var e=!0;try{p(n,w,!0),n[g]||t.Component.prototype.forceUpdate.call(n),e=!1}finally{p(n,w,!1),e&&c.dispose()}}}));function u(){s=!1;var e=void 0,t=void 0;if(c.track((function(){try{t=r._allowStateChanges(!1,i)}catch(r){e=r}})),e)throw e;return t}return c.reactComponent=this,u[m]=c,this.render=u,u.call(this)}function S(e,r){return o.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."),this.state!==r||!c(this.props,e)}function C(e,t){var n=s("reactProp_"+t+"_valueHolder"),o=s("reactProp_"+t+"_atomHolder");function a(){return this[o]||p(this,o,r.createAtom("reactive "+t)),this[o]}Object.defineProperty(e,t,{configurable:!0,enumerable:!0,get:function(){var e=!1;return r._allowStateReadsStart&&r._allowStateReadsEnd&&(e=r._allowStateReadsStart(!0)),a.call(this).reportObserved(),r._allowStateReadsStart&&r._allowStateReadsEnd&&r._allowStateReadsEnd(e),this[n]},set:function(e){this[w]||c(this[n],e)?p(this,n,e):(p(this,n,e),p(this,g,!0),a.call(this).reportChanged(),p(this,g,!1))}})}function R(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?j(e):o.observer(e)}function E(){return(E=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var A=["children"],k=n.createContext({});function U(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}(e,A),o=n.useContext(k),a=n.useRef(E({},o,t));return n.createElement(k.Provider,{value:a.current},r)}function _(e,r,t,o){var a,i,s,c=n.forwardRef((function(t,o){var a=E({},t),i=n.useContext(k);return Object.assign(a,e(i||{},a)||{}),o&&(a.ref=o),n.createElement(r,a)}));return o&&(c=R(c)),c.isMobxInjector=!0,a=r,i=c,s=Object.getOwnPropertyNames(Object.getPrototypeOf(a)),Object.getOwnPropertyNames(a).forEach((function(e){l[e]||-1!==s.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(a,e))})),c.wrappedComponent=r,c.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),c}function M(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}U.displayName="MobXProvider";var T=s("disposeOnUnmountProto"),q=s("disposeOnUnmountInst");function N(){var e=this;[].concat(this[T]||[],this[q]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function D(e){function t(t,n,o,a,i,s){for(var c=arguments.length,u=new Array(c>6?c-6:0),l=6;l<c;l++)u[l-6]=arguments[l];return r.untracked((function(){return a=a||"<<anonymous>>",s=s||o,null==n[o]?t?new Error("The "+i+" `"+s+"` is marked as required in `"+a+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,a,i,s].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function I(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function L(e,t){return D((function(n,o,a,i,s){return r.untracked((function(){if(e&&I(n[o])===t.toLowerCase())return null;var i;switch(t){case"Array":i=r.isObservableArray;break;case"Object":i=r.isObservableObject;break;case"Map":i=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var c=n[o];if(!i(c)){var u=function(e){var r=I(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(c),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+s+"` of type `"+u+"` supplied to `"+a+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function X(e,t){return D((function(n,o,a,i,s){for(var c=arguments.length,u=new Array(c>5?c-5:0),l=5;l<c;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+s+"` of component `"+a+"` has invalid PropType notation.");var r=L(e,"Array")(n,o,a,i,s);if(r instanceof Error)return r;for(var c=n[o],l=0;l<c.length;l++)if((r=t.apply(void 0,[c,l,a,i,s+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var $={observableArray:L(!1,"Array"),observableArrayOf:X.bind(null,!1),observableMap:L(!1,"Map"),observableObject:L(!1,"Object"),arrayOrObservableArray:L(!0,"Array"),arrayOrObservableArrayOf:X.bind(null,!0),objectOrObservableObject:L(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(exports,"Observer",{enumerable:!0,get:function(){return o.Observer}}),Object.defineProperty(exports,"enableStaticRendering",{enumerable:!0,get:function(){return o.enableStaticRendering}}),Object.defineProperty(exports,"isUsingStaticRendering",{enumerable:!0,get:function(){return o.isUsingStaticRendering}}),Object.defineProperty(exports,"observerBatching",{enumerable:!0,get:function(){return o.observerBatching}}),Object.defineProperty(exports,"useAsObservableSource",{enumerable:!0,get:function(){return o.useAsObservableSource}}),Object.defineProperty(exports,"useLocalObservable",{enumerable:!0,get:function(){return o.useLocalObservable}}),Object.defineProperty(exports,"useLocalStore",{enumerable:!0,get:function(){return o.useLocalStore}}),Object.defineProperty(exports,"useObserver",{enumerable:!0,get:function(){return o.useObserver}}),Object.defineProperty(exports,"useStaticRendering",{enumerable:!0,get:function(){return o.useStaticRendering}}),exports.MobXProviderContext=k,exports.PropTypes=$,exports.Provider=U,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));var o=Object.getPrototypeOf(r).constructor,a=Object.getPrototypeOf(r.constructor),i=Object.getPrototypeOf(Object.getPrototypeOf(r));if(o!==n.Component&&o!==n.PureComponent&&a!==n.Component&&a!==n.PureComponent&&i!==n.Component&&i!==n.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var s=!!r[T]||!!r[q];return("string"==typeof t?r[T]||(r[T]=[]):r[q]||(r[q]=[])).push(t),s||v(r,"componentWillUnmount",N),"string"!=typeof t?t:void 0},exports.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return _(n,e,n.name,!0)}}return function(e){return _(M(r),e,r.join("-"),!1)}},exports.observer=R;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("mobx"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("mobx-react-lite"),i=0,a={};function s(e){return a[e]||(a[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+i+")";return i++,r}(e)),a[e]}function c(e,r){if(u(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!u(e[t[o]],r[t[o]]))return!1;return!0}function u(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var l={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function p(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var f=s("patchMixins"),b=s("patchedDefinition");function d(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function y(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];d.call.apply(d,[this,e,r].concat(n))}}function v(e,r,t){var n=function(e,r){var t=e[f]=e[f]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[b]){var i=function e(r,t,n,o,i){var a,s=y(i,o);return(a={})[b]=!0,a.get=function(){return s},a.set=function(i){if(this===r)s=y(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var m=r.$mobx||"$mobx",h=s("isMobXReactObserver"),O=s("isUnmounted"),g=s("skipRender"),w=s("isForcingUpdate");function j(e){var r=e.prototype;if(e[h]){var n=x(r);console.warn("The provided component class ("+n+")\n                has already been declared as an observer component.")}else e[h]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==S)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=S;C(r,"props"),C(r,"state"),e.contextType&&C(r,"context");var i=r.render;if("function"!=typeof i){var a=x(r);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return o.isUsingStaticRendering()||(this.render=P.call(this,i)),this.render()},v(r,"componentDidMount",(function(){this[O]=!1,this.render[m]||t.Component.prototype.forceUpdate.call(this)})),v(r,"componentWillUnmount",(function(){if(!o.isUsingStaticRendering()){var e=this.render[m];if(e)e.dispose(),this.render[m]=null;else{var r=x(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}this[O]=!0}})),e}function x(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function P(e){var n=this;p(this,g,!1),p(this,w,!1);var o=x(this),i=e.bind(this),a=!1;return function e(){var s;a=!1;var c=null!=(s=e[m])?s:e[m]=function(){var e=new r.Reaction(o+".render()",(function(){if(!a&&(a=!0,!0!==n[O])){var r=!0;try{p(n,w,!0),n[g]||t.Component.prototype.forceUpdate.call(n),r=!1}finally{p(n,w,!1),r&&(e.dispose(),n.render[m]=null)}}}));return e.reactComponent=n,e}(),u=void 0,l=void 0;if(c.track((function(){try{l=r._allowStateChanges(!1,i)}catch(e){u=e}})),u)throw u;return l}}function S(e,r){return o.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."),this.state!==r||!c(this.props,e)}function C(e,t){var n=s("reactProp_"+t+"_valueHolder"),o=s("reactProp_"+t+"_atomHolder");function i(){return this[o]||p(this,o,r.createAtom("reactive "+t)),this[o]}Object.defineProperty(e,t,{configurable:!0,enumerable:!0,get:function(){var e=!1;return r._allowStateReadsStart&&r._allowStateReadsEnd&&(e=r._allowStateReadsStart(!0)),i.call(this).reportObserved(),r._allowStateReadsStart&&r._allowStateReadsEnd&&r._allowStateReadsEnd(e),this[n]},set:function(e){this[w]||c(this[n],e)?p(this,n,e):(p(this,n,e),p(this,g,!0),i.call(this).reportChanged(),p(this,g,!1))}})}function R(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?j(e):o.observer(e)}function E(){return(E=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var A=["children"],k=n.createContext({});function U(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,A),o=n.useContext(k),i=n.useRef(E({},o,t));return n.createElement(k.Provider,{value:i.current},r)}function _(e,r,t,o){var i,a,s,c=n.forwardRef((function(t,o){var i=E({},t),a=n.useContext(k);return Object.assign(i,e(a||{},i)||{}),o&&(i.ref=o),n.createElement(r,i)}));return o&&(c=R(c)),c.isMobxInjector=!0,i=r,a=c,s=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){l[e]||-1!==s.indexOf(e)||Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(i,e))})),c.wrappedComponent=r,c.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),c}function M(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}U.displayName="MobXProvider";var T=s("disposeOnUnmountProto"),q=s("disposeOnUnmountInst");function D(){var e=this;[].concat(this[T]||[],this[q]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function N(e){function t(t,n,o,i,a,s){for(var c=arguments.length,u=new Array(c>6?c-6:0),l=6;l<c;l++)u[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",s=s||o,null==n[o]?t?new Error("The "+a+" `"+s+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,s].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function I(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function L(e,t){return N((function(n,o,i,a,s){return r.untracked((function(){if(e&&I(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var c=n[o];if(!a(c)){var u=function(e){var r=I(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(c),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+s+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function X(e,t){return N((function(n,o,i,a,s){for(var c=arguments.length,u=new Array(c>5?c-5:0),l=5;l<c;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+s+"` of component `"+i+"` has invalid PropType notation.");var r=L(e,"Array")(n,o,i,a,s);if(r instanceof Error)return r;for(var c=n[o],l=0;l<c.length;l++)if((r=t.apply(void 0,[c,l,i,a,s+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var $={observableArray:L(!1,"Array"),observableArrayOf:X.bind(null,!1),observableMap:L(!1,"Map"),observableObject:L(!1,"Object"),arrayOrObservableArray:L(!0,"Array"),arrayOrObservableArrayOf:X.bind(null,!0),objectOrObservableObject:L(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(exports,"Observer",{enumerable:!0,get:function(){return o.Observer}}),Object.defineProperty(exports,"enableStaticRendering",{enumerable:!0,get:function(){return o.enableStaticRendering}}),Object.defineProperty(exports,"isUsingStaticRendering",{enumerable:!0,get:function(){return o.isUsingStaticRendering}}),Object.defineProperty(exports,"observerBatching",{enumerable:!0,get:function(){return o.observerBatching}}),Object.defineProperty(exports,"useAsObservableSource",{enumerable:!0,get:function(){return o.useAsObservableSource}}),Object.defineProperty(exports,"useLocalObservable",{enumerable:!0,get:function(){return o.useLocalObservable}}),Object.defineProperty(exports,"useLocalStore",{enumerable:!0,get:function(){return o.useLocalStore}}),Object.defineProperty(exports,"useObserver",{enumerable:!0,get:function(){return o.useObserver}}),Object.defineProperty(exports,"useStaticRendering",{enumerable:!0,get:function(){return o.useStaticRendering}}),exports.MobXProviderContext=k,exports.PropTypes=$,exports.Provider=U,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));var o=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(o!==n.Component&&o!==n.PureComponent&&i!==n.Component&&i!==n.PureComponent&&a!==n.Component&&a!==n.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var s=!!r[T]||!!r[q];return("string"==typeof t?r[T]||(r[T]=[]):r[q]||(r[q]=[])).push(t),s||v(r,"componentWillUnmount",D),"string"!=typeof t?t:void 0},exports.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return _(n,e,n.name,!0)}}return function(e){return _(M(r),e,r.join("-"),!1)}},exports.observer=R;
 //# sourceMappingURL=mobxreact.cjs.production.min.js.map

dist/mobxreact.esm.development.js

@@ -1,2 +0,2 @@
-import { Reaction, _allowStateChanges, _allowStateReadsStart, _allowStateReadsEnd, $mobx, createAtom, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
+import { _allowStateReadsStart, _allowStateReadsEnd, $mobx, _allowStateChanges, createAtom, Reaction, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
 import React__default, { PureComponent, Component } from 'react';
@@ -201,3 +201,4 @@ import { isUsingStaticRendering, observer as observer$1 } from 'mobx-react-lite';
 
-var mobxAdminProperty = $mobx || "$mobx";
+var mobxAdminProperty = $mobx || "$mobx"; // BC
+
 var mobxObserverProperty = /*#__PURE__*/newSymbol("isMobXReactObserver");
@@ -217,7 +218,13 @@ var mobxIsUnmounted = /*#__PURE__*/newSymbol("isUnmounted");
 
-  if (target.componentWillReact) throw new Error("The componentWillReact life-cycle event is no longer supported");
+  if (target.componentWillReact) {
+    throw new Error("The componentWillReact life-cycle event is no longer supported");
+  }
 
   if (componentClass["__proto__"] !== PureComponent) {
-    if (!target.shouldComponentUpdate) target.shouldComponentUpdate = observerSCU;else if (target.shouldComponentUpdate !== observerSCU) // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
+    if (!target.shouldComponentUpdate) {
+      target.shouldComponentUpdate = observerSCU;
+    } else if (target.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
@@ -236,5 +243,5 @@ // are defined inside the component, and which rely on state or props, re-compute if state or props change
 
-  var baseRender = target.render;
+  var originalRender = target.render;
 
-  if (typeof baseRender !== "function") {
+  if (typeof originalRender !== "function") {
     var _displayName = getDisplayName(target);
@@ -246,13 +253,30 @@
   target.render = function () {
-    return makeComponentReactive.call(this, baseRender);
+    if (!isUsingStaticRendering()) {
+      this.render = 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.
+      Component.prototype.forceUpdate.call(this);
+    }
+  });
   patch(target, "componentWillUnmount", function () {
-    var _this$render$mobxAdmi;
+    if (isUsingStaticRendering()) {
+      return;
+    }
 
-    if (isUsingStaticRendering() === true) return;
-    (_this$render$mobxAdmi = this.render[mobxAdminProperty]) == null ? void 0 : _this$render$mobxAdmi.dispose();
-    this[mobxIsUnmounted] = true;
+    var reaction = this.render[mobxAdminProperty];
 
-    if (!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 overriden by a subclass.
@@ -263,2 +287,4 @@ var _displayName2 = getDisplayName(this);
     }
+
+    this[mobxIsUnmounted] = true;
   });
@@ -272,6 +298,5 @@ return componentClass;
 
-function makeComponentReactive(render) {
+function createReactiveRender(originalRender) {
   var _this = this;
 
-  if (isUsingStaticRendering() === true) return render.call(this);
   /**
@@ -281,3 +306,2 @@ * If props are shallowly modified, react will render anyway,
    */
-
   setHiddenProp(this, skipRenderKey, false);
@@ -291,31 +315,46 @@ /**
   var initialName = getDisplayName(this);
-  var baseRender = render.bind(this);
+  var boundOriginalRender = originalRender.bind(this);
   var isRenderingPending = false;
-  var reaction = new 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.js)
-      // 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;
+  var createReaction = function createReaction() {
+    var reaction = new 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;
 
-        try {
-          setHiddenProp(_this, isForcingUpdateKey, true);
-          if (!_this[skipRenderKey]) Component.prototype.forceUpdate.call(_this);
-          hasError = false;
-        } finally {
-          setHiddenProp(_this, isForcingUpdateKey, false);
-          if (hasError) reaction.dispose();
+        if (_this[mobxIsUnmounted] !== true) {
+          var hasError = true;
+
+          try {
+            setHiddenProp(_this, isForcingUpdateKey, true);
+
+            if (!_this[skipRenderKey]) {
+              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;
-  reactiveRender[mobxAdminProperty] = reaction;
-  this.render = reactiveRender;
+    });
+    reaction["reactComponent"] = _this;
+    return reaction;
+  };
 
   function reactiveRender() {
-    isRenderingPending = false;
+    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;
@@ -325,3 +364,5 @@ var rendering = undefined;
       try {
-        rendering = _allowStateChanges(false, baseRender);
+        // TODO@major
+        // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
+        rendering = _allowStateChanges(false, boundOriginalRender);
       } catch (e) {
@@ -339,3 +380,3 @@ exception = e;
 
-  return reactiveRender.call(this);
+  return reactiveRender;
 }
@@ -342,0 +383,0 @@

dist/mobxreact.esm.js

@@ -1,2 +0,2 @@
-import { Reaction, _allowStateChanges, _allowStateReadsStart, _allowStateReadsEnd, $mobx, createAtom, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
+import { _allowStateReadsStart, _allowStateReadsEnd, $mobx, _allowStateChanges, createAtom, Reaction, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
 import React__default, { PureComponent, Component } from 'react';
@@ -201,3 +201,4 @@ import { isUsingStaticRendering, observer as observer$1 } from 'mobx-react-lite';
 
-var mobxAdminProperty = $mobx || "$mobx";
+var mobxAdminProperty = $mobx || "$mobx"; // BC
+
 var mobxObserverProperty = /*#__PURE__*/newSymbol("isMobXReactObserver");
@@ -217,7 +218,13 @@ var mobxIsUnmounted = /*#__PURE__*/newSymbol("isUnmounted");
 
-  if (target.componentWillReact) throw new Error("The componentWillReact life-cycle event is no longer supported");
+  if (target.componentWillReact) {
+    throw new Error("The componentWillReact life-cycle event is no longer supported");
+  }
 
   if (componentClass["__proto__"] !== PureComponent) {
-    if (!target.shouldComponentUpdate) target.shouldComponentUpdate = observerSCU;else if (target.shouldComponentUpdate !== observerSCU) // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
+    if (!target.shouldComponentUpdate) {
+      target.shouldComponentUpdate = observerSCU;
+    } else if (target.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
@@ -236,5 +243,5 @@ // are defined inside the component, and which rely on state or props, re-compute if state or props change
 
-  var baseRender = target.render;
+  var originalRender = target.render;
 
-  if (typeof baseRender !== "function") {
+  if (typeof originalRender !== "function") {
     var _displayName = getDisplayName(target);
@@ -246,13 +253,30 @@
   target.render = function () {
-    return makeComponentReactive.call(this, baseRender);
+    if (!isUsingStaticRendering()) {
+      this.render = 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.
+      Component.prototype.forceUpdate.call(this);
+    }
+  });
   patch(target, "componentWillUnmount", function () {
-    var _this$render$mobxAdmi;
+    if (isUsingStaticRendering()) {
+      return;
+    }
 
-    if (isUsingStaticRendering() === true) return;
-    (_this$render$mobxAdmi = this.render[mobxAdminProperty]) == null ? void 0 : _this$render$mobxAdmi.dispose();
-    this[mobxIsUnmounted] = true;
+    var reaction = this.render[mobxAdminProperty];
 
-    if (!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 overriden by a subclass.
@@ -263,2 +287,4 @@ var _displayName2 = getDisplayName(this);
     }
+
+    this[mobxIsUnmounted] = true;
   });
@@ -272,6 +298,5 @@ return componentClass;
 
-function makeComponentReactive(render) {
+function createReactiveRender(originalRender) {
   var _this = this;
 
-  if (isUsingStaticRendering() === true) return render.call(this);
   /**
@@ -281,3 +306,2 @@ * If props are shallowly modified, react will render anyway,
    */
-
   setHiddenProp(this, skipRenderKey, false);
@@ -291,31 +315,46 @@ /**
   var initialName = getDisplayName(this);
-  var baseRender = render.bind(this);
+  var boundOriginalRender = originalRender.bind(this);
   var isRenderingPending = false;
-  var reaction = new 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.js)
-      // 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;
+  var createReaction = function createReaction() {
+    var reaction = new 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;
 
-        try {
-          setHiddenProp(_this, isForcingUpdateKey, true);
-          if (!_this[skipRenderKey]) Component.prototype.forceUpdate.call(_this);
-          hasError = false;
-        } finally {
-          setHiddenProp(_this, isForcingUpdateKey, false);
-          if (hasError) reaction.dispose();
+        if (_this[mobxIsUnmounted] !== true) {
+          var hasError = true;
+
+          try {
+            setHiddenProp(_this, isForcingUpdateKey, true);
+
+            if (!_this[skipRenderKey]) {
+              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;
-  reactiveRender[mobxAdminProperty] = reaction;
-  this.render = reactiveRender;
+    });
+    reaction["reactComponent"] = _this;
+    return reaction;
+  };
 
   function reactiveRender() {
-    isRenderingPending = false;
+    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;
@@ -325,3 +364,5 @@ var rendering = undefined;
       try {
-        rendering = _allowStateChanges(false, baseRender);
+        // TODO@major
+        // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
+        rendering = _allowStateChanges(false, boundOriginalRender);
       } catch (e) {
@@ -339,3 +380,3 @@ exception = e;
 
-  return reactiveRender.call(this);
+  return reactiveRender;
 }
@@ -342,0 +383,0 @@

dist/mobxreact.esm.production.min.js

@@ -1,2 +0,2 @@
-import{Reaction as e,_allowStateChanges as r,_allowStateReadsStart as t,_allowStateReadsEnd as n,$mobx as o,createAtom as i,untracked as a,isObservableMap as c,isObservableObject as s,isObservableArray as u,observable as l}from"mobx";import f,{PureComponent as p,Component as b}from"react";import{isUsingStaticRendering as d,observer as y}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";var v=0,m={};function h(e){return m[e]||(m[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+v+")";return v++,r}(e)),m[e]}function O(e,r){if(g(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!g(e[t[o]],r[t[o]]))return!1;return!0}function g(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var w={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function j(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var x=h("patchMixins"),P=h("patchedDefinition");function E(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function A(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];E.call.apply(E,[this,e,r].concat(n))}}function C(e,r,t){var n=function(e,r){var t=e[x]=e[x]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[P]){var i=function e(r,t,n,o,i){var a,c=A(i,o);return(a={})[P]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=A(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var k=o||"$mobx",R=h("isMobXReactObserver"),U=h("isUnmounted"),S=h("skipRender"),T=h("isForcingUpdate");function M(e){var r=e.prototype;if(e[R]){var t=_(r);console.warn("The provided component class ("+t+")\n                has already been declared as an observer component.")}else e[R]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==p)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==D)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=D;I(r,"props"),I(r,"state"),e.contextType&&I(r,"context");var n=r.render;if("function"!=typeof n){var o=_(r);throw new Error("[mobx-react] class component ("+o+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return N.call(this,n)},C(r,"componentWillUnmount",(function(){var e;if(!0!==d()&&(null==(e=this.render[k])||e.dispose(),this[U]=!0,!this.render[k])){var r=_(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}})),e}function _(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function N(t){var n=this;if(!0===d())return t.call(this);j(this,S,!1),j(this,T,!1);var o=_(this),i=t.bind(this),a=!1,c=new e(o+".render()",(function(){if(!a&&(a=!0,!0!==n[U])){var e=!0;try{j(n,T,!0),n[S]||b.prototype.forceUpdate.call(n),e=!1}finally{j(n,T,!1),e&&c.dispose()}}}));function s(){a=!1;var e=void 0,t=void 0;if(c.track((function(){try{t=r(!1,i)}catch(r){e=r}})),e)throw e;return t}return c.reactComponent=this,s[k]=c,this.render=s,s.call(this)}function D(e,r){return d()&&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."),this.state!==r||!O(this.props,e)}function I(e,r){var o=h("reactProp_"+r+"_valueHolder"),a=h("reactProp_"+r+"_atomHolder");function c(){return this[a]||j(this,a,i("reactive "+r)),this[a]}Object.defineProperty(e,r,{configurable:!0,enumerable:!0,get:function(){var e=!1;return t&&n&&(e=t(!0)),c.call(this).reportObserved(),t&&n&&n(e),this[o]},set:function(e){this[T]||O(this[o],e)?j(this,o,e):(j(this,o,e),j(this,S,!0),c.call(this).reportChanged(),j(this,S,!1))}})}function q(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(b,e)||Object.prototype.isPrototypeOf.call(p,e)?M(e):y(e)}function L(){return(L=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var W=["children"],X=f.createContext({});function $(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,W),n=f.useContext(X),o=f.useRef(L({},n,t));return f.createElement(X.Provider,{value:o.current},r)}function F(e,r,t,n){var o,i,a,c=f.forwardRef((function(t,n){var o=L({},t),i=f.useContext(X);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),f.createElement(r,o)}));return n&&(c=q(c)),c.isMobxInjector=!0,o=r,i=c,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){w[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))})),c.wrappedComponent=r,c.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),c}function H(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}function B(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return F(n,e,n.name,!0)}}return function(e){return F(H(r),e,r.join("-"),!1)}}$.displayName="MobXProvider";var Y=h("disposeOnUnmountProto"),z=h("disposeOnUnmountInst");function G(){var e=this;[].concat(this[Y]||[],this[z]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function J(e,r){if(Array.isArray(r))return r.map((function(r){return J(e,r)}));var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==f.Component&&t!==f.PureComponent&&n!==f.Component&&n!==f.PureComponent&&o!==f.Component&&o!==f.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof r&&"function"!=typeof r&&!Array.isArray(r))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var i=!!e[Y]||!!e[z];return("string"==typeof r?e[Y]||(e[Y]=[]):e[z]||(e[z]=[])).push(r),i||C(e,"componentWillUnmount",G),"string"!=typeof r?r:void 0}function K(e){function r(r,t,n,o,i,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return a((function(){return o=o||"<<anonymous>>",c=c||n,null==t[n]?r?new Error("The "+i+" `"+c+"` is marked as required in `"+o+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:e.apply(void 0,[t,n,o,i,c].concat(u))}))}var t=r.bind(null,!1);return t.isRequired=r.bind(null,!0),t}function Q(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function V(e,r){return K((function(t,n,o,i,l){return a((function(){if(e&&Q(t[n])===r.toLowerCase())return null;var i;switch(r){case"Array":i=u;break;case"Object":i=s;break;case"Map":i=c;break;default:throw new Error("Unexpected mobxType: "+r)}var a=t[n];if(!i(a)){var f=function(e){var r=Q(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(a),p=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+l+"` of type `"+f+"` supplied to `"+o+"`, expected `mobx.Observable"+r+"`"+p+".")}return null}))}))}function Z(e,r){return K((function(t,n,o,i,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return a((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+o+"` has invalid PropType notation.");var a=V(e,"Array")(t,n,o,i,c);if(a instanceof Error)return a;for(var s=t[n],l=0;l<s.length;l++)if((a=r.apply(void 0,[s,l,o,i,c+"["+l+"]"].concat(u)))instanceof Error)return a;return null}))}))}var ee={observableArray:V(!1,"Array"),observableArrayOf:Z.bind(null,!1),observableMap:V(!1,"Map"),observableObject:V(!1,"Object"),arrayOrObservableArray:V(!0,"Array"),arrayOrObservableArrayOf:Z.bind(null,!0),objectOrObservableObject:V(!0,"Object")};if(!b)throw new Error("mobx-react requires React to be available");if(!l)throw new Error("mobx-react requires mobx to be available");export{X as MobXProviderContext,ee as PropTypes,$ as Provider,J as disposeOnUnmount,B as inject,q as observer};
+import{_allowStateReadsStart as e,_allowStateReadsEnd as r,$mobx as t,_allowStateChanges as n,createAtom as o,Reaction as i,untracked as a,isObservableMap as c,isObservableObject as s,isObservableArray as u,observable as l}from"mobx";import f,{PureComponent as p,Component as d}from"react";import{isUsingStaticRendering as b,observer as y}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";var v=0,m={};function h(e){return m[e]||(m[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+v+")";return v++,r}(e)),m[e]}function O(e,r){if(g(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!g(e[t[o]],r[t[o]]))return!1;return!0}function g(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var w={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function j(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var x=h("patchMixins"),P=h("patchedDefinition");function E(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function A(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];E.call.apply(E,[this,e,r].concat(n))}}function C(e,r,t){var n=function(e,r){var t=e[x]=e[x]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[P]){var i=function e(r,t,n,o,i){var a,c=A(i,o);return(a={})[P]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=A(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var k=t||"$mobx",R=h("isMobXReactObserver"),U=h("isUnmounted"),S=h("skipRender"),M=h("isForcingUpdate");function T(e){var r=e.prototype;if(e[R]){var t=_(r);console.warn("The provided component class ("+t+")\n                has already been declared as an observer component.")}else e[R]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==p)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==N)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=N;I(r,"props"),I(r,"state"),e.contextType&&I(r,"context");var n=r.render;if("function"!=typeof n){var o=_(r);throw new Error("[mobx-react] class component ("+o+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return b()||(this.render=D.call(this,n)),this.render()},C(r,"componentDidMount",(function(){this[U]=!1,this.render[k]||d.prototype.forceUpdate.call(this)})),C(r,"componentWillUnmount",(function(){if(!b()){var e=this.render[k];if(e)e.dispose(),this.render[k]=null;else{var r=_(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}this[U]=!0}})),e}function _(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function D(e){var r=this;j(this,S,!1),j(this,M,!1);var t=_(this),o=e.bind(this),a=!1;return function e(){var c;a=!1;var s=null!=(c=e[k])?c:e[k]=function(){var e=new i(t+".render()",(function(){if(!a&&(a=!0,!0!==r[U])){var t=!0;try{j(r,M,!0),r[S]||d.prototype.forceUpdate.call(r),t=!1}finally{j(r,M,!1),t&&(e.dispose(),r.render[k]=null)}}}));return e.reactComponent=r,e}(),u=void 0,l=void 0;if(s.track((function(){try{l=n(!1,o)}catch(e){u=e}})),u)throw u;return l}}function N(e,r){return b()&&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."),this.state!==r||!O(this.props,e)}function I(t,n){var i=h("reactProp_"+n+"_valueHolder"),a=h("reactProp_"+n+"_atomHolder");function c(){return this[a]||j(this,a,o("reactive "+n)),this[a]}Object.defineProperty(t,n,{configurable:!0,enumerable:!0,get:function(){var t=!1;return e&&r&&(t=e(!0)),c.call(this).reportObserved(),e&&r&&r(t),this[i]},set:function(e){this[M]||O(this[i],e)?j(this,i,e):(j(this,i,e),j(this,S,!0),c.call(this).reportChanged(),j(this,S,!1))}})}function q(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(d,e)||Object.prototype.isPrototypeOf.call(p,e)?T(e):y(e)}function L(){return(L=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var W=["children"],X=f.createContext({});function $(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,W),n=f.useContext(X),o=f.useRef(L({},n,t));return f.createElement(X.Provider,{value:o.current},r)}function F(e,r,t,n){var o,i,a,c=f.forwardRef((function(t,n){var o=L({},t),i=f.useContext(X);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),f.createElement(r,o)}));return n&&(c=q(c)),c.isMobxInjector=!0,o=r,i=c,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){w[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,e))})),c.wrappedComponent=r,c.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),c}function H(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}function B(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return F(n,e,n.name,!0)}}return function(e){return F(H(r),e,r.join("-"),!1)}}$.displayName="MobXProvider";var Y=h("disposeOnUnmountProto"),z=h("disposeOnUnmountInst");function G(){var e=this;[].concat(this[Y]||[],this[z]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function J(e,r){if(Array.isArray(r))return r.map((function(r){return J(e,r)}));var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==f.Component&&t!==f.PureComponent&&n!==f.Component&&n!==f.PureComponent&&o!==f.Component&&o!==f.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof r&&"function"!=typeof r&&!Array.isArray(r))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var i=!!e[Y]||!!e[z];return("string"==typeof r?e[Y]||(e[Y]=[]):e[z]||(e[z]=[])).push(r),i||C(e,"componentWillUnmount",G),"string"!=typeof r?r:void 0}function K(e){function r(r,t,n,o,i,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return a((function(){return o=o||"<<anonymous>>",c=c||n,null==t[n]?r?new Error("The "+i+" `"+c+"` is marked as required in `"+o+"`, but its value is `"+(null===t[n]?"null":"undefined")+"`."):null:e.apply(void 0,[t,n,o,i,c].concat(u))}))}var t=r.bind(null,!1);return t.isRequired=r.bind(null,!0),t}function Q(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function V(e,r){return K((function(t,n,o,i,l){return a((function(){if(e&&Q(t[n])===r.toLowerCase())return null;var i;switch(r){case"Array":i=u;break;case"Object":i=s;break;case"Map":i=c;break;default:throw new Error("Unexpected mobxType: "+r)}var a=t[n];if(!i(a)){var f=function(e){var r=Q(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(a),p=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+l+"` of type `"+f+"` supplied to `"+o+"`, expected `mobx.Observable"+r+"`"+p+".")}return null}))}))}function Z(e,r){return K((function(t,n,o,i,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return a((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+o+"` has invalid PropType notation.");var a=V(e,"Array")(t,n,o,i,c);if(a instanceof Error)return a;for(var s=t[n],l=0;l<s.length;l++)if((a=r.apply(void 0,[s,l,o,i,c+"["+l+"]"].concat(u)))instanceof Error)return a;return null}))}))}var ee={observableArray:V(!1,"Array"),observableArrayOf:Z.bind(null,!1),observableMap:V(!1,"Map"),observableObject:V(!1,"Object"),arrayOrObservableArray:V(!0,"Array"),arrayOrObservableArrayOf:Z.bind(null,!0),objectOrObservableObject:V(!0,"Object")};if(!d)throw new Error("mobx-react requires React to be available");if(!l)throw new Error("mobx-react requires mobx to be available");export{X as MobXProviderContext,ee as PropTypes,$ as Provider,J as disposeOnUnmount,B as inject,q as observer};
 //# sourceMappingURL=mobxreact.esm.production.min.js.map

dist/mobxreact.umd.development.js

@@ -204,3 +204,4 @@ (function (global, factory) {
 
-    var mobxAdminProperty = mobx.$mobx || "$mobx";
+    var mobxAdminProperty = mobx.$mobx || "$mobx"; // BC
+
     var mobxObserverProperty = /*#__PURE__*/newSymbol("isMobXReactObserver");
@@ -220,7 +221,13 @@ var mobxIsUnmounted = /*#__PURE__*/newSymbol("isUnmounted");
 
-      if (target.componentWillReact) throw new Error("The componentWillReact life-cycle event is no longer supported");
+      if (target.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) // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
+        if (!target.shouldComponentUpdate) {
+          target.shouldComponentUpdate = observerSCU;
+        } else if (target.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
@@ -239,5 +246,5 @@ // are defined inside the component, and which rely on state or props, re-compute if state or props change
 
-      var baseRender = target.render;
+      var originalRender = target.render;
 
-      if (typeof baseRender !== "function") {
+      if (typeof originalRender !== "function") {
         var _displayName = getDisplayName(target);
@@ -249,13 +256,30 @@
       target.render = function () {
-        return makeComponentReactive.call(this, baseRender);
+        if (!mobxReactLite.isUsingStaticRendering()) {
+          this.render = 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);
+        }
+      });
       patch(target, "componentWillUnmount", function () {
-        var _this$render$mobxAdmi;
+        if (mobxReactLite.isUsingStaticRendering()) {
+          return;
+        }
 
-        if (mobxReactLite.isUsingStaticRendering() === true) return;
-        (_this$render$mobxAdmi = this.render[mobxAdminProperty]) == null ? void 0 : _this$render$mobxAdmi.dispose();
-        this[mobxIsUnmounted] = true;
+        var reaction = this.render[mobxAdminProperty];
 
-        if (!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 overriden by a subclass.
@@ -266,2 +290,4 @@ var _displayName2 = getDisplayName(this);
         }
+
+        this[mobxIsUnmounted] = true;
       });
@@ -275,6 +301,5 @@ return componentClass;
 
-    function makeComponentReactive(render) {
+    function createReactiveRender(originalRender) {
       var _this = this;
 
-      if (mobxReactLite.isUsingStaticRendering() === true) return render.call(this);
       /**
@@ -284,3 +309,2 @@ * If props are shallowly modified, react will render anyway,
        */
-
       setHiddenProp(this, skipRenderKey, false);
@@ -294,31 +318,46 @@ /**
       var initialName = getDisplayName(this);
-      var baseRender = render.bind(this);
+      var boundOriginalRender = originalRender.bind(this);
       var isRenderingPending = false;
-      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.js)
-          // 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;
+      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;
 
-            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();
+            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;
-      reactiveRender[mobxAdminProperty] = reaction;
-      this.render = reactiveRender;
+        });
+        reaction["reactComponent"] = _this;
+        return reaction;
+      };
 
       function reactiveRender() {
-        isRenderingPending = false;
+        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;
@@ -328,3 +367,5 @@ var rendering = undefined;
           try {
-            rendering = mobx._allowStateChanges(false, baseRender);
+            // TODO@major
+            // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
+            rendering = mobx._allowStateChanges(false, boundOriginalRender);
           } catch (e) {
@@ -342,3 +383,3 @@ exception = e;
 
-      return reactiveRender.call(this);
+      return reactiveRender;
     }
@@ -345,0 +386,0 @@

dist/mobxreact.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react"),require("mobx-react-lite")):"function"==typeof define&&define.amd?define(["exports","mobx","react","mobx-react-lite"],r):r((e=e||self).mobxReact={},e.mobx,e.React,e.mobxReactLite)}(this,(function(e,r,t,n){"use strict";var o="default"in t?t.default:t,i=0,a={};function c(e){return a[e]||(a[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+i+")";return i++,r}(e)),a[e]}function s(e,r){if(u(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!u(e[t[o]],r[t[o]]))return!1;return!0}function u(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var l={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function f(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var p=c("patchMixins"),b=c("patchedDefinition");function d(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function y(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];d.call.apply(d,[this,e,r].concat(n))}}function m(e,r,t){var n=function(e,r){var t=e[p]=e[p]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[b]){var i=function e(r,t,n,o,i){var a,c=y(i,o);return(a={})[b]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=y(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var v=r.$mobx||"$mobx",h=c("isMobXReactObserver"),O=c("isUnmounted"),g=c("skipRender"),w=c("isForcingUpdate");function j(e){var r=e.prototype;if(e[h]){var o=P(r);console.warn("The provided component class ("+o+")\n                has already been declared as an observer component.")}else e[h]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==R)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=R;S(r,"props"),S(r,"state"),e.contextType&&S(r,"context");var i=r.render;if("function"!=typeof i){var a=P(r);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return x.call(this,i)},m(r,"componentWillUnmount",(function(){var e;if(!0!==n.isUsingStaticRendering()&&(null==(e=this.render[v])||e.dispose(),this[O]=!0,!this.render[v])){var r=P(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}})),e}function P(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function x(e){var o=this;if(!0===n.isUsingStaticRendering())return e.call(this);f(this,g,!1),f(this,w,!1);var i=P(this),a=e.bind(this),c=!1,s=new r.Reaction(i+".render()",(function(){if(!c&&(c=!0,!0!==o[O])){var e=!0;try{f(o,w,!0),o[g]||t.Component.prototype.forceUpdate.call(o),e=!1}finally{f(o,w,!1),e&&s.dispose()}}}));function u(){c=!1;var e=void 0,t=void 0;if(s.track((function(){try{t=r._allowStateChanges(!1,a)}catch(r){e=r}})),e)throw e;return t}return s.reactComponent=this,u[v]=s,this.render=u,u.call(this)}function R(e,r){return n.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."),this.state!==r||!s(this.props,e)}function S(e,t){var n=c("reactProp_"+t+"_valueHolder"),o=c("reactProp_"+t+"_atomHolder");function i(){return this[o]||f(this,o,r.createAtom("reactive "+t)),this[o]}Object.defineProperty(e,t,{configurable:!0,enumerable:!0,get:function(){var e=!1;return r._allowStateReadsStart&&r._allowStateReadsEnd&&(e=r._allowStateReadsStart(!0)),i.call(this).reportObserved(),r._allowStateReadsStart&&r._allowStateReadsEnd&&r._allowStateReadsEnd(e),this[n]},set:function(e){this[w]||s(this[n],e)?f(this,n,e):(f(this,n,e),f(this,g,!0),i.call(this).reportChanged(),f(this,g,!1))}})}function C(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?j(e):n.observer(e)}function E(){return(E=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var A=["children"],k=o.createContext({});function U(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,A),n=o.useContext(k),i=o.useRef(E({},n,t));return o.createElement(k.Provider,{value:i.current},r)}function _(e,r,t,n){var i,a,c,s=o.forwardRef((function(t,n){var i=E({},t),a=o.useContext(k);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(s=C(s)),s.isMobxInjector=!0,i=r,a=s,c=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){l[e]||-1!==c.indexOf(e)||Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(i,e))})),s.wrappedComponent=r,s.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),s}function M(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}U.displayName="MobXProvider";var T=c("disposeOnUnmountProto"),q=c("disposeOnUnmountInst");function N(){var e=this;[].concat(this[T]||[],this[q]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function D(e){function t(t,n,o,i,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?t?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function L(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function I(e,t){return D((function(n,o,i,a,c){return r.untracked((function(){if(e&&L(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var s=n[o];if(!a(s)){var u=function(e){var r=L(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(s),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function X(e,t){return D((function(n,o,i,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var r=I(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var s=n[o],l=0;l<s.length;l++)if((r=t.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var $={observableArray:I(!1,"Array"),observableArrayOf:X.bind(null,!1),observableMap:I(!1,"Map"),observableObject:I(!1,"Object"),arrayOrObservableArray:I(!0,"Array"),arrayOrObservableArrayOf:X.bind(null,!0),objectOrObservableObject:I(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(e,"Observer",{enumerable:!0,get:function(){return n.Observer}}),Object.defineProperty(e,"enableStaticRendering",{enumerable:!0,get:function(){return n.enableStaticRendering}}),Object.defineProperty(e,"isUsingStaticRendering",{enumerable:!0,get:function(){return n.isUsingStaticRendering}}),Object.defineProperty(e,"observerBatching",{enumerable:!0,get:function(){return n.observerBatching}}),Object.defineProperty(e,"useAsObservableSource",{enumerable:!0,get:function(){return n.useAsObservableSource}}),Object.defineProperty(e,"useLocalObservable",{enumerable:!0,get:function(){return n.useLocalObservable}}),Object.defineProperty(e,"useLocalStore",{enumerable:!0,get:function(){return n.useLocalStore}}),Object.defineProperty(e,"useObserver",{enumerable:!0,get:function(){return n.useObserver}}),Object.defineProperty(e,"useStaticRendering",{enumerable:!0,get:function(){return n.useStaticRendering}}),e.MobXProviderContext=k,e.PropTypes=$,e.Provider=U,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));var n=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(n!==o.Component&&n!==o.PureComponent&&i!==o.Component&&i!==o.PureComponent&&a!==o.Component&&a!==o.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var c=!!r[T]||!!r[q];return("string"==typeof t?r[T]||(r[T]=[]):r[q]||(r[q]=[])).push(t),c||m(r,"componentWillUnmount",N),"string"!=typeof t?t:void 0},e.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return _(n,e,n.name,!0)}}return function(e){return _(M(r),e,r.join("-"),!1)}},e.observer=C,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react"),require("mobx-react-lite")):"function"==typeof define&&define.amd?define(["exports","mobx","react","mobx-react-lite"],r):r((e=e||self).mobxReact={},e.mobx,e.React,e.mobxReactLite)}(this,(function(e,r,t,n){"use strict";var o="default"in t?t.default:t,i=0,a={};function c(e){return a[e]||(a[e]=function(e){if("function"==typeof Symbol)return Symbol(e);var r="__$mobx-react "+e+" ("+i+")";return i++,r}(e)),a[e]}function s(e,r){if(u(e,r))return!0;if("object"!=typeof e||null===e||"object"!=typeof r||null===r)return!1;var t=Object.keys(e),n=Object.keys(r);if(t.length!==n.length)return!1;for(var o=0;o<t.length;o++)if(!Object.hasOwnProperty.call(r,t[o])||!u(e[t[o]],r[t[o]]))return!1;return!0}function u(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var l={$$typeof:1,render:1,compare:1,type:1,childContextTypes:1,contextType:1,contextTypes:1,defaultProps:1,getDefaultProps:1,getDerivedStateFromError:1,getDerivedStateFromProps:1,mixins:1,displayName:1,propTypes:1};function f(e,r,t){Object.hasOwnProperty.call(e,r)?e[r]=t:Object.defineProperty(e,r,{enumerable:!1,configurable:!0,writable:!0,value:t})}var p=c("patchMixins"),b=c("patchedDefinition");function d(e,r){for(var t=this,n=arguments.length,o=new Array(n>2?n-2:0),i=2;i<n;i++)o[i-2]=arguments[i];r.locks++;try{var a;return null!=e&&(a=e.apply(this,o)),a}finally{r.locks--,0===r.locks&&r.methods.forEach((function(e){e.apply(t,o)}))}}function y(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];d.call.apply(d,[this,e,r].concat(n))}}function m(e,r,t){var n=function(e,r){var t=e[p]=e[p]||{},n=t[r]=t[r]||{};return n.locks=n.locks||0,n.methods=n.methods||[],n}(e,r);n.methods.indexOf(t)<0&&n.methods.push(t);var o=Object.getOwnPropertyDescriptor(e,r);if(!o||!o[b]){var i=function e(r,t,n,o,i){var a,c=y(i,o);return(a={})[b]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=y(i,o);else{var a=e(this,t,n,o,i);Object.defineProperty(this,t,a)}},a.configurable=!0,a.enumerable=n,a}(e,r,o?o.enumerable:void 0,n,e[r]);Object.defineProperty(e,r,i)}}var v=r.$mobx||"$mobx",h=c("isMobXReactObserver"),O=c("isUnmounted"),g=c("skipRender"),w=c("isForcingUpdate");function j(e){var r=e.prototype;if(e[h]){var o=P(r);console.warn("The provided component class ("+o+")\n                has already been declared as an observer component.")}else e[h]=!0;if(r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==t.PureComponent)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==R)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=R;S(r,"props"),S(r,"state"),e.contextType&&S(r,"context");var i=r.render;if("function"!=typeof i){var a=P(r);throw new Error("[mobx-react] class component ("+a+") is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.")}return r.render=function(){return n.isUsingStaticRendering()||(this.render=x.call(this,i)),this.render()},m(r,"componentDidMount",(function(){this[O]=!1,this.render[v]||t.Component.prototype.forceUpdate.call(this)})),m(r,"componentWillUnmount",(function(){if(!n.isUsingStaticRendering()){var e=this.render[v];if(e)e.dispose(),this.render[v]=null;else{var r=P(this);console.warn("The reactive render of an observer class component ("+r+")\n                was overriden after MobX attached. This may result in a memory leak if the\n                overriden reactive render was not properly disposed.")}this[O]=!0}})),e}function P(e){return e.displayName||e.name||e.constructor&&(e.constructor.displayName||e.constructor.name)||"<component>"}function x(e){var n=this;f(this,g,!1),f(this,w,!1);var o=P(this),i=e.bind(this),a=!1;return function e(){var c;a=!1;var s=null!=(c=e[v])?c:e[v]=function(){var e=new r.Reaction(o+".render()",(function(){if(!a&&(a=!0,!0!==n[O])){var r=!0;try{f(n,w,!0),n[g]||t.Component.prototype.forceUpdate.call(n),r=!1}finally{f(n,w,!1),r&&(e.dispose(),n.render[v]=null)}}}));return e.reactComponent=n,e}(),u=void 0,l=void 0;if(s.track((function(){try{l=r._allowStateChanges(!1,i)}catch(e){u=e}})),u)throw u;return l}}function R(e,r){return n.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."),this.state!==r||!s(this.props,e)}function S(e,t){var n=c("reactProp_"+t+"_valueHolder"),o=c("reactProp_"+t+"_atomHolder");function i(){return this[o]||f(this,o,r.createAtom("reactive "+t)),this[o]}Object.defineProperty(e,t,{configurable:!0,enumerable:!0,get:function(){var e=!1;return r._allowStateReadsStart&&r._allowStateReadsEnd&&(e=r._allowStateReadsStart(!0)),i.call(this).reportObserved(),r._allowStateReadsStart&&r._allowStateReadsEnd&&r._allowStateReadsEnd(e),this[n]},set:function(e){this[w]||s(this[n],e)?f(this,n,e):(f(this,n,e),f(this,g,!0),i.call(this).reportChanged(),f(this,g,!1))}})}function C(e){return!0===e.isMobxInjector&&console.warn("Mobx observer: You are trying to use `observer` on a component that already has `inject`. Please apply `observer` before applying `inject`"),Object.prototype.isPrototypeOf.call(t.Component,e)||Object.prototype.isPrototypeOf.call(t.PureComponent,e)?j(e):n.observer(e)}function E(){return(E=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var A=["children"],k=o.createContext({});function U(e){var r=e.children,t=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(o[t]=e[t]);return o}(e,A),n=o.useContext(k),i=o.useRef(E({},n,t));return o.createElement(k.Provider,{value:i.current},r)}function _(e,r,t,n){var i,a,c,s=o.forwardRef((function(t,n){var i=E({},t),a=o.useContext(k);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(s=C(s)),s.isMobxInjector=!0,i=r,a=s,c=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){l[e]||-1!==c.indexOf(e)||Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(i,e))})),s.wrappedComponent=r,s.displayName=function(e,r){var t=e.displayName||e.name||e.constructor&&e.constructor.name||"Component";return r?"inject-with-"+r+"("+t+")":"inject("+t+")"}(r,t),s}function M(e){return function(r,t){return e.forEach((function(e){if(!(e in t)){if(!(e in r))throw new Error("MobX injector: Store '"+e+"' is not available! Make sure it is provided by some Provider");t[e]=r[e]}})),t}}U.displayName="MobXProvider";var T=c("disposeOnUnmountProto"),q=c("disposeOnUnmountInst");function D(){var e=this;[].concat(this[T]||[],this[q]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function N(e){function t(t,n,o,i,a,c){for(var s=arguments.length,u=new Array(s>6?s-6:0),l=6;l<s;l++)u[l-6]=arguments[l];return r.untracked((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?t?new Error("The "+a+" `"+c+"` is marked as required in `"+i+"`, but its value is `"+(null===n[o]?"null":"undefined")+"`."):null:e.apply(void 0,[n,o,i,a,c].concat(u))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function L(e){var r=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,r){return"symbol"===e||"Symbol"===r["@@toStringTag"]||"function"==typeof Symbol&&r instanceof Symbol}(r,e)?"symbol":r}function I(e,t){return N((function(n,o,i,a,c){return r.untracked((function(){if(e&&L(n[o])===t.toLowerCase())return null;var a;switch(t){case"Array":a=r.isObservableArray;break;case"Object":a=r.isObservableObject;break;case"Map":a=r.isObservableMap;break;default:throw new Error("Unexpected mobxType: "+t)}var s=n[o];if(!a(s)){var u=function(e){var r=L(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(s),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+u+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function X(e,t){return N((function(n,o,i,a,c){for(var s=arguments.length,u=new Array(s>5?s-5:0),l=5;l<s;l++)u[l-5]=arguments[l];return r.untracked((function(){if("function"!=typeof t)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var r=I(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var s=n[o],l=0;l<s.length;l++)if((r=t.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return r;return null}))}))}var $={observableArray:I(!1,"Array"),observableArrayOf:X.bind(null,!1),observableMap:I(!1,"Map"),observableObject:I(!1,"Object"),arrayOrObservableArray:I(!0,"Array"),arrayOrObservableArrayOf:X.bind(null,!0),objectOrObservableObject:I(!0,"Object")};if(!t.Component)throw new Error("mobx-react requires React to be available");if(!r.observable)throw new Error("mobx-react requires mobx to be available");Object.defineProperty(e,"Observer",{enumerable:!0,get:function(){return n.Observer}}),Object.defineProperty(e,"enableStaticRendering",{enumerable:!0,get:function(){return n.enableStaticRendering}}),Object.defineProperty(e,"isUsingStaticRendering",{enumerable:!0,get:function(){return n.isUsingStaticRendering}}),Object.defineProperty(e,"observerBatching",{enumerable:!0,get:function(){return n.observerBatching}}),Object.defineProperty(e,"useAsObservableSource",{enumerable:!0,get:function(){return n.useAsObservableSource}}),Object.defineProperty(e,"useLocalObservable",{enumerable:!0,get:function(){return n.useLocalObservable}}),Object.defineProperty(e,"useLocalStore",{enumerable:!0,get:function(){return n.useLocalStore}}),Object.defineProperty(e,"useObserver",{enumerable:!0,get:function(){return n.useObserver}}),Object.defineProperty(e,"useStaticRendering",{enumerable:!0,get:function(){return n.useStaticRendering}}),e.MobXProviderContext=k,e.PropTypes=$,e.Provider=U,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));var n=Object.getPrototypeOf(r).constructor,i=Object.getPrototypeOf(r.constructor),a=Object.getPrototypeOf(Object.getPrototypeOf(r));if(n!==o.Component&&n!==o.PureComponent&&i!==o.Component&&i!==o.PureComponent&&a!==o.Component&&a!==o.PureComponent)throw new Error("[mobx-react] disposeOnUnmount only supports direct subclasses of React.Component or React.PureComponent.");if("string"!=typeof t&&"function"!=typeof t&&!Array.isArray(t))throw new Error("[mobx-react] disposeOnUnmount only works if the parameter is either a property key or a function.");var c=!!r[T]||!!r[q];return("string"==typeof t?r[T]||(r[T]=[]):r[q]||(r[q]=[])).push(t),c||m(r,"componentWillUnmount",D),"string"!=typeof t?t:void 0},e.inject=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];if("function"==typeof arguments[0]){var n=arguments[0];return function(e){return _(n,e,n.name,!0)}}return function(e){return _(M(r),e,r.join("-"),!1)}},e.observer=C,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mobxreact.umd.production.min.js.map

package.json

 {
     "name": "mobx-react",
-    "version": "7.5.0",
+    "version": "7.5.1",
     "description": "React bindings for MobX. Create fully reactive components.",
@@ -54,3 +54,3 @@ "source": "src/index.ts",
     "devDependencies": {
-        "mobx": "^6.6.0",
+        "mobx": "^6.6.1",
         "mobx-react-lite": "^3.4.0"
@@ -57,0 +57,0 @@ },

src/observerClass.ts

@@ -14,3 +14,3 @@ import { PureComponent, Component } from "react"
 
-const mobxAdminProperty = $mobx || "$mobx"
+const mobxAdminProperty = $mobx || "$mobx" // BC
 const mobxObserverProperty = newSymbol("isMobXReactObserver")
@@ -36,7 +36,9 @@ const mobxIsUnmounted = newSymbol("isUnmounted")
 
-    if (target.componentWillReact)
+    if (target.componentWillReact) {
         throw new Error("The componentWillReact life-cycle event is no longer supported")
+    }
     if (componentClass["__proto__"] !== PureComponent) {
-        if (!target.shouldComponentUpdate) target.shouldComponentUpdate = observerSCU
-        else if (target.shouldComponentUpdate !== observerSCU)
+        if (!target.shouldComponentUpdate) {
+            target.shouldComponentUpdate = observerSCU
+        } else if (target.shouldComponentUpdate !== observerSCU) {
             // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
@@ -46,2 +48,3 @@ throw new Error(
             )
+        }
     }
@@ -59,4 +62,4 @@
 
-    const baseRender = target.render
-    if (typeof baseRender !== "function") {
+    const originalRender = target.render
+    if (typeof originalRender !== "function") {
         const displayName = getDisplayName(target)
@@ -70,10 +73,26 @@ throw new Error(
     target.render = function () {
-        return makeComponentReactive.call(this, baseRender)
+        if (!isUsingStaticRendering()) {
+            this.render = 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.
+            Component.prototype.forceUpdate.call(this)
+        }
+    })
     patch(target, "componentWillUnmount", function () {
-        if (isUsingStaticRendering() === true) return
-        this.render[mobxAdminProperty]?.dispose()
-        this[mobxIsUnmounted] = true
+        if (isUsingStaticRendering()) {
+            return
+        }
 
-        if (!this.render[mobxAdminProperty]) {
+        const 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 overriden by a subclass.
@@ -87,2 +106,4 @@ const displayName = getDisplayName(this)
         }
+
+        this[mobxIsUnmounted] = true
     })
@@ -102,5 +123,3 @@ return componentClass
 
-function makeComponentReactive(render: any) {
-    if (isUsingStaticRendering() === true) return render.call(this)
-
+function createReactiveRender(originalRender: any) {
     /**
@@ -118,32 +137,40 @@ * If props are shallowly modified, react will render anyway,
     const initialName = getDisplayName(this)
-    const baseRender = render.bind(this)
+    const boundOriginalRender = originalRender.bind(this)
 
     let isRenderingPending = false
 
-    const reaction = new Reaction(`${initialName}.render()`, () => {
-        if (!isRenderingPending) {
-            // N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.js)
-            // 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) {
-                let hasError = true
-                try {
-                    setHiddenProp(this, isForcingUpdateKey, true)
-                    if (!this[skipRenderKey]) Component.prototype.forceUpdate.call(this)
-                    hasError = false
-                } finally {
-                    setHiddenProp(this, isForcingUpdateKey, false)
-                    if (hasError) reaction.dispose()
+    const createReaction = () => {
+        const reaction = new Reaction(`${initialName}.render()`, () => {
+            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) {
+                    let hasError = true
+                    try {
+                        setHiddenProp(this, isForcingUpdateKey, true)
+                        if (!this[skipRenderKey]) {
+                            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
+    }
 
-    reaction["reactComponent"] = this
-    reactiveRender[mobxAdminProperty] = reaction
-    this.render = reactiveRender
-
     function reactiveRender() {
         isRenderingPending = false
+        // Create reaction lazily to support re-mounting #3395
+        const reaction = (reactiveRender[mobxAdminProperty] ??= createReaction())
         let exception: unknown = undefined
@@ -153,3 +180,5 @@ let rendering = undefined
             try {
-                rendering = _allowStateChanges(false, baseRender)
+                // TODO@major
+                // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
+                rendering = _allowStateChanges(false, boundOriginalRender)
             } catch (e) {
@@ -165,3 +194,3 @@ exception = e
 
-    return reactiveRender.call(this)
+    return reactiveRender
 }
@@ -168,0 +197,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

617070

increased by3.12%

Lines of code

3776

increased by4.19%

No dependency changes