mobx-react-lite - npm Package Compare versions

Comparing version 2.0.0-test.1 to 2.0.0

dist/index.d.ts

 import "./assertEnvironment";
-export { useObservable } from "./useObservable";
-export { useComputed } from "./useComputed";
-export { useDisposable } from "./useDisposable";
 export { isUsingStaticRendering, useStaticRendering } from "./staticRendering";
@@ -12,1 +9,2 @@ export { observer, IObserverOptions } from "./observer";
 export { useLocalStore } from "./useLocalStore";
+export { observerBatching, observerBatchingOptOut, isObserverBatched } from "./observerBatching";

dist/mobxreactlite.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -17,144 +19,140 @@
 
-var warned = false;
-function useObservable(initialValue) {
-  if (!warned) {
-    warned = true; // tslint:disable-next-line: no-console
+var globalIsUsingStaticRendering = false;
+function useStaticRendering(enable) {
+  globalIsUsingStaticRendering = enable;
+}
+function isUsingStaticRendering() {
+  return globalIsUsingStaticRendering;
+}
 
-    console.warn("[mobx-react-lite] useObservable has been deprecated. Use useLocalStore instead.");
-  }
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  var observableRef = React.useRef(null);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  if (!observableRef.current) {
-    observableRef.current = mobx.observable(initialValue);
-  }
+    return target;
+  };
 
-  return observableRef.current;
+  return _extends.apply(this, arguments);
 }
 
