@xstate/react 3.1.0 → 3.1.2

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

@@ -7,7 +7,7 @@
      *
      * This source code is licensed under the MIT license found in the
      * LICENSE file in the root directory of this source tree.
-     */}var f="function"==typeof Object.is?Object.is:function(t,e){return t===e&&(0!==t||1/t==1/e)||t!=t&&e!=e},l=o.default.useState,v=o.default.useEffect,d=o.default.useLayoutEffect,p=o.default.useDebugValue;function b(t){var e=t.getSnapshot;t=t.value;try{var n=e();return!f(t,n)}catch(t){return!0}}var y="undefined"==typeof window||void 0===window.document||void 0===window.document.createElement?function(t,e){return e()}:function(t,e){var n=e(),r=l({inst:{value:n,getSnapshot:e}}),u=r[0].inst,o=r[1];return d((function(){u.value=n,u.getSnapshot=e,b(u)&&o({inst:u})}),[t,n,e]),v((function(){return b(u)&&o({inst:u}),t((function(){b(u)&&o({inst:u})}))}),[t]),p(n),n},h={useSyncExternalStore:void 0!==o.default.useSyncExternalStore?o.default.useSyncExternalStore:y};
+     */}var f="function"==typeof Object.is?Object.is:function(t,e){return t===e&&(0!==t||1/t==1/e)||t!=t&&e!=e},l=o.default.useState,v=o.default.useEffect,d=o.default.useLayoutEffect,p=o.default.useDebugValue;function b(t){var e=t.getSnapshot;t=t.value;try{var n=e();return!f(t,n)}catch(t){return!0}}var h="undefined"==typeof window||void 0===window.document||void 0===window.document.createElement?function(t,e){return e()}:function(t,e){var n=e(),r=l({inst:{value:n,getSnapshot:e}}),u=r[0].inst,o=r[1];return d((function(){u.value=n,u.getSnapshot=e,b(u)&&o({inst:u})}),[t,n,e]),v((function(){return b(u)&&o({inst:u}),t((function(){b(u)&&o({inst:u})}))}),[t]),p(n),n},y={useSyncExternalStore:void 0!==o.default.useSyncExternalStore?o.default.useSyncExternalStore:h};
 /**
      * @license React
      * use-sync-external-store-shim.development.js
@@ -17,7 +17,7 @@
      * This source code is licensed under the MIT license found in the
      * LICENSE file in the root directory of this source tree.
      */
-s((function(t,e){}));var S=s((function(t){t.exports=h}));
+s((function(t,e){}));var S=s((function(t){t.exports=y}));
 /**
      * @license React
      * use-sync-external-store-shim/with-selector.production.min.js
@@ -36,4 +36,4 @@ s((function(t,e){}));var S=s((function(t){t.exports=h}));
      * This source code is licensed under the MIT license found in the
      * LICENSE file in the root directory of this source tree.
      */
