mobx-react - npm Package Compare versions

Comparing version 9.0.0 to 9.0.1

CHANGELOG.md

 # mobx-react
 
+## 9.0.1
+
+### Patch Changes
+
+-   [`d813746c`](https://github.com/mobxjs/mobx/commit/d813746cfaa18d80daddee3724562fed6b307c0a) [#3731](https://github.com/mobxjs/mobx/pull/3731) Thanks [@urugator](https://github.com/urugator)! - fix #3730: class component does not react to state changes performed before mount
+
+-   Updated dependencies [[`3ceeb865`](https://github.com/mobxjs/mobx/commit/3ceeb8651e328c4c7211c875696b3f5269fea834)]:
+    -   mobx-react-lite@4.0.4
+
 ## 9.0.0
@@ -4,0 +13,0 @@

dist/mobxreact.cjs.development.js

@@ -160,2 +160,3 @@ 'use strict';
     mounted: false,
+    reactionInvalidatedBeforeMount: false,
     forceUpdate: null,
@@ -233,3 +234,4 @@ name: getDisplayName(component.constructor),
     };
-    if (!admin.reaction) {
+    if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
+      // Missing reaction:
       // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
@@ -240,2 +242,4 @@ // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
       // The reaction will be created lazily by following render.
+      // Reaction invalidated before mount:
+      // 1. A descendant's `componenDidMount` invalidated it's parent #3730
       admin.forceUpdate();
@@ -256,2 +260,3 @@ }
     admin.mounted = false;
+    admin.reactionInvalidatedBeforeMount = false;
   });
@@ -300,3 +305,5 @@ return componentClass;
       // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
-      // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+      // `componenDidMount` runs synchronously after `render`, so unlike functional component, there is no delay during which the reaction could be invalidated.
+      // However `componentDidMount` runs AFTER it's descendants' `componentDidMount`, which CAN invalidate the reaction, see #3730. Therefore remember and forceUpdate on mount.
+      admin.reactionInvalidatedBeforeMount = true;
       return;
