@xstate/react 2.0.0-pr2674-2021926101023 → 3.0.0

package/es/useActor.js

@@ -1,31 +1,13 @@
-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 { useState, useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import useConstant from './useConstant';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 export function isActorWithState(actorRef) {
     return 'state' in actorRef;
 }
 function isDeferredActor(actorRef) {
     return 'deferred' in actorRef;
 }
-var noop = function () {
-    /* ... */
-};
 function defaultGetSnapshot(actorRef) {
     return 'getSnapshot' in actorRef
         ? actorRef.getSnapshot()
@@ -37,7 +19,15 @@ export function useActor(actorRef, getSnapshot) {
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
     var actorRefRef = useRef(actorRef);
     var deferredEventsRef = useRef([]);
-    var _a = __read(useState(function () { return getSnapshot(actorRef); }), 2), current = _a[0], setCurrent = _a[1];
+    var subscribe = useCallback(function (handleStoreChange) {
+        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 send = useConstant(function () { return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
@@ -45,7 +35,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,
@@ -60,20 +50,11 @@ export function useActor(actorRef, getSnapshot) {
     }; });
     useIsomorphicLayoutEffect(function () {
         actorRefRef.current = actorRef;
-        setCurrent(getSnapshot(actorRef));
-        var subscription = actorRef.subscribe({
-            next: function (emitted) { return setCurrent(emitted); },
-            error: noop,
-            complete: noop
-        });
         // Dequeue deferred events from the previous deferred actorRef
         while (deferredEventsRef.current.length > 0) {
             var deferredEvent = deferredEventsRef.current.shift();
             actorRef.send(deferredEvent);
         }
-        return function () {
-            subscription.unsubscribe();
-        };
     }, [actorRef]);
-    return [current, send];
+    return [storeSnapshot, send];
 }

package/es/useInterpret.d.ts

@@ -1,13 +1,14 @@
-import { AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, Observer, State, StateMachine } from 'xstate';
+import { AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineOptions, InterpreterFrom, InterpreterOptions, MachineOptions, Observer, StateFrom } from 'xstate';
 import { MaybeLazy } from './types';
 import { UseMachineOptions } from './useMachine';
-declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+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 ? [
     options: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta'], true>,
-    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ] : [
     options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>,
-    observerOrListener?: Observer<State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>> | ((value: State<TMachine['__TContext'], TMachine['__TEvent'], any, TMachine['__TTypestate'], TMachine['__TResolvedTypesMeta']>) => void)
+    observerOrListener?: Observer<StateFrom<TMachine>> | ((value: StateFrom<TMachine>) => void)
 ];
-export declare function useInterpret<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
+export declare function useInterpret<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options, observerOrListener]: RestParams<TMachine>): InterpreterFrom<TMachine>;
 export {};
 //# sourceMappingURL=useInterpret.d.ts.map

package/es/useInterpret.js

@@ -36,44 +36,23 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { interpret, State } from 'xstate';
+import { interpret, InterpreterStatus, State, toObserver } from 'xstate';
 import useConstant from './useConstant';
-import { useReactEffectActions } from './useReactEffectActions';
-// copied from core/src/utils.ts
-// it avoids a breaking change between this package and XState which is its peer dep
-function toObserver(nextHandler, errorHandler, completionHandler) {
-    if (typeof nextHandler === 'object') {
-        return nextHandler;
-    }
-    var noop = function () { return void 0; };
-    return {
-        next: nextHandler,
-        error: errorHandler || noop,
-        complete: completionHandler || noop
-    };
-}
-export function useInterpret(getMachine) {
-    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];
+export function useIdleInterpreter(getMachine, options) {
     var machine = useConstant(function () {
         return typeof getMachine === 'function' ? getMachine() : getMachine;
     });
     if (process.env.NODE_ENV !== 'production' &&
         typeof getMachine !== 'function') {
-        var _d = __read(useState(machine), 1), initialMachine = _d[0];
+        var _a = __read(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, services = options.services, delays = options.delays, rehydratedState = options.state, interpreterOptions = __rest(options, ["context", "guards", "actions", "services", "delays", "state"]);
-    // it's not defined in `TypegenMachineOptions` so we can't just unpack this property here freely
-    var activities = options.activities;
+    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(function () {
         var machineConfig = {
             context: context,
@@ -84,23 +63,8 @@ export function useInterpret(getMachine) {
             delays: delays
         };
         var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
-        return interpret(machineWithConfig, __assign({ deferEvents: true }, interpreterOptions));
+        return interpret(machineWithConfig, interpreterOptions);
     });
-    useIsomorphicLayoutEffect(function () {
-        var sub;
-        if (observerOrListener) {
-            sub = service.subscribe(toObserver(observerOrListener));
-        }
-        return function () {
-            sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
-        };
-    }, [observerOrListener]);
-    useIsomorphicLayoutEffect(function () {
-        service.start(rehydratedState ? State.create(rehydratedState) : undefined);
-        return function () {
-            service.stop();
-        };
-    }, []);
     // 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.
@@ -111,6 +75,31 @@ export function useInterpret(getMachine) {
         Object.assign(service.machine.options.services, services);
         Object.assign(service.machine.options.delays, delays);
     }, [actions, guards, activities, services, delays]);
-    useReactEffectActions(service);
+    return service;
+}
+export function useInterpret(getMachine) {
+    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 service = useIdleInterpreter(getMachine, options);
+    useEffect(function () {
+        if (!observerOrListener) {
+            return;
+        }
+        var sub = service.subscribe(toObserver(observerOrListener));
+        return function () {
+            sub.unsubscribe();
+        };
+    }, [observerOrListener]);
+    useEffect(function () {
+        var rehydratedState = options.state;
+        service.start(rehydratedState ? State.create(rehydratedState) : undefined);
+        return function () {
+            service.stop();
+            service.status = InterpreterStatus.NotStarted;
+        };
+    }, []);
     return service;
 }

package/es/useMachine.d.ts

@@ -1,7 +1,5 @@
-import { ActionFunction, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineOptions, InterpreterFrom, InterpreterOptions, StateConfig, StateFrom, StateMachine } from 'xstate';
-import { MaybeLazy, Prop, ReactActionFunction } from './types';
-export declare function asEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
-export declare function asLayoutEffect<TContext, TEvent extends EventObject>(exec: ActionFunction<TContext, TEvent>): ReactActionFunction<TContext, TEvent>;
+import { AnyStateMachine, AreAllImplementationsAssumedToBeProvided, EventObject, InternalMachineOptions, InterpreterFrom, InterpreterOptions, StateConfig, StateFrom } from 'xstate';
+import { MaybeLazy, Prop } from './types';
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
     /**
      * If provided, will be merged with machine's `context`.
@@ -13,12 +11,12 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-declare type RestParams<TMachine extends StateMachine<any, any, any, any, any, any>> = AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends false ? [
+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>
 ] : [
     options?: InterpreterOptions & UseMachineOptions<TMachine['__TContext'], TMachine['__TEvent']> & InternalMachineOptions<TMachine['__TContext'], TMachine['__TEvent'], TMachine['__TResolvedTypesMeta']>
 ];
-declare type UseMachineReturn<TMachine extends StateMachine<any, any, any, any, any, any>, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
-export declare function useMachine<TMachine extends StateMachine<any, any, any, any, any, any>>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
+declare type UseMachineReturn<TMachine extends AnyStateMachine, TInterpreter = InterpreterFrom<TMachine>> = [StateFrom<TMachine>, Prop<TInterpreter, 'send'>, TInterpreter];
+export declare function useMachine<TMachine extends AnyStateMachine>(getMachine: MaybeLazy<TMachine>, ...[options]: RestParams<TMachine>): UseMachineReturn<TMachine>;
 export {};
 //# sourceMappingURL=useMachine.d.ts.map

package/es/useMachine.js

@@ -14,37 +14,12 @@ 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;
-};
-import { useCallback, useState } from 'react';
-import { State } from 'xstate';
-import { ReactEffectType } from './types';
-import { useInterpret } from './useInterpret';
-function createReactActionFunction(exec, tag) {
-    var effectExec = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        // don't execute; just return
-        return function () {
-            return exec.apply(void 0, __spreadArray([], __read(args)));
-        };
-    };
-    Object.defineProperties(effectExec, {
-        name: { value: "effect:" + exec.name },
-        __effect: { value: tag }
-    });
-    return effectExec;
-}
-export function asEffect(exec) {
-    return createReactActionFunction(exec, ReactEffectType.Effect);
-}
-export function asLayoutEffect(exec) {
-    return createReactActionFunction(exec, ReactEffectType.LayoutEffect);
+import { useCallback, useEffect } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { InterpreterStatus, State } from 'xstate';
+import { useIdleInterpreter } from './useInterpret';
+function identity(a) {
+    return a;
 }
 export function useMachine(getMachine) {
     var _a = [];
@@ -52,23 +27,43 @@ export function useMachine(getMachine) {
         _a[_i - 1] = arguments[_i];
     }
     var _b = __read(_a, 1), _c = _b[0], options = _c === void 0 ? {} : _c;
-    var listener = useCallback(function (nextState) {
+    // using `useIdleInterpreter` allows us to subscribe to the service *before* we start it
+    // so we don't miss any notifications
+    var service = useIdleInterpreter(getMachine, options);
+    var getSnapshot = useCallback(function () {
+        if (service.status === InterpreterStatus.NotStarted) {
+            return (options.state
+                ? State.create(options.state)
+                : service.machine.initialState);
+        }
+        return service.state;
+    }, [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;
-        if (nextState.changed || initialStateChanged) {
-            setState(nextState);
-        }
+        var initialStateChanged = nextState.changed === undefined &&
+            (Object.keys(nextState.children).length > 0 ||
+                typeof prevState.changed === 'boolean');
+        return !(nextState.changed || initialStateChanged);
+    }, [service]);
+    var subscribe = useCallback(function (handleStoreChange) {
+        var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
+    }, [service]);
+    var storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    useEffect(function () {
+        var rehydratedState = options.state;
+        service.start(rehydratedState ? State.create(rehydratedState) : undefined);
+        return function () {
+            service.stop();
+            service.status = InterpreterStatus.NotStarted;
+        };
     }, []);
-    var service = useInterpret(getMachine, options, listener);
-    var _d = __read(useState(function () {
-        var initialState = service.machine.initialState;
-        return (options.state
-            ? State.create(options.state)
-            : initialState);
-    }), 2), state = _d[0], setState = _d[1];
-    return [state, service.send, service];
+    return [storeSnapshot, service.send, service];
 }

package/es/useSelector.js

@@ -1,8 +1,7 @@
-import { useMemo, useRef } from 'react';
-import { useSubscription } from 'use-subscription';
-import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
+import { useCallback } from 'react';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import { isActorWithState } from './useActor';
-import { getServiceSnapshot } from './useService';
+import { getServiceSnapshot } from './utils';
 function isService(actor) {
     return 'state' in actor && 'machine' in actor;
 }
@@ -17,49 +16,14 @@ var defaultGetSnapshot = function (a) {
 export function useSelector(actor, selector, compare, getSnapshot) {
     if (compare === void 0) { compare = defaultCompare; }
     if (getSnapshot === void 0) { getSnapshot = defaultGetSnapshot; }
-    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();
-                };
-            }
-        };
-        // 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)
+    var subscribe = useCallback(function (handleStoreChange) {
+        var unsubscribe = actor.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
     }, [actor]);
-    var currentSelected = useSubscription(subscription);
-    if (latestSelectorRef.current !== selector) {
-        var selected = selector(subscription.getSnapshot());
-        if (!compare(currentSelected, selected)) {
-            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);
-    });
-    return currentSelected;
+    var boundGetSnapshot = useCallback(function () { return getSnapshot(actor); }, [
+        actor,
+        getSnapshot
+    ]);
+    var selectedSnapshot = useSyncExternalStoreWithSelector(subscribe, boundGetSnapshot, boundGetSnapshot, selector, compare);
+    return selectedSnapshot;
 }

package/es/useSpawn.js

@@ -1,4 +1,4 @@
-import { spawnBehavior } from 'xstate/lib/behaviors';
+import { spawnBehavior } from 'xstate';
 import useConstant from './useConstant';
 /**
  * React hook that spawns an `ActorRef` with the specified `behavior`.

package/es/utils.d.ts

@@ -1,2 +1,4 @@
+import { 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'];
 //# sourceMappingURL=utils.d.ts.map

package/es/utils.js

@@ -48,3 +48,6 @@ export function partition(items, predicate) {
     }
     return [truthy, falsy];
 }
+export function getServiceSnapshot(service) {
+    return service.status !== 0 ? service.state : service.machine.initialState;
+}

package/lib/fsm.d.ts

@@ -1,20 +1,4 @@
-import { StateMachine, EventObject, Typestate } from '@xstate/fsm';
-export declare function useMachine<TContext extends object, TEvent extends EventObject = EventObject, TState extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(stateMachine: StateMachine.Machine<TContext, TEvent, TState>, options?: {
-    actions?: StateMachine.ActionMap<TContext, TEvent>;
-}): [
-    StateMachine.State<TContext, TEvent, TState>,
-    StateMachine.Service<TContext, TEvent, TState>['send'],
-    StateMachine.Service<TContext, TEvent, TState>
-];
-export declare function useService<TContext extends object, TEvent extends EventObject = EventObject, TState extends Typestate<TContext> = {
-    value: any;
-    context: TContext;
-}>(service: StateMachine.Service<TContext, TEvent, TState>): [
-    StateMachine.State<TContext, TEvent, TState>,
-    StateMachine.Service<TContext, TEvent, TState>['send'],
-    StateMachine.Service<TContext, TEvent, TState>
-];
+import { MachineImplementationsFrom, ServiceFrom, StateFrom, StateMachine } from '@xstate/fsm';
+export declare function useMachine<TMachine extends StateMachine.AnyMachine>(stateMachine: TMachine, options?: MachineImplementationsFrom<TMachine>): [StateFrom<TMachine>, ServiceFrom<TMachine>['send'], ServiceFrom<TMachine>];
+export declare function useService<TService extends StateMachine.AnyService>(service: TService): [StateFrom<TService>, TService['send'], TService];
 //# sourceMappingURL=fsm.d.ts.map

package/lib/fsm.js

@@ -17,10 +17,14 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useService = exports.useMachine = void 0;
-var react_1 = require("react");
 var fsm_1 = require("@xstate/fsm");
-var use_subscription_1 = require("use-subscription");
+var react_1 = require("react");
+var use_isomorphic_layout_effect_1 = require("use-isomorphic-layout-effect");
+var with_selector_1 = require("use-sync-external-store/shim/with-selector");
 var useConstant_1 = require("./useConstant");
+function identity(a) {
+    return a;
+}
 var getServiceState = function (service) {
     var currentValue;
     service
@@ -31,48 +35,53 @@ var getServiceState = function (service) {
     return currentValue;
 };
 function useMachine(stateMachine, options) {
+    var persistedStateRef = (0, react_1.useRef)();
     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 _b = __read(react_1.useState(function () { return getServiceState(service); }), 2), state = _b[0], setState = _b[1];
-    react_1.useEffect(function () {
+    var _b = __read((0, useConstant_1.default)(function () {
+        var queue = [];
+        var service = (0, fsm_1.interpret)((0, fsm_1.createMachine)(stateMachine.config, options ? options : stateMachine._options));
+        var send = service.send;
+        service.send = function (event) {
+            if (service.status === fsm_1.InterpreterStatus.NotStarted) {
+                queue.push(event);
+                return;
+            }
+            send(event);
+            persistedStateRef.current = service.state;
+        };
+        return [service, queue];
+    }), 2), service = _b[0], queue = _b[1];
+    (0, use_isomorphic_layout_effect_1.default)(function () {
         if (options) {
             service._machine._options = options;
         }
     });
-    react_1.useEffect(function () {
-        service.subscribe(setState);
+    var useServiceResult = useService(service);
+    (0, react_1.useEffect)(function () {
+        service.start(persistedStateRef.current);
+        queue.forEach(service.send);
+        persistedStateRef.current = service.state;
         return function () {
             service.stop();
         };
     }, []);
-    return [state, service.send, service];
+    return useServiceResult;
 }
 exports.useMachine = useMachine;
+var isEqual = function (_prevState, nextState) { return nextState.changed === false; };
 function useService(service) {
-    var subscription = react_1.useMemo(function () {
-        var currentState = getServiceState(service);
-        return {
-            getCurrentValue: function () { return currentState; },
-            subscribe: function (callback) {
-                var unsubscribe = service.subscribe(function (state) {
-                    if (state.changed !== false) {
-                        currentState = state;
-                        callback();
-                    }
-                }).unsubscribe;
-                return unsubscribe;
-            }
-        };
+    var getSnapshot = (0, react_1.useCallback)(function () { return getServiceState(service); }, [service]);
+    var subscribe = (0, react_1.useCallback)(function (handleStoreChange) {
+        var unsubscribe = service.subscribe(handleStoreChange).unsubscribe;
+        return unsubscribe;
     }, [service]);
-    var state = use_subscription_1.useSubscription(subscription);
-    return [state, service.send, service];
+    var storeSnapshot = (0, with_selector_1.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity, isEqual);
+    return [storeSnapshot, service.send, service];
 }
 exports.useService = useService;

package/lib/index.d.ts

@@ -1,5 +1,4 @@
-export { useMachine, asEffect, asLayoutEffect } from './useMachine';
-export { useService } from './useService';
+export { useMachine } from './useMachine';
 export { useActor } from './useActor';
 export { useInterpret } from './useInterpret';
 export { useSelector } from './useSelector';

package/lib/index.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useService = exports.asLayoutEffect = exports.asEffect = exports.useMachine = void 0;
+exports.useSpawn = exports.useSelector = exports.useInterpret = exports.useActor = exports.useMachine = void 0;
 var useMachine_1 = require("./useMachine");
 Object.defineProperty(exports, "useMachine", { enumerable: true, get: function () { return useMachine_1.useMachine; } });
-Object.defineProperty(exports, "asEffect", { enumerable: true, get: function () { return useMachine_1.asEffect; } });
-Object.defineProperty(exports, "asLayoutEffect", { enumerable: true, get: function () { return useMachine_1.asLayoutEffect; } });
-var useService_1 = require("./useService");
-Object.defineProperty(exports, "useService", { enumerable: true, get: function () { return useService_1.useService; } });
 var useActor_1 = require("./useActor");
 Object.defineProperty(exports, "useActor", { enumerable: true, get: function () { return useActor_1.useActor; } });
 var useInterpret_1 = require("./useInterpret");

package/lib/types.d.ts

@@ -1,18 +1,7 @@
-import { ActionMeta, ActionObject, EventObject, State, StateConfig } from 'xstate';
+import { EventObject, StateConfig } from 'xstate';
 export declare type MaybeLazy<T> = T | (() => T);
 export declare type NoInfer<T> = [T][T extends any ? 0 : any];
 export declare type Prop<T, K> = K extends keyof T ? T[K] : never;
-export declare enum ReactEffectType {
-    Effect = 1,
-    LayoutEffect = 2
-}
-export interface ReactActionFunction<TContext, TEvent extends EventObject> {
-    (context: TContext, event: TEvent, meta: ActionMeta<TContext, TEvent>): () => void;
-    __effect: ReactEffectType;
-}
-export interface ReactActionObject<TContext, TEvent extends EventObject> extends ActionObject<TContext, TEvent> {
-    exec: ReactActionFunction<TContext, TEvent>;
-}
 export interface UseMachineOptions<TContext, TEvent extends EventObject> {
     /**
      * If provided, will be merged with machine's `context`.
@@ -24,8 +13,4 @@ export interface UseMachineOptions<TContext, TEvent extends EventObject> {
      */
     state?: StateConfig<TContext, TEvent>;
 }
-export declare type ActionStateTuple<TContext, TEvent extends EventObject> = [
-    ReactActionObject<TContext, TEvent>,
-    State<TContext, TEvent>
-];
 //# sourceMappingURL=types.d.ts.map

package/lib/types.js

@@ -1,8 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactEffectType = void 0;
-var ReactEffectType;
-(function (ReactEffectType) {
-    ReactEffectType[ReactEffectType["Effect"] = 1] = "Effect";
-    ReactEffectType[ReactEffectType["LayoutEffect"] = 2] = "LayoutEffect";
-})(ReactEffectType = exports.ReactEffectType || (exports.ReactEffectType = {}));