-s((function(t,e){}));var k=s((function(t){t.exports=w})),C=e.useLayoutEffect;function P(t){var e=a.useRef();return e.current||(e.current={v:t()}),e.current.v}function R(t,e){var r=P((function(){return"function"==typeof t?t():t})),u=e.context,o=e.guards,a=e.actions,c=e.activities,s=e.services,f=e.delays;e.state;var l=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}(e,["context","guards","actions","activities","services","delays","state"]),v=P((function(){var t={context:u,guards:o,actions:a,activities:c,services:s,delays:f},e=r.withConfig(t,(function(){return i(i({},r.context),u)}));return n.interpret(e,l)}));return C((function(){Object.assign(v.machine.options.actions,a),Object.assign(v.machine.options.guards,o),Object.assign(v.machine.options.activities,c),Object.assign(v.machine.options.services,s),Object.assign(v.machine.options.delays,f)}),[a,o,c,s,f]),v}function N(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,2),a=o[0],i=void 0===a?{}:a,s=o[1],f=R(t,i);return e.useEffect((function(){if(s){var t=f.subscribe(n.toObserver(s));return function(){t.unsubscribe()}}}),[s]),e.useEffect((function(){var t=i.state;return f.start(t?n.State.create(t):void 0),function(){f.stop(),f.status=n.InterpreterStatus.NotStarted}}),[]),f}function I(t){return t}function A(t){return 0!==t.status?t.getSnapshot():t.machine.initialState}function V(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function M(t){return"state"in t&&"machine"in t}function _(t){return"state"in t}function q(t){return"deferred"in t}function D(t){return"getSnapshot"in t?M(t)?A(t):t.getSnapshot():_(t)?t.state:void 0}function W(t,n){void 0===n&&(n=D);var r=e.useRef(t),u=e.useRef([]),o=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),a=e.useCallback((function(){return n(t)}),[t,n]),i=S.useSyncExternalStore(o,a,a),c=P((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=r.current;q(o)&&o.deferred?u.current.push(n):o.send(n)}}));return C((function(){for(r.current=t;u.current.length>0;){var e=u.current.shift();t.send(e)}}),[t]),[i,c]}var L=function(t,e){return t===e};function T(t,n,r,u){void 0===r&&(r=L);var o=e.useRef(null),a=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),i=e.useCallback((function(){return u?u(t):function(t,e){if(M(t)){if(0===t.status&&e.current)return e.current;var n=A(t);return e.current=0===t.status?n:null,n}return _(t)?t.state:void 0}(t,o)}),[t,u]);return k.useSyncExternalStoreWithSelector(a,i,i,n,r)}t.createActorContext=function(t){var e=a.createContext(null),n=e.Provider;function r(e){var r=e.children,u=e.machine,o=N(void 0===u?t:u);return a.createElement(n,{value:o},r)}function u(){var t=a.useContext(e);if(!t)throw new Error('You used a hook from "'.concat(r.displayName,"\" but it's not inside a <").concat(r.displayName,"> component."));return t}return r.displayName="ActorProvider(".concat(t.id,")"),{Provider:r,useActorRef:u,useActor:function(){return W(u())},useSelector:function(t,e){return T(u(),t,e)}}},t.shallowEqual=function(t,e){if(V(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var u=0;u<n.length;u++)if(!Object.prototype.hasOwnProperty.call(e,n[u])||!V(t[n[u]],e[n[u]]))return!1;return!0},t.useActor=W,t.useInterpret=N,t.useMachine=function(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,1),a=o[0],i=void 0===a?{}:a,s=R(t,i),f=e.useCallback((function(){return s.status===n.InterpreterStatus.NotStarted?i.state?n.State.create(i.state):s.machine.initialState:s.getSnapshot()}),[s]),l=e.useCallback((function(t,e){if(s.status===n.InterpreterStatus.NotStarted)return!0;var r=void 0===e.changed&&(Object.keys(e.children).length>0||"boolean"==typeof t.changed);return!(e.changed||r)}),[s]),v=e.useCallback((function(t){return s.subscribe(t).unsubscribe}),[s]),d=k.useSyncExternalStoreWithSelector(v,f,f,I,l);return e.useEffect((function(){var t=i.state;return s.start(t?n.State.create(t):void 0),function(){s.stop(),s.status=n.InterpreterStatus.NotStarted}}),[]),[d,s.send,s]},t.useSelector=T,t.useSpawn=function(t){return P((function(){return n.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));
+s((function(t,e){}));var k=s((function(t){t.exports=w})),C=e.useLayoutEffect;function P(t){var e=a.useRef();return e.current||(e.current={v:t()}),e.current.v}function R(t,e){var r=P((function(){return"function"==typeof t?t():t})),u=e.context,o=e.guards,a=e.actions,c=e.activities,s=e.services,f=e.delays;e.state;var l=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}(e,["context","guards","actions","activities","services","delays","state"]),v=P((function(){var t={context:u,guards:o,actions:a,activities:c,services:s,delays:f},e=r.withConfig(t,(function(){return i(i({},r.context),u)}));return n.interpret(e,l)}));return C((function(){Object.assign(v.machine.options.actions,a),Object.assign(v.machine.options.guards,o),Object.assign(v.machine.options.activities,c),Object.assign(v.machine.options.services,s),Object.assign(v.machine.options.delays,f)}),[a,o,c,s,f]),v}function N(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,2),a=o[0],i=void 0===a?{}:a,s=o[1],f=R(t,i);return e.useEffect((function(){if(s){var t=f.subscribe(n.toObserver(s));return function(){t.unsubscribe()}}}),[s]),e.useEffect((function(){var t=i.state;return f.start(t?n.State.create(t):void 0),function(){f.stop(),f.status=n.InterpreterStatus.NotStarted}}),[]),f}function I(t){return 0!==t.status?t.getSnapshot():t.machine.initialState}function A(t,e){return t===e?0!==t||0!==e||1/t==1/e:t!=t&&e!=e}function V(t){return"state"in t&&"machine"in t}function M(t,e,r){if(t.status===n.InterpreterStatus.NotStarted)return!0;var u=void 0===r.changed&&(Object.keys(r.children).length>0||"boolean"==typeof e.changed);return!(r.changed||u)}function W(t){return t}function _(t){return t}function q(t){return"state"in t}function D(t){return"deferred"in t}function L(t){return"getSnapshot"in t?V(t)?I(t):t.getSnapshot():q(t)?t.state:void 0}function T(t,n){void 0===n&&(n=L);var r=e.useRef(t),u=e.useRef([]),o=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),a=e.useCallback((function(){return n(t)}),[t,n]),i=e.useCallback((function(e,n){return V(t)?M(t,e,n):e===n}),[t]),c=k.useSyncExternalStoreWithSelector(o,a,a,_,i),s=P((function(){return function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=t[0],o=r.current;D(o)&&o.deferred?u.current.push(n):o.send(n)}}));return C((function(){for(r.current=t;u.current.length>0;){var e=u.current.shift();t.send(e)}}),[t]),[c,s]}var X=function(t,e){return t===e};function z(t,n,r,u){void 0===r&&(r=X);var o=e.useRef(null),a=e.useCallback((function(e){return t.subscribe(e).unsubscribe}),[t]),i=e.useCallback((function(){return u?u(t):function(t,e){if(V(t)){if(0===t.status&&e.current)return e.current;var n=I(t);return e.current=0===t.status?n:null,n}return q(t)?t.state:void 0}(t,o)}),[t,u]);return k.useSyncExternalStoreWithSelector(a,i,i,n,r)}t.createActorContext=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];var r=c(e,2),u=r[0],o=void 0===u?{}:u,i=r[1],s=a.createContext(null),f=s.Provider;function l(e){var n=e.children,r=e.machine,u=N(void 0===r?t:r,o,i);return a.createElement(f,{value:u},n)}function v(){var t=a.useContext(s);if(!t)throw new Error('You used a hook from "'.concat(l.displayName,"\" but it's not inside a <").concat(l.displayName,"> component."));return t}function d(){return T(v())}function p(t,e){return z(v(),t,e)}return l.displayName="ActorProvider(".concat(t.id,")"),{Provider:l,useActorRef:v,useActor:d,useSelector:p}},t.shallowEqual=function(t,e){if(A(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(var u=0;u<n.length;u++)if(!Object.prototype.hasOwnProperty.call(e,n[u])||!A(t[n[u]],e[n[u]]))return!1;return!0},t.useActor=T,t.useInterpret=N,t.useMachine=function(t){for(var r=[],u=1;u<arguments.length;u++)r[u-1]=arguments[u];var o=c(r,1),a=o[0],i=void 0===a?{}:a,s=R(t,i),f=e.useCallback((function(){return s.status===n.InterpreterStatus.NotStarted?i.state?n.State.create(i.state):s.machine.initialState:s.getSnapshot()}),[s]),l=e.useCallback((function(t,e){return M(s,t,e)}),[s]),v=e.useCallback((function(t){return s.subscribe(t).unsubscribe}),[s]),d=k.useSyncExternalStoreWithSelector(v,f,f,W,l);return e.useEffect((function(){var t=i.state;return s.start(t?n.State.create(t):void 0),function(){s.stop(),s.status=n.InterpreterStatus.NotStarted}}),[]),[d,s.send,s]},t.useSelector=z,t.useSpawn=function(t){return P((function(){return n.spawnBehavior(t)}))},Object.defineProperty(t,"__esModule",{value:!0})}));