@@ -303,0 +310,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");function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$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},c=Symbol("patchMixins"),s=Symbol("patchedDefinition");function u(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 l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];u.call.apply(u,[this,e,r].concat(n))}}function p(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},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[s]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[s]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(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 f=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[f])?r:e[f]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function m(e){var t=e.bind(this),n=d(this);return function(){n.reaction||(n.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}}))}(n),n.mounted||o._observerFinalizationRegistry.register(this,n,this));var e=void 0,i=void 0;if(n.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function v(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||!function(e,r){if(i(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])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(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)?function(e){var r=e.prototype;if(e[b]){var n=y(e);throw new Error("The provided component class ("+n+") has already been declared as an observer component.")}if(e[b]=!0,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!==v)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=v;var i=r.render;if("function"!=typeof i){var a=y(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:o.isUsingStaticRendering()?i:m.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,o._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},p(r,"componentWillUnmount",(function(){var e;if(!o.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):o.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():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 g=["children"],j=n.createContext({});function w(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,g),o=n.useContext(j),i=n.useRef(O({},o,t));return n.createElement(j.Provider,{value:i.current},r)}function x(e,r,t,o){var i,c,s,u=n.forwardRef((function(t,o){var i=O({},t),a=n.useContext(j);return Object.assign(i,e(a||{},i)||{}),o&&(i.ref=o),n.createElement(r,i)}));return o&&(u=h(u)),u.isMobxInjector=!0,i=r,c=u,s=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==s.indexOf(e)||Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))})),u.wrappedComponent=r,u.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),u}function P(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}}w.displayName="MobXProvider";var S=Number.parseInt(n.version.split(".")[0]),C=!1,R=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[R]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(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 k(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 M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(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=k(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 T(e,t){return E((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=M(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 D={observableArray:M(!1,"Array"),observableArrayOf:T.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:T.bind(null,!0),objectOrObservableObject:M(!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=j,exports.PropTypes=D,exports.Provider=w,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));C||(S>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),C=!0);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 c=!!r[R]||!!r[U];return("string"==typeof t?r[R]||(r[R]=[]):r[U]||(r[U]=[])).push(t),c||p(r,"componentWillUnmount",A),"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 x(n,e,n.name,!0)}}return function(e){return x(P(r),e,r.join("-"),!1)}},exports.observer=h;
+"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");function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$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},c=Symbol("patchMixins"),s=Symbol("patchedDefinition");function u(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 l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];u.call.apply(u,[this,e,r].concat(n))}}function p(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},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[s]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[s]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(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 f=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[f])?r:e[f]={reaction:null,mounted:!1,reactionInvalidatedBeforeMount:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function v(e){var t=e.bind(this),n=d(this);return function(){n.reaction||(n.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}else e.reactionInvalidatedBeforeMount=!0}))}(n),n.mounted||o._observerFinalizationRegistry.register(this,n,this));var e=void 0,i=void 0;if(n.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function m(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||!function(e,r){if(i(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])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(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)?function(e){var r=e.prototype;if(e[b]){var n=y(e);throw new Error("The provided component class ("+n+") has already been declared as an observer component.")}if(e[b]=!0,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!==m)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=m;var i=r.render;if("function"!=typeof i){var a=y(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:o.isUsingStaticRendering()?i:v.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,o._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction&&!r.reactionInvalidatedBeforeMount||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},p(r,"componentWillUnmount",(function(){var e;if(!o.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1,r.reactionInvalidatedBeforeMount=!1}})),e}(e):o.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():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 g=["children"],j=n.createContext({});function w(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,g),o=n.useContext(j),i=n.useRef(O({},o,t));return n.createElement(j.Provider,{value:i.current},r)}function x(e,r,t,o){var i,c,s,u=n.forwardRef((function(t,o){var i=O({},t),a=n.useContext(j);return Object.assign(i,e(a||{},i)||{}),o&&(i.ref=o),n.createElement(r,i)}));return o&&(u=h(u)),u.isMobxInjector=!0,i=r,c=u,s=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==s.indexOf(e)||Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))})),u.wrappedComponent=r,u.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),u}function P(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}}w.displayName="MobXProvider";var S=Number.parseInt(n.version.split(".")[0]),C=!1,R=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[R]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(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 k(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 M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(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=k(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 I(e,t){return E((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=M(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 T={observableArray:M(!1,"Array"),observableArrayOf:I.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:I.bind(null,!0),objectOrObservableObject:M(!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=j,exports.PropTypes=T,exports.Provider=w,exports.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));C||(S>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),C=!0);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 c=!!r[R]||!!r[U];return("string"==typeof t?r[R]||(r[R]=[]):r[U]||(r[U]=[])).push(t),c||p(r,"componentWillUnmount",A),"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 x(n,e,n.name,!0)}}return function(e){return x(P(r),e,r.join("-"),!1)}},exports.observer=h;
 //# sourceMappingURL=mobxreact.cjs.production.min.js.map

dist/mobxreact.esm.development.js

@@ -154,2 +154,3 @@ import { _getGlobalState, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
     mounted: false,
+    reactionInvalidatedBeforeMount: false,
     forceUpdate: null,
@@ -227,3 +228,4 @@ name: getDisplayName(component.constructor),
     };
-    if (!admin.reaction) {
+    if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
+      // Missing reaction:
       // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
@@ -234,2 +236,4 @@ // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
       // The reaction will be created lazily by following render.
+      // Reaction invalidated before mount:
+      // 1. A descendant's `componenDidMount` invalidated it's parent #3730
       admin.forceUpdate();
@@ -250,2 +254,3 @@ }
     admin.mounted = false;
+    admin.reactionInvalidatedBeforeMount = false;
   });
@@ -294,3 +299,5 @@ return componentClass;
       // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
-      // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+      // `componenDidMount` runs synchronously after `render`, so unlike functional component, there is no delay during which the reaction could be invalidated.
+      // However `componentDidMount` runs AFTER it's descendants' `componentDidMount`, which CAN invalidate the reaction, see #3730. Therefore remember and forceUpdate on mount.
+      admin.reactionInvalidatedBeforeMount = true;
       return;
@@ -297,0 +304,0 @@ }

dist/mobxreact.esm.js

@@ -154,2 +154,3 @@ import { _getGlobalState, Reaction, _allowStateChanges, untracked, isObservableMap, isObservableObject, isObservableArray, observable } from 'mobx';
     mounted: false,
+    reactionInvalidatedBeforeMount: false,
     forceUpdate: null,
@@ -227,3 +228,4 @@ name: getDisplayName(component.constructor),
     };
-    if (!admin.reaction) {
+    if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
+      // Missing reaction:
       // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
@@ -234,2 +236,4 @@ // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
       // The reaction will be created lazily by following render.
+      // Reaction invalidated before mount:
+      // 1. A descendant's `componenDidMount` invalidated it's parent #3730
       admin.forceUpdate();
@@ -250,2 +254,3 @@ }
     admin.mounted = false;
+    admin.reactionInvalidatedBeforeMount = false;
   });
@@ -294,3 +299,5 @@ return componentClass;
       // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
-      // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+      // `componenDidMount` runs synchronously after `render`, so unlike functional component, there is no delay during which the reaction could be invalidated.
+      // However `componentDidMount` runs AFTER it's descendants' `componentDidMount`, which CAN invalidate the reaction, see #3730. Therefore remember and forceUpdate on mount.
+      admin.reactionInvalidatedBeforeMount = true;
       return;
@@ -297,0 +304,0 @@ }

