@xstate/react 1.6.2 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.6.3
+
+### Patch Changes
+
+- [#2767](https://github.com/statelyai/xstate/pull/2767) [`c1503b121`](https://github.com/statelyai/xstate/commit/c1503b1219d995ebf0f45de46036c5a1d7e6442f) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an over-rendering issue in the `useSelector`.
+
 ## 1.6.2
 
 ### Patch Changes

package/dist/xstate-react.umd.min.js

@@ -1,4 +1,4 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/behaviors"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).XStateReact={},e.React,e.XState,e.behaviors)}(this,(function(e,t,n,r){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i,o=u(t),c=function(){return(c=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e}).apply(this,arguments)};
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("xstate"),require("xstate/lib/behaviors")):"function"==typeof define&&define.amd?define(["exports","react","xstate","xstate/lib/behaviors"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).XStateReact={},t.React,t.XState,t.behaviors)}(this,(function(t,e,n,r){"use strict";function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,o=u(e),c=function(){return(c=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var u in e=arguments[n])Object.prototype.hasOwnProperty.call(e,u)&&(t[u]=e[u]);return t}).apply(this,arguments)};
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -12,12 +12,12 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */function a(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,u,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(e){u={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(u)throw u.error}}return o}function f(e,t){for(var n=0,r=t.length,u=e.length;n<r;n++,u++)e[u]=t[n];return e}!function(e){e[e.Effect=1]="Effect",e[e.LayoutEffect=2]="LayoutEffect"}(i||(i={}));var s=t.useLayoutEffect;function l(e){var n=t.useRef();return n.current||(n.current={v:e()}),n.current.v}function v(e,t){var n,r,u=a([[],[]],2),i=u[0],o=u[1];try{for(var c=function(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}(e),f=c.next();!f.done;f=c.next()){var s=f.value;t(s)?i.push(s):o.push(s)}}catch(e){n={error:e}}finally{try{f&&!f.done&&(r=c.return)&&r.call(c)}finally{if(n)throw n.error}}return[i,o]}function b(e,t){(0,e.exec)(t.context,t._event.data,{action:e,state:t,_event:t._event})()}function p(e,r,u){void 0===r&&(r={});var o=l((function(){return"function"==typeof e?e():e})),p=r.context,d=r.guards,h=r.actions,y=r.activities,g=r.services,O=r.delays,j=r.state,m=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(e);u<r.length;u++)t.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(e,r[u])&&(n[r[u]]=e[r[u]])}return n}(r,["context","guards","actions","activities","services","delays","state"]),x=l((function(){var e={context:p,guards:d,actions:h,activities:y,services:g,delays:O},t=o.withConfig(e,(function(){return c(c({},o.context),p)}));return n.interpret(t,c({deferEvents:!0},m))}));return s((function(){var e;return u&&(e=x.subscribe(function(e,t,n){if("object"==typeof e)return e;var r=function(){};return{next:e,error:t||r,complete:n||r}}(u))),function(){null==e||e.unsubscribe()}}),[u]),s((function(){return x.start(j?n.State.create(j):void 0),function(){x.stop()}}),[]),s((function(){Object.assign(x.machine.options.actions,h),Object.assign(x.machine.options.guards,d),Object.assign(x.machine.options.activities,y),Object.assign(x.machine.options.services,g),Object.assign(x.machine.options.delays,O)}),[h,d,y,g,O]),function(e){var n=t.useRef([]),r=t.useRef([]);s((function(){var t=e.subscribe((function(e){var t,u;if(e.actions.length){var o=a(v(e.actions.filter((function(e){return"function"==typeof e.exec&&"__effect"in e.exec})),(function(e){return e.exec.__effect===i.Effect})),2),c=o[0],s=o[1];(t=n.current).push.apply(t,f([],a(c.map((function(t){return[t,e]}))))),(u=r.current).push.apply(u,f([],a(s.map((function(t){return[t,e]})))))}}));return function(){t.unsubscribe()}}),[]),s((function(){for(;r.current.length;){var e=a(r.current.shift(),2);b(e[0],e[1])}})),t.useEffect((function(){for(;n.current.length;){var e=a(n.current.shift(),2);b(e[0],e[1])}}))}(x),x}function d(e,t){var n=function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return function(){return e.apply(void 0,f([],a(t)))}};return Object.defineProperties(n,{name:{value:"effect:"+e.name},__effect:{value:t}}),n}function h(e){return"state"in e}function y(e){return"deferred"in e}var g=function(){};function O(e){return"getSnapshot"in e?e.getSnapshot():h(e)?e.state:void 0}function j(e,n){void 0===n&&(n=O);var r=t.useRef(e),u=t.useRef([]),i=a(t.useState((function(){return n(e)})),2),o=i[0],c=i[1],f=l((function(){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=e[0],i=r.current;y(i)&&i.deferred?u.current.push(n):i.send(n)}}));return s((function(){r.current=e,c(n(e));for(var t=e.subscribe({next:function(e){return c(e)},error:g,complete:g});u.current.length>0;){var i=u.current.shift();e.send(i)}return function(){t.unsubscribe()}}),[e]),[o,f]}function m(e){var t={exports:{}};return e(t,t.exports),t.exports
+    ***************************************************************************** */function a(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,u,i=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(t){u={error:t}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(u)throw u.error}}return o}function f(t,e,n){if(n||2===arguments.length)for(var r,u=0,i=e.length;u<i;u++)!r&&u in e||(r||(r=Array.prototype.slice.call(e,0,u)),r[u]=e[u]);return t.concat(r||Array.prototype.slice.call(e))}!function(t){t[t.Effect=1]="Effect",t[t.LayoutEffect=2]="LayoutEffect"}(i||(i={}));var s=e.useLayoutEffect;function l(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v}function v(t,e){var n,r,u=a([[],[]],2),i=u[0],o=u[1];try{for(var c=function(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}(t),f=c.next();!f.done;f=c.next()){var s=f.value;e(s)?i.push(s):o.push(s)}}catch(t){n={error:t}}finally{try{f&&!f.done&&(r=c.return)&&r.call(c)}finally{if(n)throw n.error}}return[i,o]}function p(t,e){(0,t.exec)(e.context,e._event.data,{action:t,state:e,_event:e._event})()}function b(t,r,u){void 0===r&&(r={});var o=l((function(){return"function"==typeof t?t():t})),b=r.context,d=r.guards,y=r.actions,h=r.activities,g=r.services,O=r.delays,j=r.state,m=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(r=Object.getOwnPropertySymbols(t);u<r.length;u++)e.indexOf(r[u])<0&&Object.prototype.propertyIsEnumerable.call(t,r[u])&&(n[r[u]]=t[r[u]])}return n}(r,["context","guards","actions","activities","services","delays","state"]),x=l((function(){var t={context:b,guards:d,actions:y,activities:h,services:g,delays:O},e=o.withConfig(t,(function(){return c(c({},o.context),b)}));return n.interpret(e,c({deferEvents:!0},m))}));return s((function(){var t;return u&&(t=x.subscribe(function(t,e,n){if("object"==typeof t)return t;var r=function(){};return{next:t,error:e||r,complete:n||r}}(u))),function(){null==t||t.unsubscribe()}}),[u]),s((function(){return x.start(j?n.State.create(j):void 0),function(){x.stop()}}),[]),s((function(){Object.assign(x.machine.options.actions,y),Object.assign(x.machine.options.guards,d),Object.assign(x.machine.options.activities,h),Object.assign(x.machine.options.services,g),Object.assign(x.machine.options.delays,O)}),[y,d,h,g,O]),function(t){var n=e.useRef([]),r=e.useRef([]);s((function(){var e=t.subscribe((function(t){var e,u;if(t.actions.length){var o=a(v(t.actions.filter((function(t){return"function"==typeof t.exec&&"__effect"in t.exec})),(function(t){return t.exec.__effect===i.Effect})),2),c=o[0],s=o[1];(e=n.current).push.apply(e,f([],a(c.map((function(e){return[e,t]}))),!1)),(u=r.current).push.apply(u,f([],a(s.map((function(e){return[e,t]}))),!1))}}));return function(){e.unsubscribe()}}),[]),s((function(){for(;r.current.length;){var t=a(r.current.shift(),2);p(t[0],t[1])}})),e.useEffect((function(){for(;n.current.length;){var t=a(n.current.shift(),2);p(t[0],t[1])}}))}(x),x}function d(t,e){var n=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(){return t.apply(void 0,f([],a(e),!1))}};return Object.defineProperties(n,{name:{value:"effect:".concat(t.name)},__effect:{value:e}}),n}function y(t){return"state"in t}function h(t){return"deferred"in t}var g=function(){};function O(t){return"getSnapshot"in t?t.getSnapshot():y(t)?t.state:void 0}function j(t,n){void 0===n&&(n=O);var r=e.useRef(t),u=e.useRef([]),i=a(e.useState((function(){return n(t)})),2),o=i[0],c=i[1],f=l((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],i=r.current;h(i)&&i.deferred?u.current.push(n):i.send(n)}}));return s((function(){r.current=t,c(n(t));for(var e=t.subscribe({next:function(t){return c(t)},error:g,complete:g});u.current.length>0;){var i=u.current.shift();t.send(i)}return function(){e.unsubscribe()}}),[t]),[o,f]}function m(t){var e={exports:{}};return t(e,e.exports),e.exports
 /*
     object-assign
     (c) Sindre Sorhus
     @license MIT
-    */}var x=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;function E(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var _=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,r,u=E(e),i=1;i<arguments.length;i++){for(var o in n=Object(arguments[i]))S.call(n,o)&&(u[o]=n[o]);if(x){r=x(n);for(var c=0;c<r.length;c++)w.call(n,r[c])&&(u[r[c]]=n[r[c]])}}return u},C={useSubscription:function(e){var t=e.getCurrentValue,n=e.subscribe,r=o.default.useState((function(){return{getCurrentValue:t,subscribe:n,value:t()}}));e=r[0];var u=r[1];return r=e.value,e.getCurrentValue===t&&e.subscribe===n||(r=t(),u({getCurrentValue:t,subscribe:n,value:r})),o.default.useDebugValue(r),o.default.useEffect((function(){function e(){if(!r){var e=t();u((function(r){return r.getCurrentValue!==t||r.subscribe!==n||r.value===e?r:_({},r,{value:e})}))}}var r=!1,i=n(e);return e(),function(){r=!0,i()}}),[t,n]),r}},P=(m((function(e,t){})),m((function(e){e.exports=C})));
+    */}var x=Object.getOwnPropertySymbols,S=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;function E(t){if(null==t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}var _=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map((function(t){return e[t]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(t){r[t]=t})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,r,u=E(t),i=1;i<arguments.length;i++){for(var o in n=Object(arguments[i]))S.call(n,o)&&(u[o]=n[o]);if(x){r=x(n);for(var c=0;c<r.length;c++)w.call(n,r[c])&&(u[r[c]]=n[r[c]])}}return u},C={useSubscription:function(t){var e=t.getCurrentValue,n=t.subscribe,r=o.default.useState((function(){return{getCurrentValue:e,subscribe:n,value:e()}}));t=r[0];var u=r[1];return r=t.value,t.getCurrentValue===e&&t.subscribe===n||(r=e(),u({getCurrentValue:e,subscribe:n,value:r})),o.default.useDebugValue(r),o.default.useEffect((function(){function t(){if(!r){var t=e();u((function(r){return r.getCurrentValue!==e||r.subscribe!==n||r.value===t?r:_({},r,{value:t})}))}}var r=!1,i=n(t);return t(),function(){r=!0,i()}}),[e,n]),r}},P=(m((function(t,e){})),m((function(t){t.exports=C})));
 /** @license React vundefined
      * use-subscription.production.min.js
      *
@@ -25,4 +25,4 @@
      *
      * This source code is licensed under the MIT license found in the
      * LICENSE file in the root directory of this source tree.
-     */var V=function(e,t){return e===t},R=function(e){return"state"in(n=e)&&"machine"in n?0!==("status"in(t=e)?t.status:t._status)?t.state:t.machine.initialState:h(e)?e.state:void 0;var t,n};e.asEffect=function(e){return d(e,i.Effect)},e.asLayoutEffect=function(e){return d(e,i.LayoutEffect)},e.useActor=j,e.useInterpret=p,e.useMachine=function(e,r){void 0===r&&(r={});var u=t.useCallback((function(e){var t=void 0===e.changed&&Object.keys(e.children).length;(e.changed||t)&&f(e)}),[]),i=p(e,r,u),o=a(t.useState((function(){var e=i.machine.initialState;return r.state?n.State.create(r.state):e})),2),c=o[0],f=o[1];return[c,i.send,i]},e.useSelector=function(e,n,r,u){void 0===r&&(r=V),void 0===u&&(u=R);var i=t.useRef(n),o=t.useMemo((function(){var t,o=u(e),c=n(o);return{getSnapshot:function(){return o},getCurrentValue:function(){return c},setCurrentValue:function(e){c=e,null==t||t()},subscribe:function(n){t=n;var u=e.subscribe((function(e){o=e;var t=i.current(e);r(c,t)||(c=t,n())}));return function(){u.unsubscribe()}}}}),[e]),c=P.useSubscription(o);if(i.current!==n){var a=n(o.getSnapshot());r(c,a)||(c=a)}return s((function(){i.current=n,o.setCurrentValue(c)})),c},e.useService=function(e){return[a(j(e),1)[0],e.send]},e.useSpawn=function(e){return l((function(){return r.spawnBehavior(e)}))},Object.defineProperty(e,"__esModule",{value:!0})}));
+     */var V=function(t,e){return t===e},R=function(t){return"state"in(n=t)&&"machine"in n?0!==("status"in(e=t)?e.status:e._status)?e.state:e.machine.initialState:y(t)?t.state:void 0;var e,n};t.asEffect=function(t){return d(t,i.Effect)},t.asLayoutEffect=function(t){return d(t,i.LayoutEffect)},t.useActor=j,t.useInterpret=b,t.useMachine=function(t,r){void 0===r&&(r={});var u=e.useCallback((function(t){var e=void 0===t.changed&&Object.keys(t.children).length;(t.changed||e)&&f(t)}),[]),i=b(t,r,u),o=a(e.useState((function(){var t=i.machine.initialState;return r.state?n.State.create(r.state):t})),2),c=o[0],f=o[1];return[c,i.send,i]},t.useSelector=function(t,n,r,u){void 0===r&&(r=V),void 0===u&&(u=R);var i=e.useRef(n),o=e.useMemo((function(){var e,o=u(t),c=n(o);return{getSnapshot:function(){return o},getCurrentValue:function(){return c},setCurrentValue:function(t){c=t,null==e||e()},subscribe:function(n){e=n;var u=t.subscribe((function(t){o=t;var e=i.current(t);r(c,e)||(c=e,n())}));return function(){u.unsubscribe()}}}}),[t]),c=P.useSubscription(o),a=!1;if(i.current!==n){var f=n(o.getSnapshot());r(c,f)||(a=!0,c=f)}return s((function(){i.current=n,a&&o.setCurrentValue(c)})),c},t.useService=function(t){return[a(j(t),1)[0],t.send]},t.useSpawn=function(t){return l((function(){return r.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));

package/es/useActor.js

@@ -45,7 +45,7 @@ export function useActor(actorRef, getSnapshot) {
         }
         var event = args[0];
         if (process.env.NODE_ENV !== 'production' && args.length > 1) {
-            console.warn("Unexpected payload: " + JSON.stringify(args[1]) + ". Only a single event object can be sent to actor send() functions.");
+            console.warn("Unexpected payload: ".concat(JSON.stringify(args[1]), ". Only a single event object can be sent to actor send() functions."));
         }
         var currentActorRef = actorRefRef.current;
         // If the previous actor is a deferred actor,

package/es/useMachine.js

@@ -14,10 +14,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useCallback, useState } from 'react';
 import { State } from 'xstate';
@@ -31,11 +35,11 @@ function createReactActionFunction(exec, tag) {
         }
         // don't execute; just return
         return function () {
-            return exec.apply(void 0, __spreadArray([], __read(args)));
+            return exec.apply(void 0, __spreadArray([], __read(args), false));
         };
     };
     Object.defineProperties(effectExec, {
-        name: { value: "effect:" + exec.name },
+        name: { value: "effect:".concat(exec.name) },
         __effect: { value: tag }
     });
     return effectExec;

