@xstate/react 4.0.0-beta.8 → 4.0.0

package/README.md

@@ -21,14 +21,6 @@ npm i xstate @xstate/react
 
 By using the global variable `XStateReact`
 
-or
-
-```html
-<script src="https://unpkg.com/@xstate/react/dist/xstate-react-fsm.umd.min.js"></script>
-```
-
-By using the global variable `XStateReactFSM`
-
 2. Import the `useMachine` hook:
 
 ```js

package/dist/declarations/src/createActorContext.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
-import { ActorRefFrom, AnyStateMachine, SnapshotFrom, InterpreterOptions, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
-type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TAction, infer TActorMap, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TAction, TActorMap, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
-export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: InterpreterOptions<TLogic>): {
+import { ActorRefFrom, AnyStateMachine, SnapshotFrom, ActorOptions, AreAllImplementationsAssumedToBeProvided, MarkAllImplementationsAsProvided, StateMachine, AnyActorLogic } from 'xstate';
+type ToMachinesWithProvidedImplementations<TMachine extends AnyStateMachine> = TMachine extends StateMachine<infer TContext, infer TEvent, infer TChildren, infer TActor, infer TAction, infer TGuard, infer TDelay, infer TStateValue, infer TTag, infer TInput, infer TOutput, infer TResolvedTypesMeta> ? StateMachine<TContext, TEvent, TChildren, TActor, TAction, TGuard, TDelay, TStateValue, TTag, TInput, TOutput, AreAllImplementationsAssumedToBeProvided<TResolvedTypesMeta> extends false ? MarkAllImplementationsAsProvided<TResolvedTypesMeta> : TResolvedTypesMeta> : never;
+export declare function createActorContext<TLogic extends AnyActorLogic>(actorLogic: TLogic, interpreterOptions?: ActorOptions<TLogic>): {
     useSelector: <T>(selector: (snapshot: SnapshotFrom<TLogic>) => T, compare?: (a: T, b: T) => boolean) => T;
     useActorRef: () => ActorRefFrom<TLogic>;
     Provider: (props: {
         children: React.ReactNode;
-        options?: InterpreterOptions<TLogic>;
+        options?: ActorOptions<TLogic>;
+        /**
+         * @deprecated Use `logic` instead.
+         */
+        machine?: never;
     } & (TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends true ? {
         logic?: TLogic;
     } : {

package/dist/declarations/src/useActor.d.ts

@@ -1,2 +1,2 @@
-import { ActorRefFrom, AnyActorLogic, InterpreterOptions, SnapshotFrom } from 'xstate';
-export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: InterpreterOptions<TLogic>): [SnapshotFrom<TLogic>, ActorRefFrom<TLogic>['send'], ActorRefFrom<TLogic>];
+import { ActorRefFrom, AnyActorLogic, ActorOptions, SnapshotFrom } from 'xstate';
+export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: ActorOptions<TLogic>): [SnapshotFrom<TLogic>, ActorRefFrom<TLogic>['send'], ActorRefFrom<TLogic>];

package/dist/declarations/src/useActorRef.d.ts

@@ -1,14 +1,3 @@
-import { AnyActorLogic, AnyInterpreter, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InternalMachineImplementations, ActorRefFrom, InterpreterOptions, Observer, StateFrom, SnapshotFrom } from 'xstate';
-export declare function useIdleInterpreter(machine: AnyActorLogic, options: Partial<InterpreterOptions<AnyActorLogic>>): AnyInterpreter;
-type RestParams<TLogic extends AnyActorLogic> = TLogic extends AnyStateMachine ? AreAllImplementationsAssumedToBeProvided<TLogic['__TResolvedTypesMeta']> extends false ? [
-    options: InterpreterOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TLogic['__TResolvedTypesMeta'], true>,
-    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
-] : [
-    options?: InterpreterOptions<TLogic> & InternalMachineImplementations<TLogic['__TContext'], TLogic['__TEvent'], TLogic['__TResolvedTypesMeta']>,
-    observerOrListener?: Observer<StateFrom<TLogic>> | ((value: StateFrom<TLogic>) => void)
-] : [
-    options?: InterpreterOptions<TLogic>,
-    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
-];
-export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: RestParams<TLogic>): ActorRefFrom<TLogic>;
-export {};
+import { AnyActorLogic, AnyActor, ActorRefFrom, ActorOptions, Observer, SnapshotFrom } from 'xstate';
+export declare function useIdleActorRef(logic: AnyActorLogic, options: Partial<ActorOptions<AnyActorLogic>>): AnyActor;
+export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, options?: ActorOptions<TLogic>, observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)): ActorRefFrom<TLogic>;

package/dist/declarations/src/useMachine.d.ts

@@ -1,9 +1,8 @@
-import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, InterpreterOptions, MissingImplementationsError, StateFrom } from 'xstate';
+import { ActorRefFrom, AnyStateMachine, AreAllImplementationsAssumedToBeProvided, ActorOptions, MissingImplementationsError, StateFrom } from 'xstate';
 /**
- *
- * @deprecated Use `useActor(...)` instead.
+ * @alias useActor
  */
-export declare function useMachine<TMachine extends AnyStateMachine>(machine: AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? TMachine : MissingImplementationsError<TMachine['__TResolvedTypesMeta']>, options?: InterpreterOptions<TMachine>): [
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: AreAllImplementationsAssumedToBeProvided<TMachine['__TResolvedTypesMeta']> extends true ? TMachine : MissingImplementationsError<TMachine['__TResolvedTypesMeta']>, options?: ActorOptions<TMachine>): [
     StateFrom<TMachine>,
     ActorRefFrom<TMachine>['send'],
     ActorRefFrom<TMachine>

package/dist/xstate-react.cjs.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var shim = require('use-sync-external-store/shim');
 var xstate = require('xstate');
-var useConstant = require('./useConstant-2ee82f84.cjs.js');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
-require('xstate/actors');
 var withSelector = require('use-sync-external-store/shim/with-selector');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -33,19 +31,60 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-function useIdleInterpreter(machine, options) {
-  const actorRef = useConstant.useConstant(() => {
-    return xstate.interpret(machine, options);
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
+  }
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
   });
+}
+
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
+    const actorRef = xstate.createActor(logic, options);
+    return [logic.config, actorRef];
+  });
+  if (logic.config !== currentConfig) {
+    const newActorRef = xstate.createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -58,16 +97,14 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -81,9 +118,7 @@ function useActor(logic, options = {}) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];
@@ -168,8 +203,7 @@ function createActorContext(actorLogic, interpreterOptions) {
 }
 
 /**
- *
- * @deprecated Use `useActor(...)` instead.
+ * @alias useActor
  */
 function useMachine(machine, options = {}) {
   return useActor(machine, options);

package/dist/xstate-react.development.cjs.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var shim = require('use-sync-external-store/shim');
 var xstate = require('xstate');
-var useConstant = require('./useConstant-ae6dceac.development.cjs.js');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
-var actors = require('xstate/actors');
 var withSelector = require('use-sync-external-store/shim/with-selector');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -33,25 +31,60 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
 
-function useIdleInterpreter(machine, options) {
-  {
-    const [initialMachine] = React.useState(machine);
-    if (machine.config !== initialMachine.config) {
-      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
-    }
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  const actorRef = useConstant.useConstant(() => {
-    return xstate.interpret(machine, options);
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
   });
+}
+
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
+    const actorRef = xstate.createActor(logic, options);
+    return [logic.config, actorRef];
+  });
+  if (logic.config !== currentConfig) {
+    const newActorRef = xstate.createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect__default["default"](() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -64,19 +97,17 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  if (actors.isActorRef(logic)) {
+  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
     throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
   }
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = React.useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -90,9 +121,7 @@ function useActor(logic, options = {}) {
   React.useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = xstate.InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];
@@ -177,8 +206,7 @@ function createActorContext(actorLogic, interpreterOptions) {
 }
 
 /**
- *
- * @deprecated Use `useActor(...)` instead.
+ * @alias useActor
  */
 function useMachine(machine, options = {}) {
   return useActor(machine, options);

package/dist/xstate-react.development.esm.js

@@ -1,31 +1,64 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, InterpreterStatus, interpret } from 'xstate';
-import { u as useConstant } from './useConstant-bac83df4.development.esm.js';
+import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { isActorRef } from 'xstate/actors';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
-function useIdleInterpreter(machine, options) {
-  {
-    const [initialMachine] = useState(machine);
-    if (machine.config !== initialMachine.config) {
-      console.warn(`Actor logic has changed between renders. This is not supported and may lead to invalid snapshots.`);
-    }
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
   }
-  const actorRef = useConstant(() => {
-    return interpret(machine, options);
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
   });
+}
+
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = useState(() => {
+    const actorRef = createActor(logic, options);
+    return [logic.config, actorRef];
+  });
+  if (logic.config !== currentConfig) {
+    const newActorRef = createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -38,19 +71,17 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  if (isActorRef(logic)) {
+  if (!!logic && 'send' in logic && typeof logic.send === 'function') {
     throw new Error(`useActor() expects actor logic (e.g. a machine), but received an ActorRef. Use the useSelector(actorRef, ...) hook instead to read the ActorRef's snapshot.`);
   }
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -64,9 +95,7 @@ function useActor(logic, options = {}) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];
@@ -151,8 +180,7 @@ function createActorContext(actorLogic, interpreterOptions) {
 }
 
 /**
- *
- * @deprecated Use `useActor(...)` instead.
+ * @alias useActor
  */
 function useMachine(machine, options = {}) {
   return useActor(machine, options);

package/dist/xstate-react.esm.js

@@ -1,25 +1,64 @@
 import * as React from 'react';
-import { useEffect, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { toObserver, InterpreterStatus, interpret } from 'xstate';
-import { u as useConstant } from './useConstant-c7ec0fdd.esm.js';
+import { toObserver, createActor } from 'xstate';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import 'xstate/actors';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
-function useIdleInterpreter(machine, options) {
-  const actorRef = useConstant(() => {
-    return interpret(machine, options);
+const forEachActor = (actorRef, callback) => {
+  callback(actorRef);
+  const children = actorRef.getSnapshot().children;
+  if (children) {
+    Object.values(children).forEach(child => {
+      forEachActor(child, callback);
+    });
+  }
+};
+function stopRootWithRehydration(actorRef) {
+  // persist snapshot here in a custom way allows us to persist inline actors and to preserve actor references
+  // we do it to avoid setState in useEffect when the effect gets "reconnected"
+  // this currently only happens in Strict Effects but it simulates the Offscreen aka Activity API
+  // it also just allows us to end up with a somewhat more predictable behavior for the users
+  const persistedSnapshots = [];
+  forEachActor(actorRef, ref => {
+    persistedSnapshots.push([ref, ref.getSnapshot()]);
+    // muting observers allow us to avoid `useSelector` from being notified about the stopped snapshot
+    // React reconnects its subscribers (from the useSyncExternalStore) on its own
+    // and userland subscibers should basically always do the same anyway
+    // as each subscription should have its own cleanup logic and that should be called each such reconnect
+    ref.observers = new Set();
+  });
+  actorRef.stop();
+  persistedSnapshots.forEach(([ref, snapshot]) => {
+    ref._processingStatus = 0;
+    ref._snapshot = snapshot;
   });
+}
+
+function useIdleActorRef(logic, options) {
+  let [[currentConfig, actorRef], setCurrent] = useState(() => {
+    const actorRef = createActor(logic, options);
+    return [logic.config, actorRef];
+  });
+  if (logic.config !== currentConfig) {
+    const newActorRef = createActor(logic, {
+      ...options,
+      snapshot: actorRef.getPersistedSnapshot({
+        __unsafeAllowInlineActors: true
+      })
+    });
+    setCurrent([logic.config, newActorRef]);
+    actorRef = newActorRef;
+  }
 
   // TODO: consider using `useAsapEffect` that would do this in `useInsertionEffect` is that's available
   useIsomorphicLayoutEffect(() => {
-    actorRef.logic.implementations = machine.implementations;
+    actorRef.logic.implementations = logic.implementations;
   });
   return actorRef;
 }
-function useActorRef(machine, ...[options = {}, observerOrListener]) {
-  const actorRef = useIdleInterpreter(machine, options);
+function useActorRef(machine, options = {}, observerOrListener) {
+  const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
       return;
@@ -32,16 +71,14 @@ function useActorRef(machine, ...[options = {}, observerOrListener]) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
-  }, []);
+  }, [actorRef]);
   return actorRef;
 }
 
 function useActor(logic, options = {}) {
-  const actorRef = useIdleInterpreter(logic, options);
+  const actorRef = useIdleActorRef(logic, options);
   const getSnapshot = useCallback(() => {
     return actorRef.getSnapshot();
   }, [actorRef]);
@@ -55,9 +92,7 @@ function useActor(logic, options = {}) {
   useEffect(() => {
     actorRef.start();
     return () => {
-      actorRef.stop();
-      actorRef.status = InterpreterStatus.NotStarted;
-      actorRef._initState();
+      stopRootWithRehydration(actorRef);
     };
   }, [actorRef]);
   return [actorSnapshot, actorRef.send, actorRef];
@@ -142,8 +177,7 @@ function createActorContext(actorLogic, interpreterOptions) {
 }
 
 /**
- *
- * @deprecated Use `useActor(...)` instead.
+ * @alias useActor
  */
 function useMachine(machine, options = {}) {
   return useActor(machine, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.0",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -18,20 +18,6 @@
   "main": "dist/xstate-react.cjs.js",
   "module": "dist/xstate-react.esm.js",
   "exports": {
-    "./fsm": {
-      "types": {
-        "import": "./fsm/dist/xstate-react-fsm.cjs.mjs",
-        "default": "./fsm/dist/xstate-react-fsm.cjs.js"
-      },
-      "development": {
-        "module": "./fsm/dist/xstate-react-fsm.development.esm.js",
-        "import": "./fsm/dist/xstate-react-fsm.development.cjs.mjs",
-        "default": "./fsm/dist/xstate-react-fsm.development.cjs.js"
-      },
-      "module": "./fsm/dist/xstate-react-fsm.esm.js",
-      "import": "./fsm/dist/xstate-react-fsm.cjs.mjs",
-      "default": "./fsm/dist/xstate-react-fsm.cjs.js"
-    },
     ".": {
       "types": {
         "import": "./dist/xstate-react.cjs.mjs",
@@ -57,8 +43,7 @@
   "types": "dist/xstate-react.cjs.d.ts",
   "sideEffects": false,
   "files": [
-    "dist",
-    "fsm"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -69,14 +54,10 @@
     "url": "https://github.com/statelyai/xstate/issues"
   },
   "peerDependencies": {
-    "@xstate/fsm": "^3.0.0-beta.3",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.0.0-beta.18"
+    "xstate": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@xstate/fsm": {
-      "optional": true
-    },
     "xstate": {
       "optional": true
     }
@@ -91,17 +72,10 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/use-sync-external-store": "^0.0.3",
-    "@xstate/fsm": "3.0.0-beta.3",
     "jsdom": "^14.0.0",
     "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.0.0-beta.18"
-  },
-  "preconstruct": {
-    "entrypoints": [
-      "./index.ts",
-      "./fsm.ts"
-    ]
+    "xstate": "5.0.0"
   }
 }

package/dist/declarations/src/fsm.d.ts

@@ -1,3 +0,0 @@
-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];

package/dist/useConstant-2ee82f84.cjs.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function useConstant(fn) {
-  const ref = React__namespace.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
-  }
-  return ref.current.v;
-}
-
-exports.useConstant = useConstant;

package/dist/useConstant-ae6dceac.development.cjs.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-function useConstant(fn) {
-  const ref = React__namespace.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
-  }
-  return ref.current.v;
-}
-
-exports.useConstant = useConstant;

package/dist/useConstant-bac83df4.development.esm.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-function useConstant(fn) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
-  }
-  return ref.current.v;
-}
-
-export { useConstant as u };

package/dist/useConstant-c7ec0fdd.esm.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-function useConstant(fn) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = {
-      v: fn()
-    };
-  }
-  return ref.current.v;
-}
-
-export { useConstant as u };