dist/mobxreact.esm.production.min.js

@@ -1,2 +0,2 @@
-import{Reaction as e,_allowStateChanges as r,untracked as t,isObservableMap as n,isObservableObject as o,isObservableArray as i,observable as a}from"mobx";import c,{PureComponent as s,Component as u}from"react";import{isUsingStaticRendering as l,_observerFinalizationRegistry as f,observer as p}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";function d(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var b={$$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},m=Symbol("patchMixins"),y=Symbol("patchedDefinition");function v(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 h(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];v.call.apply(v,[this,e,r].concat(n))}}function O(e,r,t){var n=function(e,r){var t=e[m]=e[m]||{},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[y]){var i=function e(r,t,n,o,i){var a,c=h(i,o);return(a={})[y]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=h(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 g=Symbol("ObserverAdministration"),w=Symbol("isMobXReactObserver");function j(e){var r;return null!=(r=e[g])?r:e[g]={reaction:null,mounted:!1,forceUpdate:null,name:x(e.constructor),state:void 0,props:void 0,context:void 0}}function x(e){return e.displayName||e.name||"<component>"}function P(t){var n=t.bind(this),o=j(this);return function(){o.reaction||(o.reaction=function(r){return new e(r.name+".render()",(function(){if(r.mounted)try{null==r.forceUpdate||r.forceUpdate()}catch(t){var e;null==(e=r.reaction)||e.dispose(),r.reaction=null}}))}(o),o.mounted||f.register(this,o,this));var t=void 0,i=void 0;if(o.reaction.track((function(){try{i=r(!1,n)}catch(e){t=e}})),t)throw t;return i}}function E(e,r){return l()&&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||!function(e,r){if(d(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])||!d(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function A(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(u,e)||Object.prototype.isPrototypeOf.call(s,e)?function(e){var r=e.prototype;if(e[w]){var t=x(e);throw new Error("The provided component class ("+t+") has already been declared as an observer component.")}if(e[w]=!0,r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==s)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==E)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=E;var n=r.render;if("function"!=typeof n){var o=x(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:l()?n:P.call(this,n)}),this.render()};var i=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=j(this);return r.mounted=!0,f.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==i?void 0:i.apply(this,arguments)},O(r,"componentWillUnmount",(function(){var e;if(!l()){var r=j(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):p(e)}function U(){return(U=Object.assign?Object.assign.bind():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 C=["children"],k=c.createContext({});function S(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,C),n=c.useContext(k),o=c.useRef(U({},n,t));return c.createElement(k.Provider,{value:o.current},r)}function R(e,r,t,n){var o,i,a,s=c.forwardRef((function(t,n){var o=U({},t),i=c.useContext(k);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),c.createElement(r,o)}));return n&&(s=A(s)),s.isMobxInjector=!0,o=r,i=s,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){b[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,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}}function D(){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 R(n,e,n.name,!0)}}return function(e){return R(M(r),e,r.join("-"),!1)}}S.displayName="MobXProvider";var T=Number.parseInt(c.version.split(".")[0]),I=!1,N=Symbol("disposeOnUnmountProto"),q=Symbol("disposeOnUnmountInst");function L(){var e=this;[].concat(this[N]||[],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 W(e,r){if(Array.isArray(r))return r.map((function(r){return W(e,r)}));I||(T>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),I=!0);var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==c.Component&&t!==c.PureComponent&&n!==c.Component&&n!==c.PureComponent&&o!==c.Component&&o!==c.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[N]||!!e[q];return("string"==typeof r?e[N]||(e[N]=[]):e[q]||(e[q]=[])).push(r),i||O(e,"componentWillUnmount",L),"string"!=typeof r?r:void 0}function _(e){function r(r,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 t((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?r?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=r.bind(null,!1);return n.isRequired=r.bind(null,!0),n}function X(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 F(e,r){return _((function(a,c,s,u,l){return t((function(){if(e&&X(a[c])===r.toLowerCase())return null;var t;switch(r){case"Array":t=i;break;case"Object":t=o;break;case"Map":t=n;break;default:throw new Error("Unexpected mobxType: "+r)}var u=a[c];if(!t(u)){var f=function(e){var r=X(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),p=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+l+"` of type `"+f+"` supplied to `"+s+"`, expected `mobx.Observable"+r+"`"+p+".")}return null}))}))}function $(e,r){return _((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 t((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var t=F(e,"Array")(n,o,i,a,c);if(t instanceof Error)return t;for(var s=n[o],l=0;l<s.length;l++)if((t=r.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return t;return null}))}))}var B={observableArray:F(!1,"Array"),observableArrayOf:$.bind(null,!1),observableMap:F(!1,"Map"),observableObject:F(!1,"Object"),arrayOrObservableArray:F(!0,"Array"),arrayOrObservableArrayOf:$.bind(null,!0),objectOrObservableObject:F(!0,"Object")};if(!u)throw new Error("mobx-react requires React to be available");if(!a)throw new Error("mobx-react requires mobx to be available");export{k as MobXProviderContext,B as PropTypes,S as Provider,W as disposeOnUnmount,D as inject,A as observer};
+import{Reaction as e,_allowStateChanges as r,untracked as t,isObservableMap as n,isObservableObject as o,isObservableArray as i,observable as a}from"mobx";import c,{PureComponent as s,Component as u}from"react";import{isUsingStaticRendering as l,_observerFinalizationRegistry as f,observer as p}from"mobx-react-lite";export{Observer,enableStaticRendering,isUsingStaticRendering,observerBatching,useAsObservableSource,useLocalObservable,useLocalStore,useObserver,useStaticRendering}from"mobx-react-lite";function d(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var b={$$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},m=Symbol("patchMixins"),y=Symbol("patchedDefinition");function v(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 h(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];v.call.apply(v,[this,e,r].concat(n))}}function O(e,r,t){var n=function(e,r){var t=e[m]=e[m]||{},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[y]){var i=function e(r,t,n,o,i){var a,c=h(i,o);return(a={})[y]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=h(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 g=Symbol("ObserverAdministration"),w=Symbol("isMobXReactObserver");function j(e){var r;return null!=(r=e[g])?r:e[g]={reaction:null,mounted:!1,reactionInvalidatedBeforeMount:!1,forceUpdate:null,name:x(e.constructor),state:void 0,props:void 0,context:void 0}}function x(e){return e.displayName||e.name||"<component>"}function P(t){var n=t.bind(this),o=j(this);return function(){o.reaction||(o.reaction=function(r){return new e(r.name+".render()",(function(){if(r.mounted)try{null==r.forceUpdate||r.forceUpdate()}catch(t){var e;null==(e=r.reaction)||e.dispose(),r.reaction=null}else r.reactionInvalidatedBeforeMount=!0}))}(o),o.mounted||f.register(this,o,this));var t=void 0,i=void 0;if(o.reaction.track((function(){try{i=r(!1,n)}catch(e){t=e}})),t)throw t;return i}}function E(e,r){return l()&&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||!function(e,r){if(d(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])||!d(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function A(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(u,e)||Object.prototype.isPrototypeOf.call(s,e)?function(e){var r=e.prototype;if(e[w]){var t=x(e);throw new Error("The provided component class ("+t+") has already been declared as an observer component.")}if(e[w]=!0,r.componentWillReact)throw new Error("The componentWillReact life-cycle event is no longer supported");if(e.__proto__!==s)if(r.shouldComponentUpdate){if(r.shouldComponentUpdate!==E)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=E;var n=r.render;if("function"!=typeof n){var o=x(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:l()?n:P.call(this,n)}),this.render()};var i=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=j(this);return r.mounted=!0,f.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction&&!r.reactionInvalidatedBeforeMount||r.forceUpdate(),null==i?void 0:i.apply(this,arguments)},O(r,"componentWillUnmount",(function(){var e;if(!l()){var r=j(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1,r.reactionInvalidatedBeforeMount=!1}})),e}(e):p(e)}function U(){return(U=Object.assign?Object.assign.bind():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 C=["children"],k=c.createContext({});function S(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,C),n=c.useContext(k),o=c.useRef(U({},n,t));return c.createElement(k.Provider,{value:o.current},r)}function M(e,r,t,n){var o,i,a,s=c.forwardRef((function(t,n){var o=U({},t),i=c.useContext(k);return Object.assign(o,e(i||{},o)||{}),n&&(o.ref=n),c.createElement(r,o)}));return n&&(s=A(s)),s.isMobxInjector=!0,o=r,i=s,a=Object.getOwnPropertyNames(Object.getPrototypeOf(o)),Object.getOwnPropertyNames(o).forEach((function(e){b[e]||-1!==a.indexOf(e)||Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(o,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 R(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 I(){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 M(n,e,n.name,!0)}}return function(e){return M(R(r),e,r.join("-"),!1)}}S.displayName="MobXProvider";var D=Number.parseInt(c.version.split(".")[0]),T=!1,N=Symbol("disposeOnUnmountProto"),q=Symbol("disposeOnUnmountInst");function B(){var e=this;[].concat(this[N]||[],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 L(e,r){if(Array.isArray(r))return r.map((function(r){return L(e,r)}));T||(D>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),T=!0);var t=Object.getPrototypeOf(e).constructor,n=Object.getPrototypeOf(e.constructor),o=Object.getPrototypeOf(Object.getPrototypeOf(e));if(t!==c.Component&&t!==c.PureComponent&&n!==c.Component&&n!==c.PureComponent&&o!==c.Component&&o!==c.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[N]||!!e[q];return("string"==typeof r?e[N]||(e[N]=[]):e[q]||(e[q]=[])).push(r),i||O(e,"componentWillUnmount",B),"string"!=typeof r?r:void 0}function W(e){function r(r,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 t((function(){return i=i||"<<anonymous>>",c=c||o,null==n[o]?r?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=r.bind(null,!1);return n.isRequired=r.bind(null,!0),n}function _(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 X(e,r){return W((function(a,c,s,u,l){return t((function(){if(e&&_(a[c])===r.toLowerCase())return null;var t;switch(r){case"Array":t=i;break;case"Object":t=o;break;case"Map":t=n;break;default:throw new Error("Unexpected mobxType: "+r)}var u=a[c];if(!t(u)){var f=function(e){var r=_(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),p=e?" or javascript `"+r.toLowerCase()+"`":"";return new Error("Invalid prop `"+l+"` of type `"+f+"` supplied to `"+s+"`, expected `mobx.Observable"+r+"`"+p+".")}return null}))}))}function F(e,r){return W((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 t((function(){if("function"!=typeof r)return new Error("Property `"+c+"` of component `"+i+"` has invalid PropType notation.");var t=X(e,"Array")(n,o,i,a,c);if(t instanceof Error)return t;for(var s=n[o],l=0;l<s.length;l++)if((t=r.apply(void 0,[s,l,i,a,c+"["+l+"]"].concat(u)))instanceof Error)return t;return null}))}))}var $={observableArray:X(!1,"Array"),observableArrayOf:F.bind(null,!1),observableMap:X(!1,"Map"),observableObject:X(!1,"Object"),arrayOrObservableArray:X(!0,"Array"),arrayOrObservableArrayOf:F.bind(null,!0),objectOrObservableObject:X(!0,"Object")};if(!u)throw new Error("mobx-react requires React to be available");if(!a)throw new Error("mobx-react requires mobx to be available");export{k as MobXProviderContext,$ as PropTypes,S as Provider,L as disposeOnUnmount,I as inject,A as observer};
 //# sourceMappingURL=mobxreact.esm.production.min.js.map

dist/mobxreact.umd.development.js

@@ -157,2 +157,3 @@ (function (global, factory) {
         mounted: false,
+        reactionInvalidatedBeforeMount: false,
         forceUpdate: null,
@@ -230,3 +231,4 @@ name: getDisplayName(component.constructor),
         };
-        if (!admin.reaction) {
+        if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
+          // Missing reaction:
           // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
@@ -237,2 +239,4 @@ // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
           // The reaction will be created lazily by following render.
+          // Reaction invalidated before mount:
+          // 1. A descendant's `componenDidMount` invalidated it's parent #3730
           admin.forceUpdate();
@@ -253,2 +257,3 @@ }
         admin.mounted = false;
+        admin.reactionInvalidatedBeforeMount = false;
       });
@@ -297,3 +302,5 @@ return componentClass;
           // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
-          // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+          // `componenDidMount` runs synchronously after `render`, so unlike functional component, there is no delay during which the reaction could be invalidated.
+          // However `componentDidMount` runs AFTER it's descendants' `componentDidMount`, which CAN invalidate the reaction, see #3730. Therefore remember and forceUpdate on mount.
+          admin.reactionInvalidatedBeforeMount = true;
           return;
@@ -300,0 +307,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;function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$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},c=Symbol("patchMixins"),u=Symbol("patchedDefinition");function s(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 l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];s.call.apply(s,[this,e,r].concat(n))}}function f(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},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[u]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[u]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(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 p=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[p])?r:e[p]={reaction:null,mounted:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function m(e){var t=e.bind(this),o=d(this);return function(){o.reaction||(o.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}}))}(o),o.mounted||n._observerFinalizationRegistry.register(this,o,this));var e=void 0,i=void 0;if(o.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function v(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||!function(e,r){if(i(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])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(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)?function(e){var r=e.prototype;if(e[b]){var o=y(e);throw new Error("The provided component class ("+o+") has already been declared as an observer component.")}if(e[b]=!0,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!==v)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=v;var i=r.render;if("function"!=typeof i){var a=y(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:n.isUsingStaticRendering()?i:m.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,n._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},f(r,"componentWillUnmount",(function(){var e;if(!n.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1}})),e}(e):n.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():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 g=["children"],j=o.createContext({});function w(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,g),n=o.useContext(j),i=o.useRef(O({},n,t));return o.createElement(j.Provider,{value:i.current},r)}function P(e,r,t,n){var i,c,u,s=o.forwardRef((function(t,n){var i=O({},t),a=o.useContext(j);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(s=h(s)),s.isMobxInjector=!0,i=r,c=s,u=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==u.indexOf(e)||Object.defineProperty(c,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 x(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}}w.displayName="MobXProvider";var R=Number.parseInt(o.version.split(".")[0]),S=!1,C=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[C]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(e){function t(t,n,o,i,a,c){for(var u=arguments.length,s=new Array(u>6?u-6:0),l=6;l<u;l++)s[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(s))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function k(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 M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(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 u=n[o];if(!a(u)){var s=function(e){var r=k(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+s+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function T(e,t){return E((function(n,o,i,a,c){for(var u=arguments.length,s=new Array(u>5?u-5:0),l=5;l<u;l++)s[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=M(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var u=n[o],l=0;l<u.length;l++)if((r=t.apply(void 0,[u,l,i,a,c+"["+l+"]"].concat(s)))instanceof Error)return r;return null}))}))}var D={observableArray:M(!1,"Array"),observableArrayOf:T.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:T.bind(null,!0),objectOrObservableObject:M(!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=j,e.PropTypes=D,e.Provider=w,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));S||(R>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),S=!0);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[C]||!!r[U];return("string"==typeof t?r[C]||(r[C]=[]):r[U]||(r[U]=[])).push(t),c||f(r,"componentWillUnmount",A),"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 P(n,e,n.name,!0)}}return function(e){return P(x(r),e,r.join("-"),!1)}},e.observer=h,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;function i(e,r){return e===r?0!==e||1/e==1/r:e!=e&&r!=r}var a={$$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},c=Symbol("patchMixins"),u=Symbol("patchedDefinition");function s(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 l(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];s.call.apply(s,[this,e,r].concat(n))}}function f(e,r,t){var n=function(e,r){var t=e[c]=e[c]||{},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[u]){var i=function e(r,t,n,o,i){var a,c=l(i,o);return(a={})[u]=!0,a.get=function(){return c},a.set=function(i){if(this===r)c=l(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 p=Symbol("ObserverAdministration"),b=Symbol("isMobXReactObserver");function d(e){var r;return null!=(r=e[p])?r:e[p]={reaction:null,mounted:!1,reactionInvalidatedBeforeMount:!1,forceUpdate:null,name:y(e.constructor),state:void 0,props:void 0,context:void 0}}function y(e){return e.displayName||e.name||"<component>"}function m(e){var t=e.bind(this),o=d(this);return function(){o.reaction||(o.reaction=function(e){return new r.Reaction(e.name+".render()",(function(){if(e.mounted)try{null==e.forceUpdate||e.forceUpdate()}catch(t){var r;null==(r=e.reaction)||r.dispose(),e.reaction=null}else e.reactionInvalidatedBeforeMount=!0}))}(o),o.mounted||n._observerFinalizationRegistry.register(this,o,this));var e=void 0,i=void 0;if(o.reaction.track((function(){try{i=r._allowStateChanges(!1,t)}catch(r){e=r}})),e)throw e;return i}}function v(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||!function(e,r){if(i(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])||!i(e[t[o]],r[t[o]]))return!1;return!0}(this.props,e)}function h(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)?function(e){var r=e.prototype;if(e[b]){var o=y(e);throw new Error("The provided component class ("+o+") has already been declared as an observer component.")}if(e[b]=!0,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!==v)throw new Error("It is not allowed to use shouldComponentUpdate in observer based components.")}else r.shouldComponentUpdate=v;var i=r.render;if("function"!=typeof i){var a=y(e);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.")}r.render=function(){return Object.defineProperty(this,"render",{configurable:!1,writable:!1,value:n.isUsingStaticRendering()?i:m.call(this,i)}),this.render()};var c=r.componentDidMount;return r.componentDidMount=function(){var e=this,r=d(this);return r.mounted=!0,n._observerFinalizationRegistry.unregister(r),r.forceUpdate=function(){return e.forceUpdate()},r.reaction&&!r.reactionInvalidatedBeforeMount||r.forceUpdate(),null==c?void 0:c.apply(this,arguments)},f(r,"componentWillUnmount",(function(){var e;if(!n.isUsingStaticRendering()){var r=d(this);null==(e=r.reaction)||e.dispose(),r.reaction=null,r.forceUpdate=null,r.mounted=!1,r.reactionInvalidatedBeforeMount=!1}})),e}(e):n.observer(e)}function O(){return(O=Object.assign?Object.assign.bind():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 g=["children"],j=o.createContext({});function w(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,g),n=o.useContext(j),i=o.useRef(O({},n,t));return o.createElement(j.Provider,{value:i.current},r)}function P(e,r,t,n){var i,c,u,s=o.forwardRef((function(t,n){var i=O({},t),a=o.useContext(j);return Object.assign(i,e(a||{},i)||{}),n&&(i.ref=n),o.createElement(r,i)}));return n&&(s=h(s)),s.isMobxInjector=!0,i=r,c=s,u=Object.getOwnPropertyNames(Object.getPrototypeOf(i)),Object.getOwnPropertyNames(i).forEach((function(e){a[e]||-1!==u.indexOf(e)||Object.defineProperty(c,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 x(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}}w.displayName="MobXProvider";var R=Number.parseInt(o.version.split(".")[0]),S=!1,C=Symbol("disposeOnUnmountProto"),U=Symbol("disposeOnUnmountInst");function A(){var e=this;[].concat(this[C]||[],this[U]||[]).forEach((function(r){var t="string"==typeof r?e[r]:r;null!=t&&(Array.isArray(t)?t.map((function(e){return e()})):t())}))}function E(e){function t(t,n,o,i,a,c){for(var u=arguments.length,s=new Array(u>6?u-6:0),l=6;l<u;l++)s[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(s))}))}var n=t.bind(null,!1);return n.isRequired=t.bind(null,!0),n}function k(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 M(e,t){return E((function(n,o,i,a,c){return r.untracked((function(){if(e&&k(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 u=n[o];if(!a(u)){var s=function(e){var r=k(e);if("object"===r){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return r}(u),l=e?" or javascript `"+t.toLowerCase()+"`":"";return new Error("Invalid prop `"+c+"` of type `"+s+"` supplied to `"+i+"`, expected `mobx.Observable"+t+"`"+l+".")}return null}))}))}function I(e,t){return E((function(n,o,i,a,c){for(var u=arguments.length,s=new Array(u>5?u-5:0),l=5;l<u;l++)s[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=M(e,"Array")(n,o,i,a,c);if(r instanceof Error)return r;for(var u=n[o],l=0;l<u.length;l++)if((r=t.apply(void 0,[u,l,i,a,c+"["+l+"]"].concat(s)))instanceof Error)return r;return null}))}))}var T={observableArray:M(!1,"Array"),observableArrayOf:I.bind(null,!1),observableMap:M(!1,"Map"),observableObject:M(!1,"Object"),arrayOrObservableArray:M(!0,"Array"),arrayOrObservableArrayOf:I.bind(null,!0),objectOrObservableObject:M(!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=j,e.PropTypes=T,e.Provider=w,e.disposeOnUnmount=function e(r,t){if(Array.isArray(t))return t.map((function(t){return e(r,t)}));S||(R>=18?console.error("[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."):console.warn("[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."),S=!0);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[C]||!!r[U];return("string"==typeof t?r[C]||(r[C]=[]):r[U]||(r[U]=[])).push(t),c||f(r,"componentWillUnmount",A),"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 P(n,e,n.name,!0)}}return function(e){return P(x(r),e,r.join("-"),!1)}},e.observer=h,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mobxreact.umd.production.min.js.map

package.json

 {
     "name": "mobx-react",
-    "version": "9.0.0",
+    "version": "9.0.1",
     "description": "React bindings for MobX. Create fully reactive components.",
@@ -39,3 +39,3 @@ "source": "src/index.ts",
     "dependencies": {
-        "mobx-react-lite": "^4.0.3"
+        "mobx-react-lite": "^4.0.4"
     },
@@ -55,4 +55,4 @@ "peerDependencies": {
     "devDependencies": {
-        "mobx": "^6.9.0",
-        "mobx-react-lite": "^4.0.3",
+        "mobx": "^6.10.1",
+        "mobx-react-lite": "^4.0.4",
         "expose-gc": "^1.0.0"
@@ -76,4 +76,4 @@ },
         "test:check": "yarn test:types",
-        "prepublish": "yarn build --target publish"
+        "prepublishOnly": "yarn build --target publish"
     }
 }

README.md

@@ -20,3 +20,3 @@ # mobx-react
 | ----------- | -------------------- | ------------------------ | -------------------------------------------------------------------------------- |
-| v8          | 6.\*                 | >16.8                    | Hooks, React 18.2 in strict mode                                                 |
+| v9          | 6.\*                 | >16.8                    | Hooks, React 18.2 in strict mode                                                 |
 | v7          | 6.\*                 | >16.8 < 18.2             | Hooks                                                                            |
@@ -23,0 +23,0 @@ | v6          | 4.\* / 5.\*          | >16.8 <18                | Hooks                                                                            |

src/observerClass.ts

@@ -31,2 +31,3 @@ import { PureComponent, Component, ComponentClass, ClassAttributes } from "react"
     mounted: boolean // we could use forceUpdate as mounted flag
+    reactionInvalidatedBeforeMount: boolean
     name: string
@@ -46,2 +47,3 @@ // Used only on __DEV__
         mounted: false,
+        reactionInvalidatedBeforeMount: false,
         forceUpdate: null,
@@ -144,3 +146,4 @@ name: getDisplayName(component.constructor as ComponentClass),
 
-        if (!admin.reaction) {
+        if (!admin.reaction || admin.reactionInvalidatedBeforeMount) {
+            // Missing reaction:
             // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
@@ -151,2 +154,6 @@ // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
             // The reaction will be created lazily by following render.
+
+            // Reaction invalidated before mount:
+            // 1. A descendant's `componenDidMount` invalidated it's parent #3730
+
             admin.forceUpdate()
@@ -167,2 +174,3 @@ }
         admin.mounted = false
+        admin.reactionInvalidatedBeforeMount = false
     })
@@ -219,3 +227,5 @@
             // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
-            // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+            // `componenDidMount` runs synchronously after `render`, so unlike functional component, there is no delay during which the reaction could be invalidated.
+            // However `componentDidMount` runs AFTER it's descendants' `componentDidMount`, which CAN invalidate the reaction, see #3730. Therefore remember and forceUpdate on mount.
+            admin.reactionInvalidatedBeforeMount = true
             return
@@ -222,0 +232,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

638547

increased by1.42%

Lines of code

3879

increased by0.99%

Dependency changes

• Updatedmobx-react-lite@^4.0.4