package/es/useReactEffectActions.js

@@ -14,10 +14,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useEffect, useRef } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
@@ -46,8 +50,8 @@ export function useReactEffectActions(service) {
                 var _c = __read(partition(reactEffectActions, function (action) {
                     return action.exec.__effect === ReactEffectType.Effect;
                 }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
-                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; }))));
-                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; }))));
+                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
+                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
             }
         });
         return function () {

package/es/useSelector.js

@@ -49,17 +49,22 @@ export function useSelector(actor, selector, compare, getSnapshot) {
         // - `compare`: is really supposed to be idempotent and the same throughout the lifetime of this hook (the same assumption is made in React Redux v7)
     }, [actor]);
     var currentSelected = useSubscription(subscription);
+    var currentChanged = false;
     if (latestSelectorRef.current !== selector) {
         var selected = selector(subscription.getSnapshot());
         if (!compare(currentSelected, selected)) {
+            currentChanged = true;
             currentSelected = selected;
         }
     }
     useIsomorphicLayoutEffect(function () {
         latestSelectorRef.current = selector;
-        // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
-        // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
-        subscription.setCurrentValue(currentSelected);
+        // this condition should not be required, but setState bailouts are currently buggy: https://github.com/facebook/react/issues/22654
+        if (currentChanged) {
+            // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
+            // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
+            subscription.setCurrentValue(currentSelected);
+        }
     });
     return currentSelected;
 }