package/fsm/dist/xstate-react-fsm.cjs.d.mts

@@ -1,2 +0,0 @@
-export * from "../../dist/declarations/src/fsm.js";
-//# sourceMappingURL=xstate-react-fsm.cjs.d.mts.map

package/fsm/dist/xstate-react-fsm.cjs.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"xstate-react-fsm.cjs.d.mts","sourceRoot":"","sources":["../../dist/declarations/src/fsm.d.ts"],"names":[],"mappings":"AAAA"}

package/fsm/dist/xstate-react-fsm.cjs.d.ts

@@ -1,2 +0,0 @@
-export * from "../../dist/declarations/src/fsm";
-//# sourceMappingURL=xstate-react-fsm.cjs.d.ts.map

package/fsm/dist/xstate-react-fsm.cjs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"xstate-react-fsm.cjs.d.ts","sourceRoot":"","sources":["../../dist/declarations/src/fsm.d.ts"],"names":[],"mappings":"AAAA"}

package/fsm/dist/xstate-react-fsm.cjs.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var fsm = require('@xstate/fsm');
-var React = require('react');
-var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
-var withSelector = require('use-sync-external-store/shim/with-selector');
-var useConstant = require('../../dist/useConstant-2ee82f84.cjs.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
-
-function identity(a) {
-  return a;
-}
-function useMachine(stateMachine, options) {
-  const persistedStateRef = React.useRef();
-  const [service, queue] = useConstant.useConstant(() => {
-    const queue = [];
-    const service = fsm.interpret(fsm.createMachine(stateMachine.config, options ? options : stateMachine._options));
-    const {
-      send
-    } = service;
-    service.send = event => {
-      if (service.status === fsm.InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-    return [service, queue];
-  });
-
-  // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect__default["default"](() => {
-    if (options) {
-      service._machine._options = options;
-    }
-  });
-  const useServiceResult = useService(service);
-  React.useEffect(() => {
-    service.start(persistedStateRef.current);
-    queue.forEach(service.send);
-    persistedStateRef.current = service.state;
-    return () => {
-      service.stop();
-    };
-  }, []);
-  return useServiceResult;
-}
-const isEqual = (_prevState, nextState) => nextState.changed === false;
-function useService(service) {
-  const getSnapshot = React.useCallback(() => service.state, [service]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = service.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [service]);
-  const storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
-  return [storeSnapshot, service.send, service];
-}
-
-exports.useMachine = useMachine;
-exports.useService = useService;

package/fsm/dist/xstate-react-fsm.cjs.mjs

@@ -1,4 +0,0 @@
-export {
-  useMachine,
-  useService
-} from "./xstate-react-fsm.cjs.js";

package/fsm/dist/xstate-react-fsm.development.cjs.js

@@ -1,74 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var fsm = require('@xstate/fsm');
-var React = require('react');
-var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
-var withSelector = require('use-sync-external-store/shim/with-selector');
-var useConstant = require('../../dist/useConstant-ae6dceac.development.cjs.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var useIsomorphicLayoutEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicLayoutEffect);
-
-function identity(a) {
-  return a;
-}
-function useMachine(stateMachine, options) {
-  const persistedStateRef = React.useRef();
-  {
-    const [initialMachine] = React.useState(stateMachine);
-    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.');
-    }
-  }
-  const [service, queue] = useConstant.useConstant(() => {
-    const queue = [];
-    const service = fsm.interpret(fsm.createMachine(stateMachine.config, options ? options : stateMachine._options));
-    const {
-      send
-    } = service;
-    service.send = event => {
-      if (service.status === fsm.InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-    return [service, queue];
-  });
-
-  // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect__default["default"](() => {
-    if (options) {
-      service._machine._options = options;
-    }
-  });
-  const useServiceResult = useService(service);
-  React.useEffect(() => {
-    service.start(persistedStateRef.current);
-    queue.forEach(service.send);
-    persistedStateRef.current = service.state;
-    return () => {
-      service.stop();
-    };
-  }, []);
-  return useServiceResult;
-}
-const isEqual = (_prevState, nextState) => nextState.changed === false;
-function useService(service) {
-  const getSnapshot = React.useCallback(() => service.state, [service]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = service.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [service]);
-  const storeSnapshot = withSelector.useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
-  return [storeSnapshot, service.send, service];
-}
-
-exports.useMachine = useMachine;
-exports.useService = useService;

package/fsm/dist/xstate-react-fsm.development.cjs.mjs

@@ -1,4 +0,0 @@
-export {
-  useMachine,
-  useService
-} from "./xstate-react-fsm.development.cjs.js";

package/fsm/dist/xstate-react-fsm.development.esm.js

@@ -1,65 +0,0 @@
-import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
-import { u as useConstant } from '../../dist/useConstant-bac83df4.development.esm.js';
-
-function identity(a) {
-  return a;
-}
-function useMachine(stateMachine, options) {
-  const persistedStateRef = useRef();
-  {
-    const [initialMachine] = useState(stateMachine);
-    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.');
-    }
-  }
-  const [service, queue] = useConstant(() => {
-    const queue = [];
-    const service = interpret(createMachine(stateMachine.config, options ? options : stateMachine._options));
-    const {
-      send
-    } = service;
-    service.send = event => {
-      if (service.status === InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-    return [service, queue];
-  });
-
-  // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect(() => {
-    if (options) {
-      service._machine._options = options;
-    }
-  });
-  const useServiceResult = useService(service);
-  useEffect(() => {
-    service.start(persistedStateRef.current);
-    queue.forEach(service.send);
-    persistedStateRef.current = service.state;
-    return () => {
-      service.stop();
-    };
-  }, []);
-  return useServiceResult;
-}
-const isEqual = (_prevState, nextState) => nextState.changed === false;
-function useService(service) {
-  const getSnapshot = useCallback(() => service.state, [service]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = service.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [service]);
-  const storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
-  return [storeSnapshot, service.send, service];
-}
-
-export { useMachine, useService };