package/es/createActorContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { RestParams } from './useInterpret';
 import { useActor as useActorUnbound } from './useActor';
 import { ActorRefFrom, AnyStateMachine, EmittedFrom } from 'xstate';
-export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine): {
+export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine, ...[options, observerOrListener]: RestParams<TMachine>): {
     useActor: () => ReturnType<typeof useActorUnbound<ActorRefFrom<TMachine>>>;
     useSelector: <T>(selector: (snapshot: EmittedFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
     useActorRef: () => ActorRefFrom<TMachine>;

package/es/createActorContext.js

@@ -1,13 +1,34 @@
+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 * as React from 'react';
 import { useInterpret } from './useInterpret';
 import { useActor as useActorUnbound } from './useActor';
 import { useSelector as useSelectorUnbound } from './useSelector';
 export function createActorContext(machine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 2), _c = _b[0], options = _c === void 0 ? {} : _c, observerOrListener = _b[1];
     var ReactContext = React.createContext(null);
     var OriginalProvider = ReactContext.Provider;
     function Provider(_a) {
         var children = _a.children, _b = _a.machine, providedMachine = _b === void 0 ? machine : _b;
-        var actor = useInterpret(providedMachine);
+        var actor = useInterpret(providedMachine, options, observerOrListener);
         return React.createElement(OriginalProvider, { value: actor }, children);
     }
     Provider.displayName = "ActorProvider(".concat(machine.id, ")");

package/es/useActor.js

@@ -1,8 +1,11 @@
 import { useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import useConstant from './useConstant';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { getServiceSnapshot, isService } from './utils';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { getServiceSnapshot, isInterpreterStateEqual, isService } from './utils';
+function identity(a) {
+    return a;
+}
 export function isActorWithState(actorRef) {
     return 'state' in actorRef;
 }
@@ -26,11 +29,14 @@ export function useActor(actorRef, getSnapshot) {
         var unsubscribe = actorRef.subscribe(handleStoreChange).unsubscribe;
         return unsubscribe;
     }, [actorRef]);
-    var boundGetSnapshot = useCallback(function () { return getSnapshot(actorRef); }, [
-        actorRef,
-        getSnapshot
-    ]);
-    var storeSnapshot = useSyncExternalStore(subscribe, boundGetSnapshot, boundGetSnapshot);
+    var boundGetSnapshot = useCallback(function () { return getSnapshot(actorRef); }, [actorRef, getSnapshot]);
+    var isEqual = useCallback(function (prevState, nextState) {
+        if (isService(actorRef)) {
+            return isInterpreterStateEqual(actorRef, prevState, nextState);
+        }
+        return prevState === nextState;
+    }, [actorRef]);
+    var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, identity, isEqual);
     var send = useConstant(function () { return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {

package/es/useInterpret.d.ts

@@ -2,7 +2,7 @@ import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvid
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
 export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<unknown, never>> & Partial<MachineOptions<unknown, never>>): AnyInterpreter;
-declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+export declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
     options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ] : [
@@ -10,5 +10,4 @@ declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementation
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ];
 export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
-export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/es/useMachine.js

@@ -18,6 +18,7 @@ import { useCallback, useEffect } from 'react';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { InterpreterStatus, State } from 'xstate';
 import { useIdleInterpreter } from './useInterpret';
+import { isInterpreterStateEqual } from './utils';
 function identity(a) {
     return a;
 }
@@ -39,18 +40,7 @@ export function useMachine(getMachine) {
         return service.getSnapshot();
     }, [service]);
     var isEqual = useCallback(function (prevState, nextState) {
-        if (service.status === InterpreterStatus.NotStarted) {
-            return true;
-        }
-        // 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.
-        //
-        // The "live" initial state will have .changed === undefined.
-        var initialStateChanged = nextState.changed === undefined &&
-            (Object.keys(nextState.children).length > 0 ||
-                typeof prevState.changed === 'boolean');
-        return !(nextState.changed || initialStateChanged);
+        return isInterpreterStateEqual(service, prevState, nextState);
     }, [service]);
     var subscribe = useCallback(function (handleStoreChange) {
         var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;

package/es/utils.d.ts

@@ -1,6 +1,7 @@
-import { Interpreter } from 'xstate';
+import { AnyInterpreter, AnyState, Interpreter } from 'xstate';
 export declare function partition<T, A extends T, B extends T>(items: T[], predicate: (item: T) => item is A): [A[], B[]];
 export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state'];
 export declare function shallowEqual(objA: any, objB: any): boolean;
 export declare function isService(actor: any): actor is Interpreter<any, any, any, any>;
+export declare function isInterpreterStateEqual(service: AnyInterpreter, prevState: AnyState, nextState: AnyState): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/es/utils.js

@@ -25,6 +25,7 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
+import { InterpreterStatus } from 'xstate';
 export function partition(items, predicate) {
     var e_1, _a;
     var _b = __read([[], []], 2), truthy = _b[0], falsy = _b[1];
@@ -86,3 +87,17 @@ export function shallowEqual(objA, objB) {
 export function isService(actor) {
     return 'state' in actor && 'machine' in actor;
 }
+export function isInterpreterStateEqual(service, prevState, nextState) {
+    if (service.status === InterpreterStatus.NotStarted) {
+        return true;
+    }
+    // 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.
+    //
+    // The "live" initial state will have .changed === undefined.
+    var initialStateChanged = nextState.changed === undefined &&
+        (Object.keys(nextState.children).length > 0 ||
+            typeof prevState.changed === 'boolean');
+    return !(nextState.changed || initialStateChanged);
+}

package/lib/createActorContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { RestParams } from './useInterpret';
 import { useActor as useActorUnbound } from './useActor';
 import { ActorRefFrom, AnyStateMachine, EmittedFrom } from 'xstate';
-export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine): {
+export declare function createActorContext<TMachine extends AnyStateMachine>(machine: TMachine, ...[options, observerOrListener]: RestParams<TMachine>): {
     useActor: () => ReturnType<typeof useActorUnbound<ActorRefFrom<TMachine>>>;
     useSelector: <T>(selector: (snapshot: EmittedFrom<TMachine>) => T, compare?: (a: T, b: T) => boolean) => T;
     useActorRef: () => ActorRefFrom<TMachine>;

package/lib/createActorContext.js

@@ -1,4 +1,20 @@
 "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.createActorContext = void 0;
 var React = require("react");
@@ -6,11 +22,16 @@ var useInterpret_1 = require("./useInterpret");
 var useActor_1 = require("./useActor");
 var useSelector_1 = require("./useSelector");
 function createActorContext(machine) {
+    var _a = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        _a[_i - 1] = arguments[_i];
+    }
+    var _b = __read(_a, 2), _c = _b[0], options = _c === void 0 ? {} : _c, observerOrListener = _b[1];
     var ReactContext = React.createContext(null);
     var OriginalProvider = ReactContext.Provider;
     function Provider(_a) {
         var children = _a.children, _b = _a.machine, providedMachine = _b === void 0 ? machine : _b;
-        var actor = (0, useInterpret_1.useInterpret)(providedMachine);
+        var actor = (0, useInterpret_1.useInterpret)(providedMachine, options, observerOrListener);
         return React.createElement(OriginalProvider, { value: actor }, children);
     }
     Provider.displayName = "ActorProvider(".concat(machine.id, ")");

package/lib/useActor.js

@@ -4,8 +4,11 @@ exports.useActor = exports.isActorWithState = void 0;
 var react_1 = require("react");
 var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
 var useConstant_1 = require("./useConstant");
-var shim_1 = require("use-sync-external-store/shim");
+var with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var utils_1 = require("./utils");
+function identity(a) {
+    return a;
+}
 function isActorWithState(actorRef) {
     return 'state' in actorRef;
 }
@@ -30,11 +33,14 @@ function useActor(actorRef, getSnapshot) {
         var unsubscribe = actorRef.subscribe(handleStoreChange).unsubscribe;
         return unsubscribe;
     }, [actorRef]);
-    var boundGetSnapshot = (0, react_1.useCallback)(function () { return getSnapshot(actorRef); }, [
-        actorRef,
-        getSnapshot
-    ]);
-    var storeSnapshot = (0, shim_1.useSyncExternalStore)(subscribe, boundGetSnapshot, boundGetSnapshot);
+    var boundGetSnapshot = (0, react_1.useCallback)(function () { return getSnapshot(actorRef); }, [actorRef, getSnapshot]);
+    var isEqual = (0, react_1.useCallback)(function (prevState, nextState) {
+        if ((0, utils_1.isService)(actorRef)) {
+            return (0, utils_1.isInterpreterStateEqual)(actorRef, prevState, nextState);
+        }
+        return prevState === nextState;
+    }, [actorRef]);
+    var storeSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, boundGetSnapshot, boundGetSnapshot, identity, isEqual);
     var send = (0, useConstant_1.default)(function () { return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {

package/lib/useInterpret.d.ts

@@ -2,7 +2,7 @@ import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvid
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
 export declare function useIdleInterpreter(getMachine: MaybeLazy<AnyStateMachine>, options: Partial<InterpreterOptions> & Partial<UseMachineOptions<unknown, never>> & Partial<MachineOptions<unknown, never>>): AnyInterpreter;
-declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+export declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
     options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ] : [
@@ -10,5 +10,4 @@ declare type RestParams<TMachine extends AnyStateMachine> = AreAllImplementation
     observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ];
 export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
-export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/lib/useMachine.js

@@ -21,6 +21,7 @@ var react_1 = require("react");
 var with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var xstate_1 = require("xstate");
 var useInterpret_1 = require("./useInterpret");
+var utils_1 = require("./utils");
 function identity(a) {
     return a;
 }
@@ -42,18 +43,7 @@ function useMachine(getMachine) {
         return service.getSnapshot();
     }, [service]);
     var isEqual = (0, react_1.useCallback)(function (prevState, nextState) {
-        if (service.status === xstate_1.InterpreterStatus.NotStarted) {
-            return true;
-        }
-        // 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.
-        //
-        // The "live" initial state will have .changed === undefined.
-        var initialStateChanged = nextState.changed === undefined &&
-            (Object.keys(nextState.children).length > 0 ||
-                typeof prevState.changed === 'boolean');
-        return !(nextState.changed || initialStateChanged);
+        return (0, utils_1.isInterpreterStateEqual)(service, prevState, nextState);
     }, [service]);
     var subscribe = (0, react_1.useCallback)(function (handleStoreChange) {
         var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;

package/lib/utils.d.ts

@@ -1,6 +1,7 @@
-import { Interpreter } from 'xstate';
+import { AnyInterpreter, AnyState, Interpreter } from 'xstate';
 export declare function partition<T, A extends T, B extends T>(items: T[], predicate: (item: T) => item is A): [A[], B[]];
 export declare function getServiceSnapshot<TService extends Interpreter<any, any, any, any>>(service: TService): TService['state'];
 export declare function shallowEqual(objA: any, objB: any): boolean;
 export declare function isService(actor: any): actor is Interpreter<any, any, any, any>;
+export declare function isInterpreterStateEqual(service: AnyInterpreter, prevState: AnyState, nextState: AnyState): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/utils.js

@@ -27,7 +27,8 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isService = exports.shallowEqual = exports.getServiceSnapshot = exports.partition = void 0;
+exports.isInterpreterStateEqual = exports.isService = exports.shallowEqual = exports.getServiceSnapshot = exports.partition = void 0;
+var xstate_1 = require("xstate");
 function partition(items, predicate) {
     var e_1, _a;
     var _b = __read([[], []], 2), truthy = _b[0], falsy = _b[1];
@@ -93,3 +94,18 @@ function isService(actor) {
     return 'state' in actor && 'machine' in actor;
 }
 exports.isService = isService;
+function isInterpreterStateEqual(service, prevState, nextState) {
+    if (service.status === xstate_1.InterpreterStatus.NotStarted) {
+        return true;
+    }
+    // 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.
+    //
+    // The "live" initial state will have .changed === undefined.
+    var initialStateChanged = nextState.changed === undefined &&
+        (Object.keys(nextState.children).length > 0 ||
+            typeof prevState.changed === 'boolean');
+    return !(nextState.changed || initialStateChanged);
+}
+exports.isInterpreterStateEqual = isInterpreterStateEqual;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "@xstate/fsm": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^4.35.3"
+    "xstate": "^4.35.4"
   },
   "peerDependenciesMeta": {
     "@xstate/fsm": {