package/lib/fsm.js

@@ -32,22 +32,22 @@ var getServiceState = function (service) {
 };
 function useMachine(stateMachine, options) {
     if (process.env.NODE_ENV !== 'production') {
-        var _a = __read(react_1.useState(stateMachine), 1), initialMachine = _a[0];
+        var _a = __read((0, react_1.useState)(stateMachine), 1), initialMachine = _a[0];
         if (stateMachine !== initialMachine) {
             console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' +
                 'Please make sure that you pass the same Machine as argument each time.');
         }
     }
-    var service = useConstant_1.default(function () {
-        return fsm_1.interpret(fsm_1.createMachine(stateMachine.config, options ? options : stateMachine._options)).start();
+    var service = (0, useConstant_1.default)(function () {
+        return (0, fsm_1.interpret)((0, fsm_1.createMachine)(stateMachine.config, options ? options : stateMachine._options)).start();
     });
-    var _b = __read(react_1.useState(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1];
-    react_1.useEffect(function () {
+    var _b = __read((0, react_1.useState)(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1];
+    (0, react_1.useEffect)(function () {
         if (options) {
             service._machine._options = options;
         }
     });
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         service.subscribe(setState);
         return function () {
             service.stop();
@@ -57,7 +57,7 @@ function useMachine(stateMachine, options) {
 }
 exports.useMachine = useMachine;
 function useService(service) {
-    var subscription = react_1.useMemo(function () {
+    var subscription = (0, react_1.useMemo)(function () {
         var currentState = getServiceState(service);
         return {
             getCurrentValue: function () { return currentState; },
@@ -72,7 +72,7 @@ function useService(service) {
             }
         };
     }, [service]);
-    var state = use_subscription_1.useSubscription(subscription);
+    var state = (0, use_subscription_1.useSubscription)(subscription);
     return [state, service.send, service];
 }
 exports.useService = useService;

package/lib/useActor.js

@@ -39,17 +39,17 @@ function defaultGetSnapshot(actorRef) {
 }
 function useActor(actorRef, getSnapshot) {
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var actorRefRef = react_1.useRef(actorRef);
-    var deferredEventsRef = react_1.useRef([]);
-    var _a = __read(react_1.useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
-    var send = useConstant_1.default(function () { return function () {
+    var actorRefRef = (0, react_1.useRef)(actorRef);
+    var deferredEventsRef = (0, react_1.useRef)([]);
+    var _a = __read((0, react_1.useState)(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
+    var send = (0, useConstant_1.default)(function () { return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
         var event = args[0];
         if (process.env.NODE_ENV !== 'production' && args.length > 1) {
-            console.warn("Unexpected payload: " + JSON.stringify(args[1]) + ". Only a single event object can be sent to actor send() functions.");
+            console.warn("Unexpected payload: ".concat(JSON.stringify(args[1]), ". Only a single event object can be sent to actor send() functions."));
         }
         var currentActorRef = actorRefRef.current;
         // If the previous actor is a deferred actor,
@@ -62,7 +62,7 @@ function useActor(actorRef, getSnapshot) {
             currentActorRef.send(event);
         }
     }; });
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         actorRefRef.current = actorRef;
         setCurrent(getSnapshot(actorRef));
         var subscription = actorRef.subscribe({

package/lib/useInterpret.js

@@ -59,19 +59,19 @@ function toObserver(nextHandler, errorHandler, completionHandler) {
 }
 function useInterpret(getMachine, options, observerOrListener) {
     if (options === void 0) { options = {}; }
-    var machine = useConstant_1.default(function () {
+    var machine = (0, useConstant_1.default)(function () {
         return typeof getMachine === 'function' ? getMachine() : getMachine;
     });
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
-        var _a = __read(react_1.useState(machine), 1), initialMachine = _a[0];
+        var _a = __read((0, react_1.useState)(machine), 1), initialMachine = _a[0];
         if (getMachine !== initialMachine) {
             console.warn('Machine given to `useMachine` has changed between renders. This is not supported and might lead to unexpected results.\n' +
                 'Please make sure that you pass the same Machine as argument each time.');
         }
     }
     var context = options.context, guards = options.guards, actions = options.actions, activities = options.activities, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "activities", "services", "delays", "state"]);
-    var service = useConstant_1.default(function () {
+    var service = (0, useConstant_1.default)(function () {
         var machineConfig = {
             context: context,
             guards: guards,
@@ -81,9 +81,9 @@ function useInterpret(getMachine, options, observerOrListener) {
             delays: delays
         };
         var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
-        return xstate_1.interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
+        return (0, xstate_1.interpret)(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
     });
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         var sub;
         if (observerOrListener) {
             sub = service.subscribe(toObserver(observerOrListener));
@@ -92,7 +92,7 @@ function useInterpret(getMachine, options, observerOrListener) {
             sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
         };
     }, [observerOrListener]);
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         service.start(rehydratedState ? xstate_1.State.create(rehydratedState) : undefined);
         return function () {
             service.stop();
@@ -101,14 +101,14 @@ function useInterpret(getMachine, options, observerOrListener) {
     // Make sure options are kept updated when they change.
     // This mutation assignment is safe because the service instance is only used
     // in one place -- this hook's caller.
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         Object.assign(service.machine.options.actions, actions);
         Object.assign(service.machine.options.guards, guards);
         Object.assign(service.machine.options.activities, activities);
         Object.assign(service.machine.options.services, services);
         Object.assign(service.machine.options.delays, delays);
     }, [actions, guards, activities, services, delays]);
-    useReactEffectActions_1.useReactEffectActions(service);
+    (0, useReactEffectActions_1.useReactEffectActions)(service);
     return service;
 }
 exports.useInterpret = useInterpret;

package/lib/useMachine.js

@@ -15,10 +15,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMachine = exports.asLayoutEffect = exports.asEffect = void 0;
@@ -34,11 +38,11 @@ function createReactActionFunction(exec, tag) {
         }
         // don't execute; just return
         return function () {
-            return exec.apply(void 0, __spreadArray([], __read(args)));
+            return exec.apply(void 0, __spreadArray([], __read(args), false));
         };
     };
     Object.defineProperties(effectExec, {
-        name: { value: "effect:" + exec.name },
+        name: { value: "effect:".concat(exec.name) },
         __effect: { value: tag }
     });
     return effectExec;
@@ -53,7 +57,7 @@ function asLayoutEffect(exec) {
 exports.asLayoutEffect = asLayoutEffect;
 function useMachine(getMachine, options) {
     if (options === void 0) { options = {}; }
-    var listener = react_1.useCallback(function (nextState) {
+    var listener = (0, react_1.useCallback)(function (nextState) {
         // Only change the current state if:
         // - the incoming state is the "live" initial state (since it might have new actors)
         // - OR the incoming state actually changed.
@@ -65,8 +69,8 @@ function useMachine(getMachine, options) {
             setState(nextState);
         }
     }, []);
-    var service = useInterpret_1.useInterpret(getMachine, options, listener);
-    var _a = __read(react_1.useState(function () {
+    var service = (0, useInterpret_1.useInterpret)(getMachine, options, listener);
+    var _a = __read((0, react_1.useState)(function () {
         var initialState = service.machine.initialState;
         return (options.state
             ? xstate_1.State.create(options.state)

package/lib/useReactEffectActions.js

@@ -15,10 +15,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReactEffectActions = void 0;
@@ -36,9 +40,9 @@ function executeEffect(action, state) {
     originalExec();
 }
 function useReactEffectActions(service) {
-    var effectActionsRef = react_1.useRef([]);
-    var layoutEffectActionsRef = react_1.useRef([]);
-    use_isomorphic_layout_effect_1.default(function () {
+    var effectActionsRef = (0, react_1.useRef)([]);
+    var layoutEffectActionsRef = (0, react_1.useRef)([]);
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         var sub = service.subscribe(function (currentState) {
             var _a, _b;
             if (currentState.actions.length) {
@@ -46,11 +50,11 @@ function useReactEffectActions(service) {
                     return (typeof action.exec === 'function' &&
                         '__effect' in action.exec);
                 });
-                var _c = __read(utils_1.partition(reactEffectActions, function (action) {
+                var _c = __read((0, utils_1.partition)(reactEffectActions, function (action) {
                     return action.exec.__effect === types_1.ReactEffectType.Effect;
                 }), 2), effectActions = _c[0], layoutEffectActions = _c[1];
-                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; }))));
-                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; }))));
+                (_a = effectActionsRef.current).push.apply(_a, __spreadArray([], __read(effectActions.map(function (effectAction) { return [effectAction, currentState]; })), false));
+                (_b = layoutEffectActionsRef.current).push.apply(_b, __spreadArray([], __read(layoutEffectActions.map(function (layoutEffectAction) { return [layoutEffectAction, currentState]; })), false));
             }
         });
         return function () {
@@ -60,13 +64,13 @@ function useReactEffectActions(service) {
     // this is somewhat weird - this should always be flushed within useLayoutEffect
     // but we don't want to receive warnings about useLayoutEffect being used on the server
     // so we have to use `useIsomorphicLayoutEffect` to silence those warnings
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         while (layoutEffectActionsRef.current.length) {
             var _a = __read(layoutEffectActionsRef.current.shift(), 2), layoutEffectAction = _a[0], effectState = _a[1];
             executeEffect(layoutEffectAction, effectState);
         }
     }); // https://github.com/davidkpiano/xstate/pull/1202#discussion_r429677773
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         while (effectActionsRef.current.length) {
             var _a = __read(effectActionsRef.current.shift(), 2), effectAction = _a[0], effectState = _a[1];
             executeEffect(effectAction, effectState);

package/lib/useSelector.js

@@ -12,16 +12,16 @@ function isService(actor) {
 var defaultCompare = function (a, b) { return a === b; };
 var defaultGetSnapshot = function (a) {
     return isService(a)
-        ? useService_1.getServiceSnapshot(a)
-        : useActor_1.isActorWithState(a)
+        ? (0, useService_1.getServiceSnapshot)(a)
+        : (0, useActor_1.isActorWithState)(a)
             ? a.state
             : undefined;
 };
 function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var latestSelectorRef = react_1.useRef(selector);
-    var subscription = react_1.useMemo(function () {
+    var latestSelectorRef = (0, react_1.useRef)(selector);
+    var subscription = (0, react_1.useMemo)(function () {
         var snapshot = getSnapshot(actor);
         var current = selector(snapshot);
         var notifySubscriber;
@@ -51,18 +51,23 @@ function useSelector(actor, selector, compare, getSnapshot) {
         // - `getSnapshot`: it is only supposed to read the "initial" snapshot of an actor
         // - `compare`: is really supposed to be idempotent and the same throughout the lifetime of this hook (the same assumption is made in React Redux v7)
     }, [actor]);
-    var currentSelected = use_subscription_1.useSubscription(subscription);
+    var currentSelected = (0, use_subscription_1.useSubscription)(subscription);
+    var currentChanged = false;
     if (latestSelectorRef.current !== selector) {
         var selected = selector(subscription.getSnapshot());
         if (!compare(currentSelected, selected)) {
+            currentChanged = true;
             currentSelected = selected;
         }
     }
-    use_isomorphic_layout_effect_1.default(function () {
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         latestSelectorRef.current = selector;
-        // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
-        // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
-        subscription.setCurrentValue(currentSelected);
+        // this condition should not be required, but setState bailouts are currently buggy: https://github.com/facebook/react/issues/22654
+        if (currentChanged) {
+            // required so we don't cause a rerender by setting state (this could create infinite rerendering loop with inline selectors)
+            // at the same time we need to update the value within the subscription so new emits can compare against what has been returned to the user as current value
+            subscription.setCurrentValue(currentSelected);
+        }
     });
     return currentSelected;
 }

package/lib/useService.js

@@ -35,7 +35,7 @@ function useService(service) {
     if (process.env.NODE_ENV !== 'production' && !('machine' in service)) {
         throw new Error("Attempted to use an actor-like object instead of a service in the useService() hook. Please use the useActor() hook instead.");
     }
-    var _a = __read(useActor_1.useActor(service), 1), state = _a[0];
+    var _a = __read((0, useActor_1.useActor)(service), 1), state = _a[0];
     return [state, service.send];
 }
 exports.useService = useService;

package/lib/useSpawn.js

@@ -11,8 +11,8 @@ var useConstant_1 = require("./useConstant");
  * @returns An ActorRef with the specified `behavior`
  */
 function useSpawn(behavior) {
-    var actorRef = useConstant_1.default(function () {
-        return behaviors_1.spawnBehavior(behavior);
+    var actorRef = (0, useConstant_1.default)(function () {
+        return (0, behaviors_1.spawnBehavior)(behavior);
     });
     return actorRef;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -80,7 +80,7 @@
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.3.5",
+    "typescript": "^4.5.2",
     "xstate": "*"
   }
 }