@xstate/react 1.5.1 → 1.6.3

package/es/useActor.js

@@ -38,7 +38,15 @@ export function useActor(actorRef, getSnapshot) {
     var actorRefRef = useRef(actorRef);
     var deferredEventsRef = useRef([]);
     var _a = __read(useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
-    var send = useConstant(function () { return function (event) {
+    var send = useConstant(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: ".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,
         // queue the events so that they can be replayed

package/es/useInterpret.js

@@ -62,7 +62,7 @@ export function useInterpret(getMachine, options, observerOrListener) {
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
         var _a = __read(useState(machine), 1), initialMachine = _a[0];
-        if (machine !== initialMachine) {
+        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.');
         }
@@ -77,7 +77,7 @@ export function useInterpret(getMachine, options, observerOrListener) {
             services: services,
             delays: delays
         };
-        var machineWithConfig = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
+        var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
         return interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
     });
     useIsomorphicLayoutEffect(function () {
@@ -95,15 +95,16 @@ export function useInterpret(getMachine, options, observerOrListener) {
             service.stop();
         };
     }, []);
-    // Make sure actions and services are kept updated when they change.
+    // 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.
     useIsomorphicLayoutEffect(function () {
         Object.assign(service.machine.options.actions, actions);
-    }, [actions]);
-    useIsomorphicLayoutEffect(function () {
+        Object.assign(service.machine.options.guards, guards);
+        Object.assign(service.machine.options.activities, activities);
         Object.assign(service.machine.options.services, services);
-    }, [services]);
+        Object.assign(service.machine.options.delays, delays);
+    }, [actions, guards, activities, services, delays]);
     useReactEffectActions(service);
     return service;
 }

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

@@ -1,20 +1,6 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { useEffect, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
+import { useSubscription } from 'use-subscription';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { isActorWithState } from './useActor';
 import { getServiceSnapshot } from './useService';
 function isService(actor) {
@@ -31,22 +17,54 @@ var defaultGetSnapshot = function (a) {
 export function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    var _a = __read(useState(function () { return selector(getSnapshot(actor)); }), 2), selected = _a[0], setSelected = _a[1];
-    var selectedRef = useRef(selected);
-    useEffect(function () {
-        var updateSelectedIfChanged = function (nextSelected) {
-            if (!compare(selectedRef.current, nextSelected)) {
-                setSelected(nextSelected);
-                selectedRef.current = nextSelected;
+    var latestSelectorRef = useRef(selector);
+    var subscription = useMemo(function () {
+        var snapshot = getSnapshot(actor);
+        var current = selector(snapshot);
+        var notifySubscriber;
+        return {
+            getSnapshot: function () { return snapshot; },
+            getCurrentValue: function () { return current; },
+            setCurrentValue: function (newCurrent) {
+                current = newCurrent;
+                notifySubscriber === null || notifySubscriber === void 0 ? void 0 : notifySubscriber();
+            },
+            subscribe: function (callback) {
+                notifySubscriber = callback;
+                var sub = actor.subscribe(function (emitted) {
+                    snapshot = emitted;
+                    var next = latestSelectorRef.current(emitted);
+                    if (!compare(current, next)) {
+                        current = next;
+                        callback();
+                    }
+                });
+                return function () {
+                    sub.unsubscribe();
+                };
             }
         };
-        var initialSelected = selector(getSnapshot(actor));
-        updateSelectedIfChanged(initialSelected);
-        var sub = actor.subscribe(function (emitted) {
-            var nextSelected = selector(emitted);
-            updateSelectedIfChanged(nextSelected);
-        });
-        return function () { return sub.unsubscribe(); };
-    }, [selector, compare]);
-    return selected;
+        // intentionally omit `getSnapshot` and `compare`
+        // - `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 = 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;
+        // 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,10 +39,18 @@ 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 (event) {
+    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: ".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,
         // queue the events so that they can be replayed
@@ -54,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];
-        if (machine !== initialMachine) {
+        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,
@@ -80,10 +80,10 @@ function useInterpret(getMachine, options, observerOrListener) {
             services: services,
             delays: delays
         };
-        var machineWithConfig = machine.withConfig(machineConfig, __assign(__assign({}, machine.context), context));
-        return xstate_1.interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
+        var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
+        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,22 +92,23 @@ 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();
         };
     }, []);
-    // Make sure actions and services are kept updated when they change.
+    // 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);
-    }, [actions]);
-    use_isomorphic_layout_effect_1.default(function () {
+        Object.assign(service.machine.options.guards, guards);
+        Object.assign(service.machine.options.activities, activities);
         Object.assign(service.machine.options.services, services);
-    }, [services]);
-    useReactEffectActions_1.useReactEffectActions(service);
+        Object.assign(service.machine.options.delays, delays);
+    }, [actions, guards, activities, services, delays]);
+    (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

@@ -1,23 +1,9 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelector = void 0;
 var react_1 = require("react");
+var use_subscription_1 = require("use-subscription");
+var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var useActor_1 = require("./useActor");
 var useService_1 = require("./useService");
 function isService(actor) {
@@ -26,31 +12,63 @@ 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 _a = __read(react_1.useState(function () { return selector(getSnapshot(actor)); }), 2), selected = _a[0], setSelected = _a[1];
-    var selectedRef = react_1.useRef(selected);
-    react_1.useEffect(function () {
-        var updateSelectedIfChanged = function (nextSelected) {
-            if (!compare(selectedRef.current, nextSelected)) {
-                setSelected(nextSelected);
-                selectedRef.current = nextSelected;
+    var latestSelectorRef = (0, react_1.useRef)(selector);
+    var subscription = (0, react_1.useMemo)(function () {
+        var snapshot = getSnapshot(actor);
+        var current = selector(snapshot);
+        var notifySubscriber;
+        return {
+            getSnapshot: function () { return snapshot; },
+            getCurrentValue: function () { return current; },
+            setCurrentValue: function (newCurrent) {
+                current = newCurrent;
+                notifySubscriber === null || notifySubscriber === void 0 ? void 0 : notifySubscriber();
+            },
+            subscribe: function (callback) {
+                notifySubscriber = callback;
+                var sub = actor.subscribe(function (emitted) {
+                    snapshot = emitted;
+                    var next = latestSelectorRef.current(emitted);
+                    if (!compare(current, next)) {
+                        current = next;
+                        callback();
+                    }
+                });
+                return function () {
+                    sub.unsubscribe();
+                };
             }
         };
-        var initialSelected = selector(getSnapshot(actor));
-        updateSelectedIfChanged(initialSelected);
-        var sub = actor.subscribe(function (emitted) {
-            var nextSelected = selector(emitted);
-            updateSelectedIfChanged(nextSelected);
-        });
-        return function () { return sub.unsubscribe(); };
-    }, [selector, compare]);
-    return selected;
+        // intentionally omit `getSnapshot` and `compare`
+        // - `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 = (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;
+        }
+    }
+    (0, use_isomorphic_layout_effect_1.default)(function () {
+        latestSelectorRef.current = selector;
+        // 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;
 }
 exports.useSelector = useSelector;

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.5.1",
+  "version": "1.6.3",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -39,7 +39,7 @@
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc && tsc --outDir es --module es2015 && rollup -c",
     "test": "jest",
-    "prepublish": "npm run build && npm run test"
+    "prepublish": "npm run build"
   },
   "bugs": {
     "url": "https://github.com/davidkpiano/xstate/issues"
@@ -78,9 +78,9 @@
     "rollup": "^2.35.1",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.1.2",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.5.6",
-    "typescript": "^4.3.2",
+    "typescript": "^4.5.2",
     "xstate": "*"
   }
 }