package/fsm/dist/xstate-react-fsm.esm.js

@@ -1,59 +0,0 @@
-import { interpret, createMachine, InterpreterStatus } from '@xstate/fsm';
-import { useRef, useEffect, useCallback } from 'react';
-import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
-import { u as useConstant } from '../../dist/useConstant-c7ec0fdd.esm.js';
-
-function identity(a) {
-  return a;
-}
-function useMachine(stateMachine, options) {
-  const persistedStateRef = useRef();
-  const [service, queue] = useConstant(() => {
-    const queue = [];
-    const service = interpret(createMachine(stateMachine.config, options ? options : stateMachine._options));
-    const {
-      send
-    } = service;
-    service.send = event => {
-      if (service.status === InterpreterStatus.NotStarted) {
-        queue.push(event);
-        return;
-      }
-      send(event);
-      persistedStateRef.current = service.state;
-    };
-    return [service, queue];
-  });
-
-  // TODO: consider using `useInsertionEffect` if available
-  useIsomorphicLayoutEffect(() => {
-    if (options) {
-      service._machine._options = options;
-    }
-  });
-  const useServiceResult = useService(service);
-  useEffect(() => {
-    service.start(persistedStateRef.current);
-    queue.forEach(service.send);
-    persistedStateRef.current = service.state;
-    return () => {
-      service.stop();
-    };
-  }, []);
-  return useServiceResult;
-}
-const isEqual = (_prevState, nextState) => nextState.changed === false;
-function useService(service) {
-  const getSnapshot = useCallback(() => service.state, [service]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = service.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [service]);
-  const storeSnapshot = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity, isEqual);
-  return [storeSnapshot, service.send, service];
-}
-
-export { useMachine, useService };

package/fsm/package.json

@@ -1,4 +0,0 @@
-{
-  "main": "dist/xstate-react-fsm.cjs.js",
-  "module": "dist/xstate-react-fsm.esm.js"
-}