-var warned$1 = false;
-function useComputed(func, inputs) {
-  if (inputs === void 0) {
-    inputs = [];
+var observerBatchingConfigured = false;
+var observerBatching = function observerBatching(reactionScheduler) {
+  if (typeof reactionScheduler === "function") {
+    mobx.configure({
+      reactionScheduler: reactionScheduler
+    });
   }
 
-  if (!warned$1) {
-    warned$1 = true; // tslint:disable-next-line: no-console
+  observerBatchingConfigured = true;
+};
+var observerBatchingOptOut = function observerBatchingOptOut() {
+  mobx.configure({
+    reactionScheduler: undefined
+  });
+  observerBatchingConfigured = true;
+};
+var isObserverBatched = function isObserverBatched() {
+  return observerBatchingConfigured;
+};
 
-    console.warn("[mobx-react-lite] useComputed has been deprecated. Use useLocalStore instead.");
-  }
+function printDebugValue(v) {
+  return mobx.getDependencyTree(v);
+}
 
-  var computed = React.useMemo(function () {
-    return mobx.computed(func);
-  }, inputs);
-  return computed.get();
+function createTrackingData(reaction) {
+  var trackingData = {
+    cleanAt: Date.now() + CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS,
+    reaction: reaction
+  };
+  return trackingData;
 }
+/**
+ * The minimum time before we'll clean up a Reaction created in a render
+ * for a component that hasn't managed to run its effects. This needs to
+ * be big enough to ensure that a component won't turn up and have its
+ * effects run without being re-rendered.
+ */
 
-var doNothingDisposer = function doNothingDisposer() {// empty
-};
+var CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS = 10000;
+/**
+ * The frequency with which we'll check for leaked reactions.
+ */
 
-var warned$2 = false;
+var CLEANUP_TIMER_LOOP_MILLIS = 10000;
 /**
- * Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
- * Returns the generated disposer for early disposal.
- *
- * @export
- * @template D
- * @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
- * @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
- * @returns {D}
+ * Reactions created by components that have yet to be fully mounted.
  */
 
-function useDisposable(disposerGenerator, inputs) {
-  if (inputs === void 0) {
-    inputs = [];
-  }
+var uncommittedReactionRefs =
+/*#__PURE__*/
+new Set();
+/**
+ * Latest 'uncommitted reactions' cleanup timer handle.
+ */
 
-  if (!warned$2) {
-    warned$2 = true; // tslint:disable-next-line: no-console
+var reactionCleanupHandle;
 
-    console.warn("[mobx-react-lite] useDisposable has been deprecated. Use React.useEffect instead.");
+function ensureCleanupTimerRunning() {
+  if (reactionCleanupHandle === undefined) {
+    reactionCleanupHandle = setTimeout(cleanUncommittedReactions, CLEANUP_TIMER_LOOP_MILLIS);
   }
+}
 
-  var disposerRef = React.useRef(null);
-  var earlyDisposedRef = React.useRef(false);
-  React.useEffect(function () {
-    return lazyCreateDisposer(false);
-  }, inputs);
+function scheduleCleanupOfReactionIfLeaked(ref) {
+  uncommittedReactionRefs.add(ref);
+  ensureCleanupTimerRunning();
+}
+function recordReactionAsCommitted(reactionRef) {
+  uncommittedReactionRefs.delete(reactionRef);
+}
+/**
+ * Run by the cleanup timer to dispose any outstanding reactions
+ */
 
-  function lazyCreateDisposer(earlyDisposal) {
-    // ensure that we won't create a new disposer if it was early disposed
-    if (earlyDisposedRef.current) {
-      return doNothingDisposer;
-    }
+function cleanUncommittedReactions() {
+  reactionCleanupHandle = undefined; // Loop through all the candidate leaked reactions; those older
+  // than CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS get tidied.
 
-    if (!disposerRef.current) {
-      var newDisposer = disposerGenerator();
+  var now = Date.now();
 
-      if (typeof newDisposer !== "function") {
-        var error = new Error("generated disposer must be a function");
+  for (var _iterator = uncommittedReactionRefs, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+    var _ref;
 
-        {
-          throw error;
-        }
-      }
-
-      disposerRef.current = newDisposer;
+    if (_isArray) {
+      if (_i >= _iterator.length) break;
+      _ref = _iterator[_i++];
+    } else {
+      _i = _iterator.next();
+      if (_i.done) break;
+      _ref = _i.value;
     }
 
-    return function () {
-      if (disposerRef.current) {
-        disposerRef.current();
-        disposerRef.current = null;
-      }
+    var ref = _ref;
+    var tracking = ref.current;
 
-      if (earlyDisposal) {
-        earlyDisposedRef.current = true;
+    if (tracking) {
+      if (now >= tracking.cleanAt) {
+        // It's time to tidy up this leaked reaction.
+        tracking.reaction.dispose();
+        ref.current = null;
+        uncommittedReactionRefs.delete(ref);
       }
-    };
+    }
   }
 
-  return lazyCreateDisposer(true);
-}
-
-var globalIsUsingStaticRendering = false;
-function useStaticRendering(enable) {
-  globalIsUsingStaticRendering = enable;
-}
-function isUsingStaticRendering() {
-  return globalIsUsingStaticRendering;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function printDebugValue(v) {
-  if (!v.current) {
-    return "<unknown>";
+  if (uncommittedReactionRefs.size > 0) {
+    // We've just finished a round of cleanups but there are still
+    // some leak candidates outstanding.
+    ensureCleanupTimerRunning();
   }
-
-  return mobx.getDependencyTree(v.current);
 }
 
-var EMPTY_ARRAY = [];
-function useUnmount(fn) {
-  React.useEffect(function () {
-    return fn;
-  }, EMPTY_ARRAY);
-}
 function useForceUpdate() {
@@ -181,2 +179,8 @@ var _useState = React.useState(0),
 var EMPTY_OBJECT = {};
+
+function observerComponentNameFor(baseComponentName) {
+  return "observer" + baseComponentName;
+}
+
+var warnedAboutBatching = false;
 function useObserver(fn, baseComponentName, options) {
@@ -195,22 +199,72 @@ if (baseComponentName === void 0) {
 
+  if ( !warnedAboutBatching && !isObserverBatched()) {
+    console.warn("[MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching");
+    warnedAboutBatching = true;
+  }
+
   var wantedForceUpdateHook = options.useForceUpdate || useForceUpdate;
-  var forceUpdate = wantedForceUpdateHook();
-  var reaction = React.useRef(null);
+  var forceUpdate = wantedForceUpdateHook(); // StrictMode/ConcurrentMode/Suspense may mean that our component is
+  // rendered and abandoned multiple times, so we need to track leaked
+  // Reactions.
 
-  if (!reaction.current) {
-    reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
-      forceUpdate();
+  var reactionTrackingRef = React__default.useRef(null);
+
+  if (!reactionTrackingRef.current) {
+    // First render for this component (or first time since a previous
+    // reaction from an abandoned render was disposed).
+    var newReaction = new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
+      // Observable has changed, meaning we want to re-render
+      // BUT if we're a component that hasn't yet got to the useEffect()
+      // stage, we might be a component that _started_ to render, but
+      // got dropped, and we don't want to make state changes then.
+      // (It triggers warnings in StrictMode, for a start.)
+      if (trackingData.mounted) {
+        // We have reached useEffect(), so we're mounted, and can trigger an update
+        forceUpdate();
+      } else {
+        // We haven't yet reached useEffect(), so we'll need to trigger a re-render
+        // when (and if) useEffect() arrives.  The easiest way to do that is just to
+        // drop our current reaction and allow useEffect() to recreate it.
+        newReaction.dispose();
+        reactionTrackingRef.current = null;
+      }
     });
+    var trackingData = createTrackingData(newReaction);
+    reactionTrackingRef.current = trackingData;
+    scheduleCleanupOfReactionIfLeaked(reactionTrackingRef);
   }
 
-  var dispose = function dispose() {
-    if (reaction.current && !reaction.current.isDisposed) {
-      reaction.current.dispose();
+  var reaction = reactionTrackingRef.current.reaction;
+  React__default.useDebugValue(reaction, printDebugValue);
+  React__default.useEffect(function () {
+    // Called on first mount only
+    recordReactionAsCommitted(reactionTrackingRef);
+
+    if (reactionTrackingRef.current) {
+      // Great. We've already got our reaction from our render;
+      // all we need to do is to record that it's now mounted,
+      // to allow future observable changes to trigger re-renders
+      reactionTrackingRef.current.mounted = true;
+    } else {
+      // The reaction we set up in our render has been disposed.
+      // This is either due to bad timings of renderings, e.g. our
+      // component was paused for a _very_ long time, and our
+      // reaction got cleaned up, or we got a observable change
+      // between render and useEffect
+      // Re-create the reaction
+      reactionTrackingRef.current = {
+        reaction: new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
+          // We've definitely already been mounted at this point
+          forceUpdate();
+        }),
+        cleanAt: Infinity
+      };
+      forceUpdate();
     }
-  };
 
-  React.useDebugValue(reaction, printDebugValue);
-  useUnmount(function () {
-    dispose();
-  }); // render the original component, but have the
+    return function () {
+      reactionTrackingRef.current.reaction.dispose();
+      reactionTrackingRef.current = null;
+    };
+  }, []); // render the original component, but have the
   // reaction track the observables, so that rendering
@@ -221,3 +275,3 @@ // can be invalidated (see above) once a dependency changes
   var exception;
-  reaction.current.track(function () {
+  reaction.track(function () {
     try {
@@ -231,3 +285,2 @@ rendering = fn();
   if (exception) {
-    dispose();
     throw exception; // re-throw any exceptions catched during rendering
@@ -287,3 +340,3 @@ }
   Object.keys(base).forEach(function (key) {
-    if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
+    if (Reflect.has(base, key) && !hoistBlackList[key]) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
@@ -335,3 +388,3 @@ }
 
-  if (!isPlainObject(current)) {
+  if ( !isPlainObject(current)) {
     throw new Error(culprit + " expects a plain object as " + (usedByLocalStore ? "second" : "first") + " argument");
@@ -347,3 +400,3 @@ }
 
-  if (Object.keys(res).length !== Object.keys(current).length) {
+  if ( Object.keys(res).length !== Object.keys(current).length) {
     throw new Error("the shape of objects passed to " + culprit + " should be stable");
@@ -372,2 +425,3 @@ }
           if (typeof value === "function") {
+            // @ts-ignore No idea why ts2536 is popping out here
             local[key] = wrapInTransaction(value, local);
@@ -396,12 +450,12 @@ }
 exports.Observer = ObserverComponent;
+exports.isObserverBatched = isObserverBatched;
 exports.isUsingStaticRendering = isUsingStaticRendering;
 exports.observer = observer;
+exports.observerBatching = observerBatching;
+exports.observerBatchingOptOut = observerBatchingOptOut;
 exports.useAsObservableSource = useAsObservableSource;
-exports.useComputed = useComputed;
-exports.useDisposable = useDisposable;
 exports.useForceUpdate = useForceUpdate;
 exports.useLocalStore = useLocalStore;
-exports.useObservable = useObservable;
 exports.useObserver = useObserver;
 exports.useStaticRendering = useStaticRendering;
 //# sourceMappingURL=mobxreactlite.cjs.development.js.map

dist/mobxreactlite.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,r=require("mobx"),n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;if(!n.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var o=function(){},u=!1;function c(){return u}function i(){return(i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function f(e){return e.current?r.getDependencyTree(e.current):"<unknown>"}var s=[];function a(){var e=n.useState(0)[1];return n.useCallback(function(){e(function(e){return e+1})},[])}var p={};function l(e,t,o){if(void 0===t&&(t="observed"),void 0===o&&(o=p),c())return e();var u=(o.useForceUpdate||a)(),i=n.useRef(null);i.current||(i.current=new r.Reaction("observer("+t+")",function(){u()}));var l,v,d=function(){i.current&&!i.current.isDisposed&&i.current.dispose()};if(n.useDebugValue(i,f),function(e){n.useEffect(function(){return e},s)}(function(){d()}),i.current.track(function(){try{l=e()}catch(e){v=e}}),v)throw d(),v;return l}var v={$$typeof:!0,render:!0,compare:!0,type:!0};function d(e){var r=e.children||e.render;return"function"!=typeof r?null:l(r)}function b(e,r,n,t,o){var u="function"==typeof e[r],c="function"==typeof e["children"===r?"render":"children"];return u&&c?new Error("MobX Observer: Do not use children and render in the same time in`"+n):u||c?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}function y(e,n){if(!n||void 0!==e){var o=t.useState(function(){return r.observable(e,{},{deep:!1})})[0];return r.runInAction(function(){Object.assign(o,e)}),o}}d.propTypes={children:b,render:b},d.displayName="Observer",exports.Observer=d,exports.isUsingStaticRendering=c,exports.observer=function(e,r){if(c())return e;var t,o,u,f=i({forwardRef:!1},r),s=e.displayName||e.name,a=function(r,n){return l(function(){return e(r,n)},s)};return a.displayName=s,t=n.memo(f.forwardRef?n.forwardRef(a):a),o=e,u=t,Object.keys(o).forEach(function(e){o.hasOwnProperty(e)&&!v[e]&&Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(o,e))}),t.displayName=s,t},exports.useAsObservableSource=function(e){return y(e,!1)},exports.useComputed=function(e,t){return void 0===t&&(t=[]),n.useMemo(function(){return r.computed(e)},t).get()},exports.useDisposable=function(e,r){void 0===r&&(r=[]);var t=n.useRef(null),u=n.useRef(!1);function c(r){if(u.current)return o;if(!t.current){var n=e();if("function"!=typeof n){var c=new Error("generated disposer must be a function");return console.error(c),o}t.current=n}return function(){t.current&&(t.current(),t.current=null),r&&(u.current=!0)}}return n.useEffect(function(){return c(!1)},r),c(!0)},exports.useForceUpdate=a,exports.useLocalStore=function(e,n){var o=y(n,!0);return t.useState(function(){var n=r.observable(e(o));return function(e){if(!n||"object"!=typeof n)return!1;var r=Object.getPrototypeOf(n);return!r||r===Object.prototype}()&&r.runInAction(function(){Object.keys(n).forEach(function(e){var t,o,u=n[e];"function"==typeof u&&(n[e]=(t=u,o=n,function(){for(var e=arguments.length,n=new Array(e),u=0;u<e;u++)n[u]=arguments[u];return r.transaction(function(){return t.apply(o,n)})}))})}),n})[0]},exports.useObservable=function(e){var t=n.useRef(null);return t.current||(t.current=r.observable(e)),t.current},exports.useObserver=l,exports.useStaticRendering=function(e){u=e};
+"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;if(!t.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var o=!1;function u(){return o}function i(){return(i=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 c=!1;function a(e){return r.getDependencyTree(e)}var f,s=new Set;function p(){void 0===f&&(f=setTimeout(l,1e4))}function l(){f=void 0;var e=Date.now(),r=s,t=Array.isArray(r),n=0;for(r=t?r:r[Symbol.iterator]();;){var o;if(t){if(n>=r.length)break;o=r[n++]}else{if((n=r.next()).done)break;o=n.value}var u=o,i=u.current;i&&e>=i.cleanAt&&(i.reaction.dispose(),u.current=null,s.delete(u))}s.size>0&&p()}function d(){var e=t.useState(0)[1];return t.useCallback((function(){e((function(e){return e+1}))}),[])}var v={};function b(e){return"observer"+e}function y(e,t,o){if(void 0===t&&(t="observed"),void 0===o&&(o=v),u())return e();var i=(o.useForceUpdate||d)(),c=n.useRef(null);if(!c.current){var f=new r.Reaction(b(t),(function(){l.mounted?i():(f.dispose(),c.current=null)})),l=function(e){return{cleanAt:Date.now()+1e4,reaction:e}}(f);c.current=l,s.add(c),p()}var y,h,O=c.current.reaction;if(n.useDebugValue(O,a),n.useEffect((function(){return s.delete(c),c.current?c.current.mounted=!0:(c.current={reaction:new r.Reaction(b(t),(function(){i()})),cleanAt:Infinity},i()),function(){c.current.reaction.dispose(),c.current=null}}),[]),O.track((function(){try{y=e()}catch(e){h=e}})),h)throw h;return y}var h={$$typeof:!0,render:!0,compare:!0,type:!0};function O(e){var r=e.children||e.render;return"function"!=typeof r?null:y(r)}function w(e,r,t,n,o){var u="function"==typeof e[r],i="function"==typeof e["children"===r?"render":"children"];return u&&i?new Error("MobX Observer: Do not use children and render in the same time in`"+t):u||i?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+t+"`, expected `function`.")}function m(e,t){if(!t||void 0!==e){var o=n.useState((function(){return r.observable(e,{},{deep:!1})}))[0];return r.runInAction((function(){Object.assign(o,e)})),o}}O.propTypes={children:w,render:w},O.displayName="Observer",exports.Observer=O,exports.isObserverBatched=function(){return c},exports.isUsingStaticRendering=u,exports.observer=function(e,r){if(u())return e;var n,o,c,a=i({forwardRef:!1},r),f=e.displayName||e.name,s=function(r,t){return y((function(){return e(r,t)}),f)};return s.displayName=f,n=t.memo(a.forwardRef?t.forwardRef(s):s),o=e,c=n,Object.keys(o).forEach((function(e){Reflect.has(o,e)&&!h[e]&&Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(o,e))})),n.displayName=f,n},exports.observerBatching=function(e){"function"==typeof e&&r.configure({reactionScheduler:e}),c=!0},exports.observerBatchingOptOut=function(){r.configure({reactionScheduler:void 0}),c=!0},exports.useAsObservableSource=function(e){return m(e,!1)},exports.useForceUpdate=d,exports.useLocalStore=function(e,t){var o=m(t,!0);return n.useState((function(){var t=r.observable(e(o));return function(e){if(!e||"object"!=typeof e)return!1;var r=Object.getPrototypeOf(e);return!r||r===Object.prototype}(t)&&r.runInAction((function(){Object.keys(t).forEach((function(e){var n,o,u=t[e];"function"==typeof u&&(t[e]=(n=u,o=t,function(){for(var e=arguments.length,t=new Array(e),u=0;u<e;u++)t[u]=arguments[u];return r.transaction((function(){return n.apply(o,t)}))}))}))})),t}))[0]},exports.useObserver=y,exports.useStaticRendering=function(e){o=e};
 //# sourceMappingURL=mobxreactlite.cjs.production.min.js.map

dist/mobxreactlite.esm.js

@@ -1,3 +0,3 @@
-import { spy, observable, computed, getDependencyTree, Reaction, runInAction, transaction } from 'mobx';
-import React, { useState, useRef, useMemo, useEffect, useCallback, useDebugValue, memo, forwardRef } from 'react';
+import { spy, configure, getDependencyTree, Reaction, observable, runInAction, transaction } from 'mobx';
+import React, { useState, useCallback, memo, forwardRef } from 'react';
 
@@ -12,148 +12,140 @@ if (!useState) {
 
-var warned = false;
-function useObservable(initialValue) {
-  if (process.env.NODE_ENV !== "production" && !warned) {
-    warned = true; // tslint:disable-next-line: no-console
+var globalIsUsingStaticRendering = false;
+function useStaticRendering(enable) {
+  globalIsUsingStaticRendering = enable;
+}
+function isUsingStaticRendering() {
+  return globalIsUsingStaticRendering;
+}
 
-    console.warn("[mobx-react-lite] useObservable has been deprecated. Use useLocalStore instead.");
-  }
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-  var observableRef = useRef(null);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  if (!observableRef.current) {
-    observableRef.current = observable(initialValue);
-  }
+    return target;
+  };
 
-  return observableRef.current;
+  return _extends.apply(this, arguments);
 }
 
-var warned$1 = false;
-function useComputed(func, inputs) {
-  if (inputs === void 0) {
-    inputs = [];
+var observerBatchingConfigured = false;
+var observerBatching = function observerBatching(reactionScheduler) {
+  if (typeof reactionScheduler === "function") {
+    configure({
+      reactionScheduler: reactionScheduler
+    });
   }
 
-  if (process.env.NODE_ENV !== "production" && !warned$1) {
-    warned$1 = true; // tslint:disable-next-line: no-console
+  observerBatchingConfigured = true;
+};
+var observerBatchingOptOut = function observerBatchingOptOut() {
+  configure({
+    reactionScheduler: undefined
+  });
+  observerBatchingConfigured = true;
+};
+var isObserverBatched = function isObserverBatched() {
+  return observerBatchingConfigured;
+};
 
-    console.warn("[mobx-react-lite] useComputed has been deprecated. Use useLocalStore instead.");
-  }
+function printDebugValue(v) {
+  return getDependencyTree(v);
+}
 
-  var computed$1 = useMemo(function () {
-    return computed(func);
-  }, inputs);
-  return computed$1.get();
+function createTrackingData(reaction) {
+  var trackingData = {
+    cleanAt: Date.now() + CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS,
+    reaction: reaction
+  };
+  return trackingData;
 }
+/**
+ * The minimum time before we'll clean up a Reaction created in a render
+ * for a component that hasn't managed to run its effects. This needs to
+ * be big enough to ensure that a component won't turn up and have its
+ * effects run without being re-rendered.
+ */
 
-var doNothingDisposer = function doNothingDisposer() {// empty
-};
+var CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS = 10000;
+/**
+ * The frequency with which we'll check for leaked reactions.
+ */
 
-var warned$2 = false;
+var CLEANUP_TIMER_LOOP_MILLIS = 10000;
 /**
- * Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
- * Returns the generated disposer for early disposal.
- *
- * @export
- * @template D
- * @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
- * @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
- * @returns {D}
+ * Reactions created by components that have yet to be fully mounted.
  */
 
-function useDisposable(disposerGenerator, inputs) {
-  if (inputs === void 0) {
-    inputs = [];
-  }
+var uncommittedReactionRefs =
+/*#__PURE__*/
+new Set();
+/**
+ * Latest 'uncommitted reactions' cleanup timer handle.
+ */
 
-  if (process.env.NODE_ENV !== "production" && !warned$2) {
-    warned$2 = true; // tslint:disable-next-line: no-console
+var reactionCleanupHandle;
 
-    console.warn("[mobx-react-lite] useDisposable has been deprecated. Use React.useEffect instead.");
+function ensureCleanupTimerRunning() {
+  if (reactionCleanupHandle === undefined) {
+    reactionCleanupHandle = setTimeout(cleanUncommittedReactions, CLEANUP_TIMER_LOOP_MILLIS);
   }
+}
 
-  var disposerRef = useRef(null);
-  var earlyDisposedRef = useRef(false);
-  useEffect(function () {
-    return lazyCreateDisposer(false);
-  }, inputs);
+function scheduleCleanupOfReactionIfLeaked(ref) {
+  uncommittedReactionRefs.add(ref);
+  ensureCleanupTimerRunning();
+}
+function recordReactionAsCommitted(reactionRef) {
+  uncommittedReactionRefs.delete(reactionRef);
+}
+/**
+ * Run by the cleanup timer to dispose any outstanding reactions
+ */
 
-  function lazyCreateDisposer(earlyDisposal) {
-    // ensure that we won't create a new disposer if it was early disposed
-    if (earlyDisposedRef.current) {
-      return doNothingDisposer;
-    }
+function cleanUncommittedReactions() {
+  reactionCleanupHandle = undefined; // Loop through all the candidate leaked reactions; those older
+  // than CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS get tidied.
 
-    if (!disposerRef.current) {
-      var newDisposer = disposerGenerator();
+  var now = Date.now();
 
-      if (typeof newDisposer !== "function") {
-        var error = new Error("generated disposer must be a function");
+  for (var _iterator = uncommittedReactionRefs, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+    var _ref;
 
-        if (process.env.NODE_ENV !== "production") {
-          throw error;
-        } else {
-          // tslint:disable-next-line:no-console
-          console.error(error);
-          return doNothingDisposer;
-        }
-      }
-
-      disposerRef.current = newDisposer;
+    if (_isArray) {
+      if (_i >= _iterator.length) break;
+      _ref = _iterator[_i++];
+    } else {
+      _i = _iterator.next();
+      if (_i.done) break;
+      _ref = _i.value;
     }
 
-    return function () {
-      if (disposerRef.current) {
-        disposerRef.current();
-        disposerRef.current = null;
-      }
+    var ref = _ref;
+    var tracking = ref.current;
 
-      if (earlyDisposal) {
-        earlyDisposedRef.current = true;
+    if (tracking) {
+      if (now >= tracking.cleanAt) {
+        // It's time to tidy up this leaked reaction.
+        tracking.reaction.dispose();
+        ref.current = null;
+        uncommittedReactionRefs.delete(ref);
       }
-    };
+    }
   }
 
-  return lazyCreateDisposer(true);
-}
-
-var globalIsUsingStaticRendering = false;
-function useStaticRendering(enable) {
-  globalIsUsingStaticRendering = enable;
-}
-function isUsingStaticRendering() {
-  return globalIsUsingStaticRendering;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function printDebugValue(v) {
-  if (!v.current) {
-    return "<unknown>";
+  if (uncommittedReactionRefs.size > 0) {
+    // We've just finished a round of cleanups but there are still
+    // some leak candidates outstanding.
+    ensureCleanupTimerRunning();
   }
-
-  return getDependencyTree(v.current);
 }
 
-var EMPTY_ARRAY = [];
-function useUnmount(fn) {
-  useEffect(function () {
-    return fn;
-  }, EMPTY_ARRAY);
-}
 function useForceUpdate() {
@@ -180,2 +172,8 @@ var _useState = useState(0),
 var EMPTY_OBJECT = {};
+
+function observerComponentNameFor(baseComponentName) {
+  return "observer" + baseComponentName;
+}
+
+var warnedAboutBatching = false;
 function useObserver(fn, baseComponentName, options) {
@@ -194,22 +192,72 @@ if (baseComponentName === void 0) {
 
+  if (process.env.NODE_ENV !== "production" && !warnedAboutBatching && !isObserverBatched()) {
+    console.warn("[MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching");
+    warnedAboutBatching = true;
+  }
+
   var wantedForceUpdateHook = options.useForceUpdate || useForceUpdate;
-  var forceUpdate = wantedForceUpdateHook();
-  var reaction = useRef(null);
+  var forceUpdate = wantedForceUpdateHook(); // StrictMode/ConcurrentMode/Suspense may mean that our component is
+  // rendered and abandoned multiple times, so we need to track leaked
+  // Reactions.
 
-  if (!reaction.current) {
-    reaction.current = new Reaction("observer(" + baseComponentName + ")", function () {
-      forceUpdate();
+  var reactionTrackingRef = React.useRef(null);
+
+  if (!reactionTrackingRef.current) {
+    // First render for this component (or first time since a previous
+    // reaction from an abandoned render was disposed).
+    var newReaction = new Reaction(observerComponentNameFor(baseComponentName), function () {
+      // Observable has changed, meaning we want to re-render
+      // BUT if we're a component that hasn't yet got to the useEffect()
+      // stage, we might be a component that _started_ to render, but
+      // got dropped, and we don't want to make state changes then.
+      // (It triggers warnings in StrictMode, for a start.)
+      if (trackingData.mounted) {
+        // We have reached useEffect(), so we're mounted, and can trigger an update
+        forceUpdate();
+      } else {
+        // We haven't yet reached useEffect(), so we'll need to trigger a re-render
+        // when (and if) useEffect() arrives.  The easiest way to do that is just to
+        // drop our current reaction and allow useEffect() to recreate it.
+        newReaction.dispose();
+        reactionTrackingRef.current = null;
+      }
     });
+    var trackingData = createTrackingData(newReaction);
+    reactionTrackingRef.current = trackingData;
+    scheduleCleanupOfReactionIfLeaked(reactionTrackingRef);
   }
 
-  var dispose = function dispose() {
-    if (reaction.current && !reaction.current.isDisposed) {
-      reaction.current.dispose();
+  var reaction = reactionTrackingRef.current.reaction;
+  React.useDebugValue(reaction, printDebugValue);
+  React.useEffect(function () {
+    // Called on first mount only
+    recordReactionAsCommitted(reactionTrackingRef);
+
+    if (reactionTrackingRef.current) {
+      // Great. We've already got our reaction from our render;
+      // all we need to do is to record that it's now mounted,
+      // to allow future observable changes to trigger re-renders
+      reactionTrackingRef.current.mounted = true;
+    } else {
+      // The reaction we set up in our render has been disposed.
+      // This is either due to bad timings of renderings, e.g. our
+      // component was paused for a _very_ long time, and our
+      // reaction got cleaned up, or we got a observable change
+      // between render and useEffect
+      // Re-create the reaction
+      reactionTrackingRef.current = {
+        reaction: new Reaction(observerComponentNameFor(baseComponentName), function () {
+          // We've definitely already been mounted at this point
+          forceUpdate();
+        }),
+        cleanAt: Infinity
+      };
+      forceUpdate();
     }
-  };
 
-  useDebugValue(reaction, printDebugValue);
-  useUnmount(function () {
-    dispose();
-  }); // render the original component, but have the
+    return function () {
+      reactionTrackingRef.current.reaction.dispose();
+      reactionTrackingRef.current = null;
+    };
+  }, []); // render the original component, but have the
   // reaction track the observables, so that rendering
@@ -220,3 +268,3 @@ // can be invalidated (see above) once a dependency changes
   var exception;
-  reaction.current.track(function () {
+  reaction.track(function () {
     try {
@@ -230,3 +278,2 @@ rendering = fn();
   if (exception) {
-    dispose();
     throw exception; // re-throw any exceptions catched during rendering
@@ -286,3 +333,3 @@ }
   Object.keys(base).forEach(function (key) {
-    if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
+    if (Reflect.has(base, key) && !hoistBlackList[key]) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
@@ -369,2 +416,3 @@ }
           if (typeof value === "function") {
+            // @ts-ignore No idea why ts2536 is popping out here
             local[key] = wrapInTransaction(value, local);
@@ -392,3 +440,3 @@ }
 
-export { ObserverComponent as Observer, isUsingStaticRendering, observer, useAsObservableSource, useComputed, useDisposable, useForceUpdate, useLocalStore, useObservable, useObserver, useStaticRendering };
+export { ObserverComponent as Observer, isObserverBatched, isUsingStaticRendering, observer, observerBatching, observerBatchingOptOut, useAsObservableSource, useForceUpdate, useLocalStore, useObserver, useStaticRendering };
 //# sourceMappingURL=mobxreactlite.esm.js.map

dist/mobxreactlite.umd.development.js

@@ -5,3 +5,3 @@ (function (global, factory) {
     (global = global || self, factory(global.mobxReactLite = {}, global.mobx, global.React));
-}(this, function (exports, mobx, React) { 'use strict';
+}(this, (function (exports, mobx, React) { 'use strict';
 
@@ -18,144 +18,140 @@ var React__default = 'default' in React ? React['default'] : React;
 
-    var warned = false;
-    function useObservable(initialValue) {
-      if (!warned) {
-        warned = true; // tslint:disable-next-line: no-console
+    var globalIsUsingStaticRendering = false;
+    function useStaticRendering(enable) {
+      globalIsUsingStaticRendering = enable;
+    }
+    function isUsingStaticRendering() {
+      return globalIsUsingStaticRendering;
+    }
 
-        console.warn("[mobx-react-lite] useObservable has been deprecated. Use useLocalStore instead.");
-      }
+    function _extends() {
+      _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
 
-      var observableRef = React.useRef(null);
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
+          }
+        }
 
-      if (!observableRef.current) {
-        observableRef.current = mobx.observable(initialValue);
-      }
+        return target;
+      };
 
-      return observableRef.current;
+      return _extends.apply(this, arguments);
     }
 
-    var warned$1 = false;
-    function useComputed(func, inputs) {
-      if (inputs === void 0) {
-        inputs = [];
+    var observerBatchingConfigured = false;
+    var observerBatching = function observerBatching(reactionScheduler) {
+      if (typeof reactionScheduler === "function") {
+        mobx.configure({
+          reactionScheduler: reactionScheduler
+        });
       }
 
-      if (!warned$1) {
-        warned$1 = true; // tslint:disable-next-line: no-console
+      observerBatchingConfigured = true;
+    };
+    var observerBatchingOptOut = function observerBatchingOptOut() {
+      mobx.configure({
+        reactionScheduler: undefined
+      });
+      observerBatchingConfigured = true;
+    };
+    var isObserverBatched = function isObserverBatched() {
+      return observerBatchingConfigured;
+    };
 
-        console.warn("[mobx-react-lite] useComputed has been deprecated. Use useLocalStore instead.");
-      }
+    function printDebugValue(v) {
+      return mobx.getDependencyTree(v);
+    }
 
-      var computed = React.useMemo(function () {
-        return mobx.computed(func);
-      }, inputs);
-      return computed.get();
+    function createTrackingData(reaction) {
+      var trackingData = {
+        cleanAt: Date.now() + CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS,
+        reaction: reaction
+      };
+      return trackingData;
     }
+    /**
+     * The minimum time before we'll clean up a Reaction created in a render
+     * for a component that hasn't managed to run its effects. This needs to
+     * be big enough to ensure that a component won't turn up and have its
+     * effects run without being re-rendered.
+     */
 
-    var doNothingDisposer = function doNothingDisposer() {// empty
-    };
+    var CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS = 10000;
+    /**
+     * The frequency with which we'll check for leaked reactions.
+     */
 
-    var warned$2 = false;
+    var CLEANUP_TIMER_LOOP_MILLIS = 10000;
     /**
-     * Adds an observable effect (reaction, autorun, or anything else that returns a disposer) that will be registered upon component creation and disposed upon unmounting.
-     * Returns the generated disposer for early disposal.
-     *
-     * @export
-     * @template D
-     * @param {() => D} disposerGenerator A function that returns the disposer of the wanted effect.
-     * @param {ReadonlyArray<any>} [inputs=[]] If you want the effect to be automatically re-created when some variable(s) are changed then pass them in this array.
-     * @returns {D}
+     * Reactions created by components that have yet to be fully mounted.
      */
 
-    function useDisposable(disposerGenerator, inputs) {
-      if (inputs === void 0) {
-        inputs = [];
-      }
+    var uncommittedReactionRefs =
+    /*#__PURE__*/
+    new Set();
+    /**
+     * Latest 'uncommitted reactions' cleanup timer handle.
+     */
 
-      if (!warned$2) {
-        warned$2 = true; // tslint:disable-next-line: no-console
+    var reactionCleanupHandle;
 
-        console.warn("[mobx-react-lite] useDisposable has been deprecated. Use React.useEffect instead.");
+    function ensureCleanupTimerRunning() {
+      if (reactionCleanupHandle === undefined) {
+        reactionCleanupHandle = setTimeout(cleanUncommittedReactions, CLEANUP_TIMER_LOOP_MILLIS);
       }
+    }
 
-      var disposerRef = React.useRef(null);
-      var earlyDisposedRef = React.useRef(false);
-      React.useEffect(function () {
-        return lazyCreateDisposer(false);
-      }, inputs);
+    function scheduleCleanupOfReactionIfLeaked(ref) {
+      uncommittedReactionRefs.add(ref);
+      ensureCleanupTimerRunning();
+    }
+    function recordReactionAsCommitted(reactionRef) {
+      uncommittedReactionRefs.delete(reactionRef);
+    }
+    /**
+     * Run by the cleanup timer to dispose any outstanding reactions
+     */
 
-      function lazyCreateDisposer(earlyDisposal) {
-        // ensure that we won't create a new disposer if it was early disposed
-        if (earlyDisposedRef.current) {
-          return doNothingDisposer;
-        }
+    function cleanUncommittedReactions() {
+      reactionCleanupHandle = undefined; // Loop through all the candidate leaked reactions; those older
+      // than CLEANUP_LEAKED_REACTIONS_AFTER_MILLIS get tidied.
 
-        if (!disposerRef.current) {
-          var newDisposer = disposerGenerator();
+      var now = Date.now();
 
-          if (typeof newDisposer !== "function") {
-            var error = new Error("generated disposer must be a function");
+      for (var _iterator = uncommittedReactionRefs, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref;
 
-            {
-              throw error;
-            }
-          }
-
-          disposerRef.current = newDisposer;
+        if (_isArray) {
+          if (_i >= _iterator.length) break;
+          _ref = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) break;
+          _ref = _i.value;
         }
 
-        return function () {
-          if (disposerRef.current) {
-            disposerRef.current();
-            disposerRef.current = null;
-          }
+        var ref = _ref;
+        var tracking = ref.current;
 
-          if (earlyDisposal) {
-            earlyDisposedRef.current = true;
+        if (tracking) {
+          if (now >= tracking.cleanAt) {
+            // It's time to tidy up this leaked reaction.
+            tracking.reaction.dispose();
+            ref.current = null;
+            uncommittedReactionRefs.delete(ref);
           }
-        };
+        }
       }
 
-      return lazyCreateDisposer(true);
-    }
-
-    var globalIsUsingStaticRendering = false;
-    function useStaticRendering(enable) {
-      globalIsUsingStaticRendering = enable;
-    }
-    function isUsingStaticRendering() {
-      return globalIsUsingStaticRendering;
-    }
-
-    function _extends() {
-      _extends = Object.assign || function (target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-
-          for (var key in source) {
-            if (Object.prototype.hasOwnProperty.call(source, key)) {
-              target[key] = source[key];
-            }
-          }
-        }
-
-        return target;
-      };
-
-      return _extends.apply(this, arguments);
-    }
-
-    function printDebugValue(v) {
-      if (!v.current) {
-        return "<unknown>";
+      if (uncommittedReactionRefs.size > 0) {
+        // We've just finished a round of cleanups but there are still
+        // some leak candidates outstanding.
+        ensureCleanupTimerRunning();
       }
-
-      return mobx.getDependencyTree(v.current);
     }
 
-    var EMPTY_ARRAY = [];
-    function useUnmount(fn) {
-      React.useEffect(function () {
-        return fn;
-      }, EMPTY_ARRAY);
-    }
     function useForceUpdate() {
@@ -182,2 +178,8 @@ var _useState = React.useState(0),
     var EMPTY_OBJECT = {};
+
+    function observerComponentNameFor(baseComponentName) {
+      return "observer" + baseComponentName;
+    }
+
+    var warnedAboutBatching = false;
     function useObserver(fn, baseComponentName, options) {
@@ -196,22 +198,72 @@ if (baseComponentName === void 0) {
 
+      if ( !warnedAboutBatching && !isObserverBatched()) {
+        console.warn("[MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching");
+        warnedAboutBatching = true;
+      }
+
       var wantedForceUpdateHook = options.useForceUpdate || useForceUpdate;
-      var forceUpdate = wantedForceUpdateHook();
-      var reaction = React.useRef(null);
+      var forceUpdate = wantedForceUpdateHook(); // StrictMode/ConcurrentMode/Suspense may mean that our component is
+      // rendered and abandoned multiple times, so we need to track leaked
+      // Reactions.
 
-      if (!reaction.current) {
-        reaction.current = new mobx.Reaction("observer(" + baseComponentName + ")", function () {
-          forceUpdate();
+      var reactionTrackingRef = React__default.useRef(null);
+
+      if (!reactionTrackingRef.current) {
+        // First render for this component (or first time since a previous
+        // reaction from an abandoned render was disposed).
+        var newReaction = new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
+          // Observable has changed, meaning we want to re-render
+          // BUT if we're a component that hasn't yet got to the useEffect()
+          // stage, we might be a component that _started_ to render, but
+          // got dropped, and we don't want to make state changes then.
+          // (It triggers warnings in StrictMode, for a start.)
+          if (trackingData.mounted) {
+            // We have reached useEffect(), so we're mounted, and can trigger an update
+            forceUpdate();
+          } else {
+            // We haven't yet reached useEffect(), so we'll need to trigger a re-render
+            // when (and if) useEffect() arrives.  The easiest way to do that is just to
+            // drop our current reaction and allow useEffect() to recreate it.
+            newReaction.dispose();
+            reactionTrackingRef.current = null;
+          }
         });
+        var trackingData = createTrackingData(newReaction);
+        reactionTrackingRef.current = trackingData;
+        scheduleCleanupOfReactionIfLeaked(reactionTrackingRef);
       }
 
-      var dispose = function dispose() {
-        if (reaction.current && !reaction.current.isDisposed) {
-          reaction.current.dispose();
+      var reaction = reactionTrackingRef.current.reaction;
+      React__default.useDebugValue(reaction, printDebugValue);
+      React__default.useEffect(function () {
+        // Called on first mount only
+        recordReactionAsCommitted(reactionTrackingRef);
+
+        if (reactionTrackingRef.current) {
+          // Great. We've already got our reaction from our render;
+          // all we need to do is to record that it's now mounted,
+          // to allow future observable changes to trigger re-renders
+          reactionTrackingRef.current.mounted = true;
+        } else {
+          // The reaction we set up in our render has been disposed.
+          // This is either due to bad timings of renderings, e.g. our
+          // component was paused for a _very_ long time, and our
+          // reaction got cleaned up, or we got a observable change
+          // between render and useEffect
+          // Re-create the reaction
+          reactionTrackingRef.current = {
+            reaction: new mobx.Reaction(observerComponentNameFor(baseComponentName), function () {
+              // We've definitely already been mounted at this point
+              forceUpdate();
+            }),
+            cleanAt: Infinity
+          };
+          forceUpdate();
         }
-      };
 
-      React.useDebugValue(reaction, printDebugValue);
-      useUnmount(function () {
-        dispose();
-      }); // render the original component, but have the
+        return function () {
+          reactionTrackingRef.current.reaction.dispose();
+          reactionTrackingRef.current = null;
+        };
+      }, []); // render the original component, but have the
       // reaction track the observables, so that rendering
@@ -222,3 +274,3 @@ // can be invalidated (see above) once a dependency changes
       var exception;
-      reaction.current.track(function () {
+      reaction.track(function () {
         try {
@@ -232,3 +284,2 @@ rendering = fn();
       if (exception) {
-        dispose();
         throw exception; // re-throw any exceptions catched during rendering
@@ -288,3 +339,3 @@ }
       Object.keys(base).forEach(function (key) {
-        if (base.hasOwnProperty(key) && !hoistBlackList[key]) {
+        if (Reflect.has(base, key) && !hoistBlackList[key]) {
           Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(base, key));
@@ -336,3 +387,3 @@ }
 
-      if (!isPlainObject(current)) {
+      if ( !isPlainObject(current)) {
         throw new Error(culprit + " expects a plain object as " + (usedByLocalStore ? "second" : "first") + " argument");
@@ -348,3 +399,3 @@ }
 
-      if (Object.keys(res).length !== Object.keys(current).length) {
+      if ( Object.keys(res).length !== Object.keys(current).length) {
         throw new Error("the shape of objects passed to " + culprit + " should be stable");
@@ -373,2 +424,3 @@ }
               if (typeof value === "function") {
+                // @ts-ignore No idea why ts2536 is popping out here
                 local[key] = wrapInTransaction(value, local);
@@ -397,14 +449,16 @@ }
     exports.Observer = ObserverComponent;
+    exports.isObserverBatched = isObserverBatched;
     exports.isUsingStaticRendering = isUsingStaticRendering;
     exports.observer = observer;
+    exports.observerBatching = observerBatching;
+    exports.observerBatchingOptOut = observerBatchingOptOut;
     exports.useAsObservableSource = useAsObservableSource;
-    exports.useComputed = useComputed;
-    exports.useDisposable = useDisposable;
     exports.useForceUpdate = useForceUpdate;
     exports.useLocalStore = useLocalStore;
-    exports.useObservable = useObservable;
     exports.useObserver = useObserver;
     exports.useStaticRendering = useStaticRendering;
 
-}));
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
 //# sourceMappingURL=mobxreactlite.umd.development.js.map

dist/mobxreactlite.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r((e=e||self).mobxReactLite={},e.mobx,e.React)}(this,function(e,r,n){"use strict";var t="default"in n?n.default:n;if(!n.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var u=function(){},o=!1;function c(){return o}function i(){return(i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function f(e){return e.current?r.getDependencyTree(e.current):"<unknown>"}var a=[];function s(){var e=n.useState(0)[1];return n.useCallback(function(){e(function(e){return e+1})},[])}var p={};function d(e,t,u){if(void 0===t&&(t="observed"),void 0===u&&(u=p),c())return e();var o=(u.useForceUpdate||s)(),i=n.useRef(null);i.current||(i.current=new r.Reaction("observer("+t+")",function(){o()}));var d,l,v=function(){i.current&&!i.current.isDisposed&&i.current.dispose()};if(n.useDebugValue(i,f),function(e){n.useEffect(function(){return e},a)}(function(){v()}),i.current.track(function(){try{d=e()}catch(e){l=e}}),l)throw v(),l;return d}var l={$$typeof:!0,render:!0,compare:!0,type:!0};function v(e){var r=e.children||e.render;return"function"!=typeof r?null:d(r)}function b(e,r,n,t,u){var o="function"==typeof e[r],c="function"==typeof e["children"===r?"render":"children"];return o&&c?new Error("MobX Observer: Do not use children and render in the same time in`"+n):o||c?null:new Error("Invalid prop `"+u+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}function y(e,n){if(!n||void 0!==e){var u=t.useState(function(){return r.observable(e,{},{deep:!1})})[0];return r.runInAction(function(){Object.assign(u,e)}),u}}v.propTypes={children:b,render:b},v.displayName="Observer",e.Observer=v,e.isUsingStaticRendering=c,e.observer=function(e,r){if(c())return e;var t,u,o,f=i({forwardRef:!1},r),a=e.displayName||e.name,s=function(r,n){return d(function(){return e(r,n)},a)};return s.displayName=a,t=n.memo(f.forwardRef?n.forwardRef(s):s),u=e,o=t,Object.keys(u).forEach(function(e){u.hasOwnProperty(e)&&!l[e]&&Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(u,e))}),t.displayName=a,t},e.useAsObservableSource=function(e){return y(e,!1)},e.useComputed=function(e,t){return void 0===t&&(t=[]),n.useMemo(function(){return r.computed(e)},t).get()},e.useDisposable=function(e,r){void 0===r&&(r=[]);var t=n.useRef(null),o=n.useRef(!1);function c(r){if(o.current)return u;if(!t.current){var n=e();if("function"!=typeof n){var c=new Error("generated disposer must be a function");return console.error(c),u}t.current=n}return function(){t.current&&(t.current(),t.current=null),r&&(o.current=!0)}}return n.useEffect(function(){return c(!1)},r),c(!0)},e.useForceUpdate=s,e.useLocalStore=function(e,n){var u=y(n,!0);return t.useState(function(){var n=r.observable(e(u));return function(e){if(!n||"object"!=typeof n)return!1;var r=Object.getPrototypeOf(n);return!r||r===Object.prototype}()&&r.runInAction(function(){Object.keys(n).forEach(function(e){var t,u,o=n[e];"function"==typeof o&&(n[e]=(t=o,u=n,function(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];return r.transaction(function(){return t.apply(u,n)})}))})}),n})[0]},e.useObservable=function(e){var t=n.useRef(null);return t.current||(t.current=r.observable(e)),t.current},e.useObserver=d,e.useStaticRendering=function(e){o=e}});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("mobx"),require("react")):"function"==typeof define&&define.amd?define(["exports","mobx","react"],r):r((e=e||self).mobxReactLite={},e.mobx,e.React)}(this,(function(e,r,n){"use strict";var t="default"in n?n.default:n;if(!n.useState)throw new Error("mobx-react-lite requires React with Hooks support");if(!r.spy)throw new Error("mobx-react-lite requires mobx at least version 4 to be available");var o=!1;function i(){return o}function u(){return(u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var c=!1;function a(e){return r.getDependencyTree(e)}var f,s=new Set;function d(){void 0===f&&(f=setTimeout(l,1e4))}function l(){f=void 0;var e=Date.now(),r=s,n=Array.isArray(r),t=0;for(r=n?r:r[Symbol.iterator]();;){var o;if(n){if(t>=r.length)break;o=r[t++]}else{if((t=r.next()).done)break;o=t.value}var i=o,u=i.current;u&&e>=u.cleanAt&&(u.reaction.dispose(),i.current=null,s.delete(i))}s.size>0&&d()}function p(){var e=n.useState(0)[1];return n.useCallback((function(){e((function(e){return e+1}))}),[])}var v={};function b(e){return"observer"+e}function y(e,n,o){if(void 0===n&&(n="observed"),void 0===o&&(o=v),i())return e();var u=(o.useForceUpdate||p)(),c=t.useRef(null);if(!c.current){var f=new r.Reaction(b(n),(function(){l.mounted?u():(f.dispose(),c.current=null)})),l=function(e){return{cleanAt:Date.now()+1e4,reaction:e}}(f);c.current=l,s.add(c),d()}var y,h,m=c.current.reaction;if(t.useDebugValue(m,a),t.useEffect((function(){return s.delete(c),c.current?c.current.mounted=!0:(c.current={reaction:new r.Reaction(b(n),(function(){u()})),cleanAt:Infinity},u()),function(){c.current.reaction.dispose(),c.current=null}}),[]),m.track((function(){try{y=e()}catch(e){h=e}})),h)throw h;return y}var h={$$typeof:!0,render:!0,compare:!0,type:!0};function m(e){var r=e.children||e.render;return"function"!=typeof r?null:y(r)}function O(e,r,n,t,o){var i="function"==typeof e[r],u="function"==typeof e["children"===r?"render":"children"];return i&&u?new Error("MobX Observer: Do not use children and render in the same time in`"+n):i||u?null:new Error("Invalid prop `"+o+"` of type `"+typeof e[r]+"` supplied to `"+n+"`, expected `function`.")}function w(e,n){if(!n||void 0!==e){var o=t.useState((function(){return r.observable(e,{},{deep:!1})}))[0];return r.runInAction((function(){Object.assign(o,e)})),o}}m.propTypes={children:O,render:O},m.displayName="Observer",e.Observer=m,e.isObserverBatched=function(){return c},e.isUsingStaticRendering=i,e.observer=function(e,r){if(i())return e;var t,o,c,a=u({forwardRef:!1},r),f=e.displayName||e.name,s=function(r,n){return y((function(){return e(r,n)}),f)};return s.displayName=f,t=n.memo(a.forwardRef?n.forwardRef(s):s),o=e,c=t,Object.keys(o).forEach((function(e){Reflect.has(o,e)&&!h[e]&&Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(o,e))})),t.displayName=f,t},e.observerBatching=function(e){"function"==typeof e&&r.configure({reactionScheduler:e}),c=!0},e.observerBatchingOptOut=function(){r.configure({reactionScheduler:void 0}),c=!0},e.useAsObservableSource=function(e){return w(e,!1)},e.useForceUpdate=p,e.useLocalStore=function(e,n){var o=w(n,!0);return t.useState((function(){var n=r.observable(e(o));return function(e){if(!e||"object"!=typeof e)return!1;var r=Object.getPrototypeOf(e);return!r||r===Object.prototype}(n)&&r.runInAction((function(){Object.keys(n).forEach((function(e){var t,o,i=n[e];"function"==typeof i&&(n[e]=(t=i,o=n,function(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];return r.transaction((function(){return t.apply(o,n)}))}))}))})),n}))[0]},e.useObserver=y,e.useStaticRendering=function(e){o=e},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mobxreactlite.umd.production.min.js.map

dist/observer.d.ts

@@ -9,1 +9,4 @@ /// <reference types="react" />
 export declare function observer<P extends object>(baseComponent: React.FunctionComponent<P>, options?: IObserverOptions): React.FunctionComponent<P>;
+export declare function observer<C extends React.FunctionComponent<any> | React.RefForwardingComponent<any>, Options extends IObserverOptions>(baseComponent: C, options?: Options): Options extends {
+    forwardRef: true;
+} ? C extends React.RefForwardingComponent<infer TRef, infer P> ? C & React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<TRef>>> : never : C & React.FunctionComponent;

dist/ObserverComponent.d.ts

@@ -1,7 +0,7 @@
-import { ReactElement } from "react";
+/// <reference types="react" />
 interface IObserverProps {
-    children?(): ReactElement<any>;
-    render?(): ReactElement<any>;
+    children?(): React.ReactElement<any>;
+    render?(): React.ReactElement<any>;
 }
-declare function ObserverComponent({ children, render }: IObserverProps): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;
+declare function ObserverComponent({ children, render }: IObserverProps): import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;
 declare namespace ObserverComponent {
@@ -8,0 +8,0 @@ var propTypes: {

dist/printDebugValue.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 import { Reaction } from "mobx";
-export declare function printDebugValue(v: React.MutableRefObject<Reaction | null>): "<unknown>" | import("mobx").IDependencyTree;
+export declare function printDebugValue(v: Reaction): import("mobx").IDependencyTree;

package.json

 {
   "name": "mobx-react-lite",
-  "version": "2.0.0-test.1",
+  "version": "2.0.0",
   "description": "Lightweight React bindings for MobX based on React 16.8 and Hooks",
@@ -11,2 +11,4 @@ "main": "dist/index.js",
   "unpkg": "dist/mobxreactlite.umd.production.min.js",
+  "react-native": "dist/mobxreactlite.esm.js",
+  "sideEffects": false,
   "repository": {
@@ -16,12 +18,19 @@ "type": "git",
   },
+  "files": [
+    "dist/*",
+    "batching*"
+  ],
   "scripts": {
-    "prettier": "prettier --write \"**/*.js\" \"**/*.ts\"",
-    "lint": "tslint --project .",
+    "prettier": "prettier --write \"./{src,test}/*.{js,ts,tsx}\"",
+    "lint": "eslint . --ext .js,.ts,.tsx",
     "validate": "tsc --noEmit",
     "test": "jest --watch",
-    "test:travis": "yarn validate && yarn lint && yarn coverage",
+    "test:ci": "jest -i --coverage",
+    "size": "size-limit",
     "coverage": "jest --coverage",
     "prebuild": "rimraf dist",
-    "build": "tsdx build --name mobxReactLite --format=cjs,esm,umd",
-    "prepublishOnly": "yarn build"
+    "build": "yarn bundle",
+    "bundle": "tsdx build --name mobxReactLite --format=cjs,esm,umd --tsconfig tsconfig.build.json",
+    "prepublishOnly": "yarn build",
+    "dedup": "npx yarn-deduplicate -s fewer yarn.lock"
   },
@@ -39,27 +48,33 @@ "author": "Daniel K.",
   "devDependencies": {
-    "@testing-library/react": "8.0.4",
-    "@testing-library/react-hooks": "1.0.4",
-    "@types/jest": "24.0.15",
-    "@types/node": "12.0.10",
-    "@types/react": "16.8.22",
-    "@types/react-dom": "16.8.4",
-    "coveralls": "3.0.4",
-    "husky": "2.5.0",
-    "jest": "24.8.0",
-    "jest-dom": "3.5.0",
-    "jest-environment-jsdom": "24.8.0",
+    "@babel/core": "7.8.4",
+    "@babel/preset-env": "7.8.4",
+    "@size-limit/preset-small-lib": "2.1.6",
+    "@size-limit/time": "2.1.6",
+    "@testing-library/jest-dom": "4.1.2",
+    "@testing-library/react": "9.3.0",
+    "@testing-library/react-hooks": "1.1.0",
+    "@types/jest": "24.0.19",
+    "@types/node": "12.7.12",
+    "@types/react": "16.9.6",
+    "@types/react-dom": "16.9.2",
+    "@typescript-eslint/eslint-plugin": "^2.19.2",
+    "@typescript-eslint/parser": "^2.19.2",
+    "coveralls": "3.0.7",
+    "eslint": "^6.1.0",
+    "eslint-plugin-react": "^7.18.3",
+    "husky": "3.0.9",
+    "jest": "24.9.0",
+    "jest-environment-jsdom": "24.9.0",
     "jest-mock-console": "1.0.0",
-    "lint-staged": "8.2.1",
-    "lodash": "4.17.11",
-    "mobx": "5.10.1",
-    "prettier": "1.18.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "16.8.6",
-    "rimraf": "2.6.3",
-    "ts-jest": "24.0.2",
-    "tsdx": "0.7.2",
-    "tslint": "5.18.0",
-    "tslint-config-prettier": "1.18.0",
-    "typescript": "3.4.5"
+    "lint-staged": "9.4.2",
+    "mobx": "5.14.0",
+    "prettier": "^1.19.1",
+    "react": "16.10.2",
+    "react-dom": "16.10.2",
+    "react-test-renderer": "16.10.2",
+    "rimraf": "3.0.0",
+    "shx": "0.3.2",
+    "ts-jest": "24.1.0",
+    "tsdx": "0.12.3",
+    "typescript": "3.6.4"
   },
@@ -79,3 +94,3 @@ "keywords": [
   "lint-staged": {
-    "*.{ts,js}": [
+    "*.{ts,tsx,js}": [
       "prettier --write",
@@ -82,0 +97,0 @@ "git add"

README.md

@@ -1,17 +0,21 @@
-# mobx-react-lite <!-- omit in toc -->
+# mobx-react-lite
 
-[![Build Status](https://travis-ci.org/mobxjs/mobx-react-lite.svg?branch=master)](https://travis-ci.org/mobxjs/mobx-react-lite)[![Coverage Status](https://coveralls.io/repos/github/mobxjs/mobx-react-lite/badge.svg)](https://coveralls.io/github/mobxjs/mobx-react-lite)
+[![CircleCI](https://circleci.com/gh/mobxjs/mobx-react-lite.svg?style=svg)](https://circleci.com/gh/mobxjs/mobx-react-lite)[![Coverage Status](https://coveralls.io/repos/github/mobxjs/mobx-react-lite/badge.svg)](https://coveralls.io/github/mobxjs/mobx-react-lite)[![NPM downloads](https://img.shields.io/npm/dm/mobx-react-lite.svg?style=flat)](https://npmjs.com/package/mobx-react-lite)[![Minzipped size](https://img.shields.io/bundlephobia/minzip/mobx-react-lite.svg)](https://bundlephobia.com/result?p=mobx-react-lite)
 
+[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
 [![Join the chat at https://gitter.im/mobxjs/mobx](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mobxjs/mobx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-This is a next iteration of [mobx-react](https://github.com/mobxjs/mobx-react) coming from introducing React hooks which simplifies a lot of internal workings of this package.
+[![NPM](https://nodei.co/npm/mobx-react-lite.png)](https://www.npmjs.com/package/mobx-react-lite)
 
 **You need React version 16.8.0 and above**
 
-Class based components **are not supported** except using `<Observer>` directly in class `render` method. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the [mobx-react](https://github.com/mobxjs/mobx-react) just fine. The only conflict point is about the `observer` HOC. Subscribe [to this issue](https://github.com/mobxjs/mobx-react/issues/640) for a proper migration guide.
+This is a lighter version of [mobx-react](https://github.com/mobxjs/mobx-react) which supports React **functional components only** and as such makes the library slightly faster and smaller (_only 1.5kB gzipped_). In fact `mobx-react@6` has this library as a dependency and builds on top of it.
 
-[![NPM](https://nodei.co/npm/mobx-react-lite.png)](https://www.npmjs.com/package/mobx-react-lite)
+The library does not include any Provider/inject utilities as they can be fully replaced with [React Context](https://mobx-react.js.org/recipes-context). Check out [the migration guide](https://mobx-react.js.org/recipes-migration).
 
-Project is written in TypeScript and provides type safety out of the box. No Flow Type support is planned at this moment, but feel free to contribute.
+Class based components **are not supported** except using `<Observer>` directly in class `render` method. If you want to transition existing projects from classes to hooks, use [mobx-react 6+](https://github.com/mobxjs/mobx-react).
 
+See more at [the libraries overview](https://mobx-react.js.org/libraries).
+
 ## User Guide 👉 https://mobx-react.js.org
@@ -23,9 +27,12 @@
 
-> **`<Observer>{renderFn}</Observer>`** _([user guide](https://mobx-react.netlify.com/observer-component))_
+### **`<Observer>{renderFn}</Observer>`** _([user guide](https://mobx-react.js.org/observer-component))_
 
-> **`observer<P>(baseComponent: FunctionComponent<P>, options?: IObserverOptions): FunctionComponent<P>`** _([user guide](https://mobx-react.netlify.com/observer-hoc))_
+Is a React component, which applies observer to an anonymous region in your component.
 
+### **`observer<P>(baseComponent: FunctionComponent<P>, options?: IObserverOptions): FunctionComponent<P>`** _([user guide](https://mobx-react.js.org/observer-hoc))_
+
 ```ts
 interface IObserverOptions {
-    // Pass true to use React.forwardRef over the inner component. It's false by the default.
+    // Pass true to wrap the inner component with React.forwardRef.
+    // It's false by the default.
     forwardRef?: boolean
@@ -35,4 +42,6 @@ }
 
-> **`useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T`** _([user guide](https://mobx-react.netlify.com/observer-hook))_
+The observer converts a component into a reactive component, which tracks which observables are used automatically and re-renders the component when one of these values changes.
 
+### **`useObserver<T>(fn: () => T, baseComponentName = "observed", options?: IUseObserverOptions): T`** _([user guide](https://mobx-react.js.org/observer-hook))_
+
 ```ts
@@ -45,140 +54,41 @@ interface IUseObserverOptions {
 
-**`useLocalStore<T, S>(initializer: () => T, source?: S): T`** _([user guide](https://mobx-react.netlify.com/state-local))_
+It allows you to use an observer like behaviour, but still allowing you to optimize the component in any way you want (e.g. using memo with a custom areEqual, using forwardRef, etc.) and to declare exactly the part that is observed (the render phase).
 
-**`useAsObservableSource<T>(source: T): T`** _([user guide](https://mobx-react.netlify.com/state-outsourcing))_
+### **`useLocalStore<T, S>(initializer: () => T, source?: S): T`** _([user guide](https://mobx-react.js.org/state-local))_
 
-## React Strict mode ☄
+Local observable state can be introduced by using the useLocalStore hook, that runs its initializer function once to create an observable store and keeps it around for a lifetime of a component.
 
-Feel free to try out `mobx-react-lite@next` which is based on latest 1.x, but contains experimental support for handling Concurrent mode in React properly.
+### **`useAsObservableSource<T>(source: T): T`** _([user guide](https://mobx-react.js.org/state-outsourcing))_
 
-## Deprecation notice ⚠
+The useAsObservableSource hook can be used to turn any set of values into an observable object that has a stable reference (the same object is returned every time from the hook).
 
-Following utilities are still available in the package, but they are deprecated and will be removed in the next major version (2.x). As such, they are not mentioned in the user guide and it's not recommend to continue using these.
+## Observer batching
 
----
+[Check out the elaborate explanation](https://github.com/mobxjs/mobx-react/pull/787#issuecomment-573599793).
 
-### `useObservable<T>(initialValue: T): T`
+In short without observer batching the React doesn't guarantee the order component rendering in some cases. We highly recommend that you configure batching to avoid these random surprises.
 
-> **Use the `useLocalStore` instead** ([user guide](https://mobx-react.netlify.com/state-local))
+Import one of these before any React rendering is happening, typically `index.js/ts`. For Jest tests you can utilize [setupFilesAfterEnv](https://jestjs.io/docs/en/configuration#setupfilesafterenv-array).
 
-React hook that allows creating observable object within a component body and keeps track of it over renders. Gets all the benefits from [observable objects](https://mobx.js.org/refguide/object.html) including computed properties and methods. You can also use arrays, Map and Set.
+**React DOM:**
 
-Warning: With current implementation you also need to wrap your component to `observer`. It's also possible to have `useObserver` only in case you are not expecting rerender of the whole component.
+> import 'mobx-react-lite/batchingForReactDom'
 
-```tsx
-import { observer, useObservable, useObserver } from "mobx-react-lite"
+**React Native:**
 
-const TodoList = () => {
-    const todos = useObservable(new Map<string, boolean>())
-    const todoRef = React.useRef()
-    const addTodo = React.useCallback(() => {
-        todos.set(todoRef.current.value, false)
-        todoRef.current.value = ""
-    }, [])
-    const toggleTodo = React.useCallback((todo: string) => {
-        todos.set(todo, !todos.get(todo))
-    }, [])
+> import 'mobx-react-lite/batchingForReactNative'
 
-    return useObserver(() => (
-        <div>
-            {Array.from(todos).map(([todo, done]) => (
-                <div onClick={() => toggleTodo(todo)} key={todo}>
-                    {todo}
-                    {done ? " ✔" : " ⏲"}
-                </div>
-            ))}
-            <input ref={todoRef} />
-            <button onClick={addTodo}>Add todo</button>
-        </div>
-    ))
-}
-```
+### Opt-out
 
-#### Lazy initialization
+To opt-out from batching in some specific cases, simply import the following to silence the warning.
 
-Lazy initialization (similar to `React.useState`) is not available. In most cases your observable state should be a plain object which is cheap to create. With `useObserver` the component won't even rerender and state won't be recreated. In case you really want a more complex state or you need to use `observer`, it's very simple to use MobX directly.
+> import 'mobx-react-lite/batchingOptOut'
 
-```tsx
-import { observer } from "mobx-react-lite"
-import { observable } from "mobx"
-import { useState } from "react"
+### Custom batched updates
 
-const WithComplexState = observer(() => {
-    const [complexState] = useState(() => observable(new HeavyState()))
-    if (complexState.loading) {
-        return <Loading />
-    }
-    return <div>{complexState.heavyName}</div>
-})
-```
+Above imports are for a convenience to utilize standard versions of batching. If you for some reason have customized version of batched updates, you can do the following instead.
 
-[![Edit TodoList](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/jzj48v2xry?module=%2Fsrc%2FTodoList.tsx)
-
-Note that if you want to track a single scalar value (string, number, boolean), you would need [a boxed value](https://mobx.js.org/refguide/boxed.html) which is not recognized by `useObservable`. However, we recommend to just `useState` instead which gives you almost same result (with slightly different API).
-
-### `useComputed(func: () => T, inputs: ReadonlyArray<any> = []): T`
-
-> **Use the `useLocalStore` instead** ([user guide](https://mobx-react.netlify.com/state-local))
-
-Another React hook that simplifies computational logic. It's just a tiny wrapper around [MobX computed](https://mobx.js.org/refguide/computed-decorator.html#-computed-expression-as-function) function that runs computation whenever observable values change. In conjuction with `observer` the component will rerender based on such a change.
-
-```tsx
-const Calculator = observer(({ hasExploded }: { hasExploded: boolean }) => {
-    const inputRef = React.useRef()
-    const inputs = useObservable([1, 3, 5])
-    const result = useComputed(
-        () => (hasExploded ? "💣" : inputs.reduce(multiply, 1) * Number(!hasExploded)),
-        [hasExploded]
-    )
-
-    return (
-        <div>
-            <input ref={inputRef} />
-            <button onClick={() => inputs.push(parseInt(inputRef.current.value) | 1)}>
-                Multiply
-            </button>
-            <div>
-                {inputs.join(" * ")} = {result}
-            </div>
-        </div>
-    )
-})
+```js
+import { observerBatching } from "mobx-react-lite"
+observerBatching(customBatchedUpdates)
 ```
-
-Notice that since the computation depends on non-observable value, it has to be passed as a second argument to `useComputed`. There is [React `useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) behind the scenes and all rules applies here as well except you don't need to specify dependency on observable values.
-
-[![Edit Calculator](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/jzj48v2xry?module=%2Fsrc%2FCalculator.tsx)
-
-### `useDisposable<D extends TDisposable>(disposerGenerator: () => D, inputs: ReadonlyArray<any> = []): D`
-
-> **Use the `React.useEffect` instead** ([user guide](https://mobx-react.netlify.com/recipes-effects))
-
-The disposable is any kind of function that returns another function to be called on a component unmount to clean up used resources. Use MobX related functions like [`reaction`](https://mobx.js.org/refguide/reaction.html), [`autorun`](https://mobx.js.org/refguide/autorun.html), [`when`](https://mobx.js.org/refguide/when.html), [`observe`](https://mobx.js.org/refguide/observe.html), or anything else that returns a disposer.
-Returns the generated disposer for early disposal.
-
-Example (TypeScript):
-
-```typescript
-import { reaction } from "mobx"
-import { observer, useComputed, useDisposable } from "mobx-react-lite"
-
-const Name = observer((props: { firstName: string; lastName: string }) => {
-    const fullName = useComputed(() => `${props.firstName} ${props.lastName}`, [
-        props.firstName,
-        props.lastName
-    ])
-
-    // when the name changes then send this info to the server
-    useDisposable(() =>
-        reaction(
-            () => fullName,
-            () => {
-                // send this to some server
-            }
-        )
-    )
-
-    // render phase
-    return `Your full name is ${props.firstName} ${props.lastName}`
-})
-```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

1259

increased by17.99%

Number of low quality alerts

2

decreased by-33.33%

Number of low supply chain risk alerts

4

decreased by-42.86%

Worsened metrics

Total package byte prevSize

196993

decreased by-57.58%

Dev dependency count

31

increased by24%

Number of package files

29

decreased by-90.91%

Number of lines in readme file

92

decreased by-49.45%

No dependency changes