@xstate/react 4.1.0 → 4.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [React](https://github.com/facebook/react/).
 
-- [Read the full documentation in the XState docs](https://xstate.js.org/docs/packages/xstate-react/).
+- [Read the full documentation in the XState docs](https://stately.ai/docs/xstate-react).
 - [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).
 
 ## Quick start
@@ -15,7 +15,7 @@ npm i xstate @xstate/react
 
 2. Import the `useMachine` hook:
 
-```js
+```tsx
 import { useMachine } from '@xstate/react';
 import { createMachine } from 'xstate';
 
@@ -36,7 +36,7 @@ export const Toggler = () => {
   const [state, send] = useMachine(toggleMachine);
 
   return (
-    <button onClick={() => send('TOGGLE')}>
+    <button onClick={() => send({ type: 'TOGGLE' })}>
       {state.value === 'inactive'
         ? 'Click to activate'
         : 'Active! Click to deactivate'}

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

@@ -6,9 +6,7 @@ export declare function createActorContext<TLogic extends AnyActorLogic>(actorLo
     Provider: (props: {
         children: React.ReactNode;
         options?: ActorOptions<TLogic>;
-        /**
-         * @deprecated Use `logic` instead.
-         */
+        /** @deprecated Use `logic` instead. */
         machine?: never;
         logic?: TLogic;
     }) => React.ReactElement<any, any>;

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

@@ -1,6 +1,6 @@
+export { createActorContext } from "./createActorContext.js";
+export { shallowEqual } from "./shallowEqual.js";
 export { useActor } from "./useActor.js";
 export { useActorRef } from "./useActorRef.js";
 export { useSelector } from "./useSelector.js";
-export { shallowEqual } from "./shallowEqual.js";
-export { createActorContext } from "./createActorContext.js";
 export { useMachine } from "./useMachine.js";

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

@@ -1,2 +1,6 @@
-import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom } from 'xstate';
-export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, options?: ActorOptions<TLogic>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];
+import { Actor, ActorOptions, AnyActorLogic, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+export declare function useActor<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): [SnapshotFrom<TLogic>, Actor<TLogic>['send'], Actor<TLogic>];

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

@@ -1,3 +1,15 @@
-import { Actor, ActorOptions, AnyActorLogic, Observer, SnapshotFrom } from 'xstate';
-export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLogic, options: Partial<ActorOptions<TLogic>>): Actor<TLogic>;
-export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, options?: ActorOptions<TLogic>, observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)): Actor<TLogic>;
+import { Actor, ActorOptions, AnyActorLogic, Observer, SnapshotFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+export declare function useIdleActorRef<TLogic extends AnyActorLogic>(logic: TLogic, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TLogic>>>): Actor<TLogic>;
+export declare function useActorRef<TLogic extends AnyActorLogic>(machine: TLogic, ...[options, observerOrListener]: IsNotNever<RequiredActorOptionsKeys<TLogic>> extends true ? [
+    options: ActorOptions<TLogic> & {
+        [K in RequiredActorOptionsKeys<TLogic>]: unknown;
+    },
+    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
+] : [
+    options?: ActorOptions<TLogic>,
+    observerOrListener?: Observer<SnapshotFrom<TLogic>> | ((value: SnapshotFrom<TLogic>) => void)
+]): Actor<TLogic>;

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

@@ -1,5 +1,7 @@
-import { Actor, ActorOptions, AnyStateMachine, StateFrom } from 'xstate';
-/**
- * @alias useActor
- */
-export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, options?: ActorOptions<TMachine>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];
+import { Actor, ActorOptions, AnyStateMachine, StateFrom, type ConditionalRequired, type IsNotNever, type RequiredActorOptionsKeys } from 'xstate';
+/** @alias useActor */
+export declare function useMachine<TMachine extends AnyStateMachine>(machine: TMachine, ...[options]: ConditionalRequired<[
+    options?: ActorOptions<TMachine> & {
+        [K in RequiredActorOptionsKeys<TMachine>]: unknown;
+    }
+], IsNotNever<RequiredActorOptionsKeys<TMachine>>>): [StateFrom<TMachine>, Actor<TMachine>['send'], Actor<TMachine>];

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

@@ -1,2 +1,4 @@
-import { ActorRef, SnapshotFrom } from 'xstate';
-export declare function useSelector<TActor extends ActorRef<any, any> | undefined, T>(actor: TActor, selector: (emitted: TActor extends ActorRef<any, any> ? SnapshotFrom<TActor> : undefined) => T, compare?: (a: T, b: T) => boolean): T;
+import { AnyActorRef } from 'xstate';
+export declare function useSelector<TActor extends Pick<AnyActorRef, 'subscribe' | 'getSnapshot'> | undefined, T>(actor: TActor, selector: (snapshot: TActor extends {
+    getSnapshot(): infer TSnapshot;
+} ? TSnapshot : undefined) => T, compare?: (a: T, b: T) => boolean): T;

package/dist/xstate-react.cjs.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var shim = require('use-sync-external-store/shim');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -63,7 +63,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
     const actorRef = xstate.createActor(logic, options);
     return [logic.config, actorRef];
@@ -85,7 +85,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
@@ -105,27 +105,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = React.useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -144,30 +123,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -210,10 +165,53 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var shim = require('use-sync-external-store/shim');
 var useIsomorphicLayoutEffect = require('use-isomorphic-layout-effect');
 var xstate = require('xstate');
 var withSelector = require('use-sync-external-store/shim/with-selector');
+var shim = require('use-sync-external-store/shim');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -63,7 +63,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = React.useState(() => {
     const actorRef = xstate.createActor(logic, options);
     return [logic.config, actorRef];
@@ -85,7 +85,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   React.useEffect(() => {
     if (!observerOrListener) {
@@ -105,30 +105,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  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 = useIdleActorRef(logic, options);
-  const getSnapshot = React.useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = React.useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  React.useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -147,30 +123,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React__namespace.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -213,10 +165,56 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  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 = useIdleActorRef(logic, options);
+  const getSnapshot = React.useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = React.useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React.useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const forEachActor = (actorRef, callback) => {
   callback(actorRef);
@@ -37,7 +37,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = useState(() => {
     const actorRef = createActor(logic, options);
     return [logic.config, actorRef];
@@ -59,7 +59,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
@@ -79,30 +79,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  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 = useIdleActorRef(logic, options);
-  const getSnapshot = useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -121,30 +97,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -187,10 +139,56 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  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 = useIdleActorRef(logic, options);
+  const getSnapshot = useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

package/dist/xstate-react.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { toObserver, createActor } from 'xstate';
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const forEachActor = (actorRef, callback) => {
   callback(actorRef);
@@ -37,7 +37,7 @@ function stopRootWithRehydration(actorRef) {
   });
 }
 
-function useIdleActorRef(logic, options) {
+function useIdleActorRef(logic, ...[options]) {
   let [[currentConfig, actorRef], setCurrent] = useState(() => {
     const actorRef = createActor(logic, options);
     return [logic.config, actorRef];
@@ -59,7 +59,7 @@ function useIdleActorRef(logic, options) {
   });
   return actorRef;
 }
-function useActorRef(machine, options = {}, observerOrListener) {
+function useActorRef(machine, ...[options, observerOrListener]) {
   const actorRef = useIdleActorRef(machine, options);
   useEffect(() => {
     if (!observerOrListener) {
@@ -79,27 +79,6 @@ function useActorRef(machine, options = {}, observerOrListener) {
   return actorRef;
 }
 
-function useActor(logic, options = {}) {
-  const actorRef = useIdleActorRef(logic, options);
-  const getSnapshot = useCallback(() => {
-    return actorRef.getSnapshot();
-  }, [actorRef]);
-  const subscribe = useCallback(handleStoreChange => {
-    const {
-      unsubscribe
-    } = actorRef.subscribe(handleStoreChange);
-    return unsubscribe;
-  }, [actorRef]);
-  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    actorRef.start();
-    return () => {
-      stopRootWithRehydration(actorRef);
-    };
-  }, [actorRef]);
-  return [actorSnapshot, actorRef.send, actorRef];
-}
-
 function defaultCompare(a, b) {
   return a === b;
 }
@@ -118,30 +97,6 @@ function useSelector(actor, selector, compare = defaultCompare) {
   return selectedSnapshot;
 }
 
-// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function createActorContext(actorLogic, actorOptions) {
   const ReactContext = /*#__PURE__*/React.createContext(null);
   const OriginalProvider = ReactContext.Provider;
@@ -184,10 +139,53 @@ function createActorContext(actorLogic, actorOptions) {
   };
 }
 
-/**
- * @alias useActor
- */
-function useMachine(machine, options = {}) {
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function useActor(logic, ...[options]) {
+  const actorRef = useIdleActorRef(logic, options);
+  const getSnapshot = useCallback(() => {
+    return actorRef.getSnapshot();
+  }, [actorRef]);
+  const subscribe = useCallback(handleStoreChange => {
+    const {
+      unsubscribe
+    } = actorRef.subscribe(handleStoreChange);
+    return unsubscribe;
+  }, [actorRef]);
+  const actorSnapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    actorRef.start();
+    return () => {
+      stopRootWithRehydration(actorRef);
+    };
+  }, [actorRef]);
+  return [actorSnapshot, actorRef.send, actorRef];
+}
+
+/** @alias useActor */
+function useMachine(machine, ...[options]) {
   return useActor(machine, options);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xstate/react",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "XState tools for React",
   "keywords": [
     "state",
@@ -55,7 +55,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "xstate": "^5.6.2"
+    "xstate": "^5.18.1"
   },
   "peerDependenciesMeta": {
     "xstate": {
@@ -64,18 +64,16 @@
   },
   "dependencies": {
     "use-isomorphic-layout-effect": "^1.1.2",
-    "use-sync-external-store": "^1.0.0"
+    "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.4.0",
-    "@types/jsdom": "^12.2.3",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.3",
-    "jsdom": "^14.0.0",
-    "jsdom-global": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "xstate": "5.6.2"
+    "rxjs": "^7.8.0",
+    "xstate": "5.18.1"
   }
 }